vui.style v0.1.1

Table of contents

• Quick start
• What's included
• How to configure ?
• How to use ?
• Cheat Sheet

Quick start

• Download the latest release: https://github.com/grujoskiblagojche/vui/archive/master.zip
• Clone the repo: git clone https://github.com/grujoskiblagojche/vui
• Add the /scss source files into your project

What's included

Within the download you'll find the following directories and files combined into 2.95 KB :)

vui/
├── scss/
│   ├── partials/
│   │   ├── variables.scss
│   │   ├── grid.scss
│   │   ├── columns.scss
│   │   ├── spacings.scss
│   │   └── helpers.scss
│   └── vui.scss
│    
├── vui.css
└── vui.min.css

• Default vui.css ready for development and possible optimizations before a project release
• Minified vui.min.css version ready to be used in production
• Core framework files and partials into the scss folder

How To Configure?

There are several options that you can configure into scss/partials/_variables.scss

• Number of grid columns ( defaults to 12 )

$grid-columns: 12;

• General spacing values for margin & padding represented in rem units, :root equals to 16px

$sm: 0.3125rem;  // 5px
$md: 0.625rem;   // 10px
$lg: 0.9375rem;  // 15px

• Page container width ( defaults to 80vh and max-width of 1440px )

$container-width: 80vw;
$container-max-width: 1440px;

• more to come..

How To Use?

You already know how to use this framework if you know the well known story about the flex parent. Who takes care of it's children elements, pointing them into a right direction :)

We can start simple, getting into the concept by a real world examples:

https://codesandbox.io/s/vui-layout-showcase-txmod

Cheat Sheet

• GRID

.container - wraps content in middle by 80vw as a default

.row - align child elements horizontaly

.col - align child elements verticaly

.h-start or .h-s - align horizontal start

.h-center or .h-c - align horizontal center

.h-end or .h-s - align horizontal end

.v-start or .v-s - align vertical start

.v-center or .v-c - align vertical center

.v-end or .v-e - align vertical end

.abs - align child elements in absolute center

.spa - make equal space around child elements

.spb - make equal space between child elements

.wrap - makes child elements to wrap into another row based on their width

• COLLUMNS

Can be set to a custom value based on your needs into _variables.scss - $grid-columns ( defaults to 12 ).

.col-1 .col-2 .col-3 . . . .col-n

• SPACINGS ( margin / padding )

Use _ for directions ( top / right / left / bottom ), and - for size values ( sm / md / lg ).

.m-sm

.m_t-sm .m_r-sm .m_b-sm .m_l-sm

.p-sm

.p_t-sm .p_r-sm .p_b-sm .p_l-sm

• HELPERS

.relative .absolute .fixed .sticky

.hidden .scroll-x .scroll-y

full-width full-height