Grid system

The grid system, is the most powerfull, you have every find to build layouts of all shapes and sizes.

What can you do

Simply

You have many possibilities to use this system, the most easier, is similard to other basically framework with twelve column.

Complexe

But this framework can be more powerfull, with other framework you can't do what you want, with this, you have more possibilities, you are not limited to a row you can choose the placement of all element.

Placement

You can place all elements independently of each other. Each child is placed in relation to himself but also to the other.

How does it works

Col

Noname's grid system uses a commun naming system, it's build with css grid and is fully responsive (with breakpoint).
We are going to look together how it's work.
At the beginning the basic system based on twelve column.
You open one time .grid and you do what you want inside, you don't need to use .grid for all rows and columns.
And in the .grid you created your columns with .col-x.

Row

Now, we can explain what is the .row. The .row is for define number row your element can use, in this exemple the first element is define to .col-3 and .row-3, this element grows itself to use the number of rows defined, here is 3, this element grows itself for 3 rows.

Offset

The offset element defines the position where your element begins, if you define .offset-3, you declare your element begin to the fourth position, like the exemple.

Line

And for finish, the last element of placement is the line, where you define witch line your element begin, based twelves line same to the columns

For exemple : if you define the last element to .line-1, your element is automaticly repositionned to the first line, like the exemple.

Complet

This is just an exemple of what you can do.

Breakpoint

For the responsive, you have breakpoint to replace element for tablet or mobile.
This framework is based on mobile first width seven size of breakpoint, for "unlimited" adaptative element.

Breakpoint :
none : 0px (smalless)
ms : 240px (mobile small)
ml : 400px (mobile large)
ts : 576px (tablet small)
tl : 768px (tablet large)
ds : 1024px (desktop small)
dl : 1280px (desktop large)

For exemple : if you have 4 col in desktop is .col-3 to fourth element, .col-3 in tablet. if is little, you need to grow up this, you want fourth .col-6 in tablet and fourth .col-12 in mobile.
At first you define the mobile element --> .col-12 and you grow size up, tablet and finish to desktop.
The complet class is : ".col-12 .col-ts-6 .col-ds-3".
The most smaller is not ms is nothings (.col-12 < .col-ms-12)

Flex

You can use all flex elements easily, for particulary placement and complet the grid.

To use the flex element, you need to use .rows or .columns on the parent element, and after you can sub use the other element : .between, .around, evenly, .center, .start, .end, .middle.

You need to know, if you use .columns instead of .rows you invert the placement logic of the elements, for example: .middle with .columns will center horizontally and no longer vertically, .start becomes .top ...

The reverse element reverse all placement and reverse the logic too but differently, .start becomes .end ...

You can use breakpoint like this .breaker-element,
For exemple : .tabletsmall-middle become .ts-middle

Flex self

Some flex elements work in self class, where the flex element is use on parent, you can use it for only some child for this element : with .s-start, .s-center, .s-end, .s-stretch, .s-baseline
s --> self; .s-start --> .self-start.

You can use breakpoint like this .breaker-element,
For exemple : .tabletsmall-self-center become .ts-s-center

Flex mixed

With flex, you can mix all elements like this :

Macro placement

You can easily use the padding and margin element with multi class and mix them up.

You can use breakpoint like this .style-breaker-number,
For exemple padding: .padding-top-tabletsmall-32 become .p-t-ts-32
For exemple margin: .margin-top-tabletsmall-32 become .m-t-ts-32
For exemple margin minus: .magin-top-minus-tabletsmall-32 become .m-t-minus-ts-32

Mixed macro placement

You can easily use the padding and margin element with multi class and mix them up.

Particulary element

You can use element :
To define height : .h-xx (.h-10 to .h-100 is defined in vh)
To define width : .w-xx (.w-10 to .w-100 is defined in %)
To define border-radius : .br-x (.border-radius --> .br-x; x: 0, 4, 8, 12, 16 is defined in px)
To define border-position-radius : .br-position-x (position is : t-l: 'top left', t-r: 'top right', b-l: 'bottom left', b-r: 'bottom right'; x: 0, 4, 8, 12, 16 is define in px)
To define box-shadow : .s-x and for hover .s-h-x (.shadow-x and .shadow-hover-x --> .s-1 to .s-5 and .s-h-1 to .s-h-5 is material shadow)

Colors

Define the colors of different type elements.
You have three categories of colors: lighten, normal, darken.
You have three type of colors element (and more): colors, background, border.
You can use on hover the same element.
All elements have been renamed for use more easier:

Ligthen : l
Normal : none
Darken : d

Colors : c
Background : b
Border : d

hover : h

Complet class colors

Simple to use, .b-h-l-orange it's an element "background on hover lighten orange".
You define, what you want, color, background or border, after you define if is on hover, and for finish you define your colors, and for colors you define if is lighten, normal or darken.
For resume ".background-hover-lighten-orange" become ".b-h-l-orange"

Forms

Now, for forms element you don't have any class to define, you juste do you html how you want with all placement element at your disposal.

Colors Forms

You can use the colors element on forms, it work's like color, background or border but, when color... become c... here, is just input and check.

For exemple : if you want ".input-hover-lighten-indigo" you define .input-h-l-indigo. And same for checkbox and radio but you rewrite input in check (checkbox and radio is .check-x).