ufo-framework

    1.1.2 • Public • Published

    NPM

    UFO Framework

    Based off a framework by DesignByCode

    This is a very light weight css framework with only the bear minimal to create a response website layout. This framework only consist of 3 major components. A customizable responsive grid, some buttons and form elements.

    Index

    Installation

    UFO Framework can be installed with npm or yarn

    npm install ufo-framework
    yarn add ufo-framework

    Setup Framework

    The framework is created using scss. To use it you need to set up you sass environment first. Create your main sass/scss file and add the following two lines of code to the file.

    @import "~ufo-framework/src/scss/settings";
    @import "~ufo-framework/src/scss/init";

    Override defaults

    To override the default colors and grid sizes you only need to create a _settings.scss file in your project main sass/scss folder and coping the following code in to it.

    Now you can override the theme colors and grid sizes to your need

    @import "settings";
    @import "~ufo-framework/src/scss/init";

    Please note that you can change the key as well as the value of the color and grid.

    $max-width: 1200px;
    $column-count: 12;
    $screen-sizes: (
        'small': 300px,
        'medium': 800px,
        'large': 1100px,
    );
    $padding : 10px;
    $colors: (
        dark: #1c0b19,
        medium-dark: #140d4f,
        medium: #4ea699,
        light: #25e491,
        very-light: #ddf9ea,
        success: #7ac74f,
        info: #25ced1,
        warning: #f75c03,
        alert: #dc143c,
    )

    How to use

    The follow code is working with the default settings file. Just alter the prefix to you corresponding key value name for grid sizes and colors.

    The Grid

    <div class="container">
        <div class="row">
            <div class="small-col-6 medium-col-4"></div>
            <div class="small-col-6 medium-col-4"></div>
            <div class="small-col-12 medium-col-4"></div>
        </div>
    </div>

    The Buttons

    You can create button with any of the $colors map key value

    <a href="#" class="button button--dark">Dark Button</a>
    <a href="#" class="button button--medium-dark">Medium Dark Button</a>
    <a href="#" class="button button--medium">Medium Button</a>
    .....
    <a href="#" class="button button--info">Info Button</a>
    <a href="#" class="button button--success">Success Button</a>
    <a href="#" class="button button--warning">Warning Button</a>
    <a href="#" class="button button--alert">Alert Button</a>

    Extend settings

    There is no limit to how many colors that can be added to the $colors map in _settings file. The same is true of the grid. you can swap the key name with your own and add or remove the key value pair you don't want.

    $screen-sizes: (
        'small': 300px,
        'medium': 800px,
        'large': 1100px,
    );
    // Change to 
    $screen-sizes: (
        'xs': 300px,
        's': 400px,
        'm': 800px,
        'l': 1100px,
        'xl': 1200px,
    );
    $colors: (
        dark: #1c0b19,
        medium-dark: #140d4f,
        medium: #4ea699,
        light: #25e491,
        very-light: #ddf9ea,
        success: #7ac74f,
        info: #25ced1,
        warning: #f75c03,
        alert: #dc143c,
    );
    // Change to
    $colors: (
        main: #1c0b19,
        secondary: #140d4f,
        success: #7ac74f,
        info: #25ced1,
        warning: #f75c03,
        alert: #dc143c,
    );

    Changelog

    Please see CHANGELOG for more information on what has changed recently.

    Credits

    License

    The MIT License (MIT). Please see License File for more information.

    Install

    npm i ufo-framework

    DownloadsWeekly Downloads

    0

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    8.82 kB

    Total Files

    12

    Last publish

    Collaborators

    • designbycode
    • aqua-feather