ufo-framework

css framework


Keywords
css, framework, sass
License
MIT
Install
npm install ufo-framework@1.1.0

Documentation

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.