1 CSS Class Layout System made with Flex
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.DS_Store
1-1-1-3.png
LICENSE
README.md
fluid.css
fluid.html new Nov 12, 2018
fluid.scss
fluid1.html new Nov 12, 2018
semantic.html

README.md

Flex One - 1 CSS Class System

Flex One is CSS Layout system based on one CSS class. This class: .fluid {flex:1}


With this .fluid {flex:1} you can build entire CSS grid system.

Let me show you how it works:

.main{display: flex; flex-flow: row wrap;  width: 80%; margin: 0 auto}

.fluid{flex:1}

.clear{width: 100%}

This CSS is the base for everything. With this CSS you can build solid Grid System.

<div class="fluid">33,3%</div>
<div class="fluid">33,3%</div>
<div class="fluid">33,3%</div>
<div class="clear"></div>

<div class="fluid">25%</div>
<div class="fluid">25%</div>
<div class="fluid">25%</div>
<div class="fluid">25%</div>
<div class="clear"></div>

Super simple, just add the number of columns you need. You can have infinite number of columns. Plus is fluid with natural responsiveness.

When you are finished add the .clear class.

Here is the Demo Grid

Here is clear dynamic example on how .fluid {flex:1} works

Limitations? Yes, many.

One of the biggest limitation is: you must use identical size columns. You can't have 1-1-1-3 or 1-2-1 grid.

We can fix these limitations by adding some CSS code:

.merge2 {flex:2}
.merge3 {flex:3}

Now we can have this 1-1-1-3:

<div class="fluid">1</div>
<div class="fluid">1</div>
<div class="fluid">1</div>
<div class="merge3">Merge 3</div>
<div class="clear"></div>

What about nested columns?

We can use this code for the nested columns:

.nested{display: flex; flex-flow: row wrap; padding:0 !important; margin:0 !important; border: 0 !important}
<div class="fluid nested">
    <div class="fluid">Nested column</div>
    <div class="fluid">Nested column</div>
</div>

Inside any fluid column we can insert any number of other fluid columns by adding the .nested class.

Ok. What about gutter?

The Gutter is optional. If you need it you can use something like this:

.fluid,.merge2,.merge3 {margin:0 0 0 15px}

// or maybe

.fluid,.merge2,.merge3,.merge4 {padding:0 10px}

Some other tweaks.

Here is also alternative to the .clear class:

<div class="fluid"></div>
<div class="fluid"></div>
<div class="fluid"></div>
<div class="clear"></div>

// Alternative columns class:

<div class="columns">
<div class="fluid"></div>
<div class="fluid"></div>
<div class="fluid"></div>
</div>

Demo Complete Grid

Complete version of the CSS code is included in fluid.css and fluid.scss file

Conclusion

Starting with the .fluid{flex:1} class and by adding few other CSS classes we can build infinite column grid system that is fluid and responsive. You need just few lines of CSS to build solid layout system.

License

This project is licensed under the MIT License

P.S

We can push the system even further and use only 2 classes .column and .row and make it more semantic.

// Just 2 classes for the layout

.column{display: flex; flex-flow: row wrap;  width: 80%; margin: 0 auto}
.row{flex:1}

// Use the HTML like this:

<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
....
</div>

Demo Semantic Grid