├── .DS_Store ├── 1-1-1-3.png ├── fluid.scss ├── fluid.css ├── LICENSE ├── semantic.html ├── README.md ├── fluid.html └── fluid1.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vladocar/Flex-One/HEAD/.DS_Store -------------------------------------------------------------------------------- /1-1-1-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vladocar/Flex-One/HEAD/1-1-1-3.png -------------------------------------------------------------------------------- /fluid.scss: -------------------------------------------------------------------------------- 1 | $m: 15px; 2 | $n: 11; 3 | 4 | * {box-sizing: border-box} 5 | 6 | .main{display: flex; flex-flow: row wrap; width: 94%; margin: 0 auto} 7 | 8 | .fluid{flex:1; margin: 0 0 0 $m} 9 | 10 | @for $i from 2 through $n { 11 | .merge#{$i} { 12 | flex:#{$i}; margin:0 0 0 $m} 13 | } 14 | 15 | .clear,.columns{width: 100%} 16 | 17 | .nested,.columns{display: flex; flex-flow: row wrap; padding:0 !important; margin:0 !important; border: 0 !important} 18 | -------------------------------------------------------------------------------- /fluid.css: -------------------------------------------------------------------------------- 1 | * {box-sizing: border-box} 2 | 3 | .main{display: flex; flex-flow: row wrap; width: 80%; margin: 0 auto} 4 | 5 | .fluid{flex:1} 6 | 7 | .merge2{flex:2} 8 | .merge3{flex:3} 9 | .merge4{flex:4} 10 | /* add more .merge classes if you need to */ 11 | 12 | .fluid,.merge2,.merge3,.merge4 {margin:0 0 0 15px} /* optional gutter */ 13 | 14 | .clear,.columns{width: 100%} 15 | 16 | .nested,.columns{display: flex; flex-flow: row wrap; padding:0 !important; margin:0 !important; border: 0 !important} 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Vladimir Carrer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /semantic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex One - 1 CSS Class System 8 | 37 | 38 | 39 | 40 | 41 |
42 |

Flex One - 1 CSS Class System

43 |
44 | 45 |
46 |

.row {flex:1}

47 |
48 | 49 |
50 |
50%
51 |
50%
52 |
53 | 54 |
55 |
33,3%
56 |
33,3%
57 |
33,3%
58 |
59 | 60 |
61 |
25%
62 |
25%
63 |
25%
64 |
25%
65 |
66 | 67 |
68 |
20%
69 |
20%
70 |
20%
71 |
20%
72 |
20%
73 |
74 | 75 |
76 |
16,66%
77 |
16,66%
78 |
16,66%
79 |
16,66%
80 |
16,66%
81 |
16,66%
82 |
83 | 84 |
85 |
12,5%
86 |
12,5%
87 |
12,5%
88 |
12,5%
89 |
12,5%
90 |
12,5%
91 |
12,5%
92 |
12,5%
93 |
94 | 95 |
96 |
97 |

This layout uses only the .row and .column class:

98 |

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

99 | 100 | .row{flex:1} 101 |

102 |
103 |
104 | 105 | 106 |
107 |

Download on Github

108 |
109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Flex One - 1 CSS Class System

2 | 3 |

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

4 | 5 |
6 | 7 |

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

8 | 9 |

Let me show you how it works:

10 | 11 | ```shell 12 | .main{display: flex; flex-flow: row wrap; width: 80%; margin: 0 auto} 13 | 14 | .fluid{flex:1} 15 | 16 | .clear{width: 100%} 17 | ``` 18 |

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

19 | 20 | ```shell 21 |
33,3%
22 |
33,3%
23 |
33,3%
24 |
25 | 26 |
25%
27 |
25%
28 |
25%
29 |
25%
30 |
31 | ``` 32 | 33 |

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

34 | 35 |

When you are finished add the .clear class.

36 | 37 |

Here is the Demo Grid

38 | 39 |

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

40 | 41 |

Limitations? Yes, many.

42 | 43 |

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. 44 | 45 |

We can fix these limitations by adding some CSS code:

46 | 47 | ```shell 48 | .merge2 {flex:2} 49 | .merge3 {flex:3} 50 | ``` 51 | 52 | Now we can have this 1-1-1-3: 53 | 54 | ```shell 55 |
1
56 |
1
57 |
1
58 |
Merge 3
59 |
60 | ``` 61 | 62 | 63 | 64 |

What about nested columns?

65 | 66 |

We can use this code for the nested columns:

67 | 68 | ```shell 69 | .nested{display: flex; flex-flow: row wrap; padding:0 !important; margin:0 !important; border: 0 !important} 70 | ``` 71 | 72 | ```shell 73 |
74 |
Nested column
75 |
Nested column
76 |
77 | ``` 78 |

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

79 | 80 |

Ok. What about gutter?

81 | 82 |

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

83 | 84 | ```shell 85 | .fluid,.merge2,.merge3 {margin:0 0 0 15px} 86 | 87 | // or maybe 88 | 89 | .fluid,.merge2,.merge3,.merge4 {padding:0 10px} 90 | ``` 91 | 92 |

Some other tweaks.

93 | 94 |

Here is also alternative to the .clear class:

95 | 96 | 97 | ```shell 98 |
99 |
100 |
101 |
102 | 103 | // Alternative columns class: 104 | 105 |
106 |
107 |
108 |
109 |
110 | ``` 111 |

Demo Complete Grid

112 | 113 |

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

114 | 115 |

Conclusion

116 | 117 |

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.

118 | 119 |

License

120 |

This project is licensed under the MIT License

121 | 122 |

P.S

123 | 124 |

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

125 | 126 | ```shell 127 | 128 | // Just 2 classes for the layout 129 | 130 | .column{display: flex; flex-flow: row wrap; width: 80%; margin: 0 auto} 131 | .row{flex:1} 132 | 133 | // Use the HTML like this: 134 | 135 |
136 |
137 |
138 |
139 | .... 140 |
141 | ``` 142 | 143 |

Demo Semantic Grid

144 | -------------------------------------------------------------------------------- /fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex One - CSS Framework 8 | 40 | 41 | 42 | 43 |
44 | 45 |

Flex One - 1 CSS Class System

46 |
47 | 48 |

.fluid {flex:1}

49 |
50 | 51 |
50%
52 |
50%
53 |
54 | 55 |
33,3%
56 |
33,3%
57 |
33,3%
58 |
59 | 60 |
25%
61 |
25%
62 |
25%
63 |
25%
64 |
65 | 66 |
20%
67 |
20%
68 |
20%
69 |
20%
70 |
20%
71 |
72 | 73 |
16,66%
74 |
16,66%
75 |
16,66%
76 |
16,66%
77 |
16,66%
78 |
16,66%
79 |
80 | 81 |
12,5%
82 |
12,5%
83 |
12,5%
84 |
12,5%
85 |
12,5%
86 |
12,5%
87 |
12,5%
88 |
12,5%
89 |
90 | 91 |

Flex One is Infinite Grid System based on the Flex CSS Layout

92 |
93 | 94 |

Everything is based on this class: .fluid {flex:1}

95 |
96 | 97 |

There are also the .main container class and the .clear class. And that is it.

98 |
99 | 100 |
101 |
12,5%
102 |
12,5%
103 |
104 |
105 |
106 | 
107 | 
108 |     // Just add any number of .fluid columns like this:
109 | 
110 |     // Two Columns
111 | 
112 |     <div class="fluid"></div>
113 |     <div class="fluid"></div>
114 |     <div class="clear"></div>
115 | 
116 |     // Three Columns
117 | 
118 |     <div class="fluid"></div>
119 |     <div class="fluid"></div>
120 |     <div class="fluid"></div>
121 |     <div class="clear"></div>
122 | 
123 |     // Four Columns
124 | 
125 |     <div class="fluid"></div>
126 |     <div class="fluid"></div>
127 |     <div class="fluid"></div>
128 |     <div class="fluid"></div>
129 |     <div class="clear"></div>
130 |
131 | 132 |
133 |
134 | 135 |

Download on Github

136 |
137 | 138 |
139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /fluid1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flex One - CSS Frameworkrk 9 | 33 | 34 | 35 | 36 |
37 | 38 |

Flex One - 1 CSS Class System

39 |
40 | 41 |

.fluid {flex:1}

42 |
43 | 44 |
50%
45 |
50%
46 |
47 | 48 |
33,3%
49 |
33,3%
50 |
33,3%
51 |
52 | 53 |
25%
54 |
25%
55 |
25%
56 |
25%
57 |
58 | 59 |
20%
60 |
20%
61 |
20%
62 |
20%
63 |
20%
64 |
65 | 66 |
16,66%
67 |
16,66%
68 |
16,66%
69 |
16,66%
70 |
16,66%
71 |
16,66%
72 |
73 | 74 |
12,5%
75 |
12,5%
76 |
12,5%
77 |
12,5%
78 |
12,5%
79 |
12,5%
80 |
12,5%
81 |
12,5%
82 |
83 | 84 |
85 |
12,5%
86 |
12,5%
87 |
12,5%
88 |
12,5%
89 |
12,5%
90 |
12,5%
91 |
12,5%
92 |
12,5%
93 |
94 | 95 |
1
96 |
1
97 |
1
98 |
Merge 3
99 |
1
100 |
1
101 |
Merge 2
102 |
1
103 |
104 | 105 |
Merge 3 (take 3 places)
106 |
1
107 |
1
108 |
1
109 |
110 | 111 |
112 |
Nested column
113 |
Nested column
114 |
115 |
116 | 117 | 118 | 119 |
120 | 
121 | 
122 |     // Just add any number of .fluid columns like this:
123 | 
124 | 
125 |     // Three Columns with .clear class
126 | 
127 |     <div class="fluid"></div>
128 |     <div class="fluid"></div>
129 |     <div class="fluid"></div>
130 |     <div class="clear"></div>
131 | 
132 |     // Three Columns with .columns class
133 | 
134 |     <div class="columns">
135 |     <div class="fluid"></div>
136 |     <div class="fluid"></div>
137 |     <div class="fluid"></div>
138 |     </div>
139 | 
140 | 
141 |
142 | 143 |
144 |
145 | 146 |

Download on Github

147 |
148 | 149 |
150 | 151 | 152 | 153 | --------------------------------------------------------------------------------