Neon CSS
Neon Type
H1 Neon
Type
H2 Neon Type
H2 Neon
Type
H3 Neon Type
H3 Neon
Type
H4 Neon Type
H4 Neon
Type
H5 Neon Type
H5 Neon
Type
H6 Neon Type
H6 Neon
Type
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!
- Item 1
- Item 2
- Item 3
Neon Grid
Hi!
Grids with flexbox are awesome, just have a look!
Size
Fill (default)
[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.
Foo
Bar
Baz
<div class="grid">
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
</div>Foo
Bar
Baz
Boo
Faz
<div class="grid">
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
<div>Boo</div>
<div>Faz</div>
</div>Fit
[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.
Foo
Bar
Baz
<div class="grid grid--fit">
<!-- 3 cells -->
</div>Foo
Bar
Baz
<div class="grid">
<div class="cell--fit">Foo</div>
<div>Bar</div>
<div class="cell--fit">Baz</div>
</div>Full
[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!
Foo
Bar
Baz
<div class="grid grid--full">
<!-- ... -->
</div>Size by fraction
[C] .grid--4 .cell--2on3
CSS flex: 0 0 75%;
Any number of `columns`, anywhere…
Grid fraction sizing
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!
Foo
Bar
Foo
Bar
Bar
Foo
<div class="grid grid--4">
<!-- 6 cells -->
</div>Cell fraction sizing
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.
Foo 2/3
Bar
Bar
Foo 2/3
<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>Align
Cell alignment
Vertical align, made easy
.cell--bottom
Bar
is
quite
quite
long
.cell--middle
.cell--top
<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
Foo
Bar
Baz
Foo
Bar
<div class="grid grid--gutter grid--3 grid--center">
<!-- … -->
</div>Gutters
You got inner gutter...
Foo
Bar
Baz
<div class="grid grid--gutter">
<!-- … -->
</div>...and outer gutter...
Foo
Bar
Baz
<div class="grid grid--outer-gutter">
<!-- … -->
</div>...and both, of course!
Foo
Bar
Baz
<div class="grid grid--gutter grid--outer-gutter">
<!-- … -->
</div>Grids comes together well.
Foo
Bar
Baz
Foo
Bar
Baz
Nested grids
Grids can be nested forever
1
2
3
4
5
6
NO
GUTTER
AT ALL
DOLOR
SIT
AMET
1
2
3
Dont bloat my markup!
Same can be achieved with mixins
.grid {
@include grid("gutter center");
}
.cell {
@include cell("");
}
Vertical grid
So easy to make it vertical!
Foo
Bar
Baz
<div class="grid grid--vertical">
<!-- … -->
</div>Responsive grid
Resize your browser to see it in action
Neon Wrap
Hey!
Neon CSS also includes a responsive site-wrapper component!
Taxonomy
Here is the site structure :
body.site-wrap.wrap.container- …your content…
Parent of all things
This is the main site wrapper
One chunk of content (may be 100% width)
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>Classes
Wrapper
--fit
[C] .wrap-site--fit
[M] @include wrap-site('fit')
--fit-container
[C] .wrap-site--fit-container
[M] @include wrap-site('fit-container')
--sticky-footer
[C] .wrap-site--sticky-footer
[M] @include wrap-site('sticky-footer')
Wrap
--sticky-footer-filler
[C] .sticky-footer-filler
[M] @include sticky-footer-filler()
Container
.container (base class)
[C] .container
[M] @include container()
Flex patterns
Media object
Media object title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus.
Media object title
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.
Media object title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus.
Equal height columns
Centering
thing
margin: auto;