TEXT - NORMAL
dqfgqdfgfdgfg hsfgh dfg hgh fdgh fghdfghfg gf h tryh fgh
trh etryh fgbh ter gfh z klyuil fdsgg
trh cg areg zthytu ety hety
TEXT - BIG
dqfgqdfgfdgfg hsfgh dfg hgh fdgh fghdfghfg gf h tryh fgh
trh etryh fgbh ter gfh z klyuil fdsgg
trh cg areg zthytu ety hety
TEXT - SMALL
dqfgqdfgfdgfg hsfgh dfg hgh fdgh fghdfghfg gf h tryh fgh
trh etryh fgbh ter gfh z klyuil fdsgg
trh cg areg zthytu ety hety
Grids with flexbox are awesome, just have a look!
Hi!
Grids with flexbox are awesome, just have a look!
[C] .grid--fill
.cell--fill
CSS flex-grow: 1;
We all share the same room.
Each cell has the same size, depending on the numbers of cells in the grid.
This is the cell default behaviour, which can be triggered with the --fill
modifier, in case of overiding.
<div class="grid">
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
</div>
<div class="grid">
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
<div>Boo</div>
<div>Faz</div>
</div>
[C] .grid--fit
.cell--fit
CSS flex: none;
Don't take more than a mouthful.
Each cell take minimal amount of space allowing to fit its content.
This can be triggered with the --fit
modifier.
<div class="grid grid--fit">
<!-- 3 cells -->
</div>
<div class="grid">
<div class="cell--fit">Foo</div>
<div>Bar</div>
<div class="cell--fit">Baz</div>
</div>
[C] .grid--full
.cell--full
CSS flex: 0 0 100%;
The story of the Cell who wanted to be as big as a Row.
Each cell take 100% width.
This can be triggered with the --full
modifier.
This make a nice stack for mobile first!
<div class="grid grid--full">
<!-- ... -->
</div>
[C] .grid--4
.cell--2on3
CSS flex: 0 0 75%;
Any number of `columns`, anywhere…
Each cell will take a fraction of the available width.
This can be triggered with the grid--{n}
modifier, where n
is the column total number.
Too many cells will cause the grid to wrap on more than one raw!
But this is also where the overflow pattern happens!
<div class="grid grid--4">
<!-- 6 cells -->
</div>
Each cell will take a fraction of the available width.
This can be triggered with the cell--{m}on{n}
modifier, where n
is the column total number, and m
is the desired width in columns.
<div class="grid grid--3">
<div class="cell--2of3">Foo 2/3</div>
<div>Bar</div>
<div>Bar</div>
<div class="cell--2of3">Foo 2/3</div>
</div>
Vertical align, made easy
<div class="grid grid--gutter">
<div class="cell--bottom">...</div>
<div class="">...</div>
<div class="cell--middle">...</div>
<div class="cell--top">...</div>
</div>
And horizontal too
<div class="grid grid--gutter grid--3 grid--center">
<!-- … -->
</div>
You got inner gutter...
<div class="grid grid--gutter">
<!-- … -->
</div>
...and outer gutter...
<div class="grid grid--outer-gutter">
<!-- … -->
</div>
...and both, of course!
<div class="grid grid--gutter grid--outer-gutter">
<!-- … -->
</div>
Grids comes together well.
Grids can be nested forever
Same can be achieved with mixins
.grid {
@include grid("gutter center");
}
.cell {
@include cell("");
}
So easy to make it vertical!
<div class="grid grid--vertical">
<!-- … -->
</div>
Resize your browser to see it in action
Hey!
Neon CSS also includes a responsive site-wrapper component!
Here is the site structure :
body
Parent of all things
.site-wrap
This is the main site wrapper
.wrap
One chunk of content (may be 100% width)
.container
The main `column` of content, constrained width
Here comes your stuff (or grid things)
<body>
<div class="wrap-site">
<div class="wrap">
<div class="container">
<!-- …your content… -->
</div>
</div>
<div class="wrap">
<div class="container">
<!-- …your content… -->
</div>
</div>
<!-- more wrap's -->
</div>
</body>
[C] .wrap-site--fit
[M] @include wrap-site('fit')
[C] .wrap-site--fit-container
[M] @include wrap-site('fit-container')
[C] .wrap-site--sticky-footer
[M] @include wrap-site('sticky-footer')
[C] .sticky-footer-filler
[M] @include sticky-footer-filler()
[C] .container
[M] @include container()
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus.
margin: auto;