vui.rocks v0.1.0
Table of contents
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 to16px
$sm: 0.3125rem; // 5px
$md: 0.625rem; // 10px
$lg: 0.9375rem; // 15px
- Page container width ( defaults to
80vh
and max-width of1440px
)
$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
4 years ago