https://github.com/vladocar/flex-one
1 CSS Class Layout System made with Flex
https://github.com/vladocar/flex-one
css css-flexbox css-flexbox-layout css-flexible-grid css-framework css-layout css3
Last synced: 4 months ago
JSON representation
1 CSS Class Layout System made with Flex
- Host: GitHub
- URL: https://github.com/vladocar/flex-one
- Owner: vladocar
- License: mit
- Created: 2018-11-10T21:31:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-15T09:43:29.000Z (about 7 years ago)
- Last Synced: 2025-07-09T11:37:17.769Z (7 months ago)
- Topics: css, css-flexbox, css-flexbox-layout, css-flexible-grid, css-framework, css-layout, css3
- Language: HTML
- Homepage: https://vladocar.github.io/Flex-One/
- Size: 33.2 KB
- Stars: 49
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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:
```shell
.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.
```shell
33,3%
33,3%
33,3%
25%
25%
25%
25%
```
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 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:
```shell
.merge2 {flex:2}
.merge3 {flex:3}
```
Now we can have this 1-1-1-3:
```shell
1
1
1
Merge 3
```
What about nested columns?
We can use this code for the nested columns:
```shell
.nested{display: flex; flex-flow: row wrap; padding:0 !important; margin:0 !important; border: 0 !important}
```
```shell
Nested column
Nested column
```
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:
```shell
.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:
```shell
// Alternative columns class:
```
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.
```shell
// 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:
....
```