├── bower.json ├── flexo.css ├── flexo.min.css ├── package.json └── readme.md /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flexo-css", 3 | "version": "0.1.0", 4 | "homepage": "https://github.com/KevinPy/Flexo", 5 | "description": "A grid system based on flex property, and works 100% CSS.", 6 | "main": "flexo.css", 7 | "keywords": [ 8 | "grid", 9 | "flexbox", 10 | "flex" 11 | ], 12 | "authors": [ 13 | "Kevin Py" 14 | ], 15 | "license": "CC-BY-SA-3.0", 16 | "dependencies": { 17 | "Flexo": "https://github.com/KevinPy/Flexo" 18 | }, 19 | "devDependencies": { 20 | "Flexo": "https://github.com/KevinPy/Flexo" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /flexo.css: -------------------------------------------------------------------------------- 1 | /*---------------------------------------- 2 | 3 | 2012 - 2016 @ All rights reserved 4 | Author: Kevin Py 5 | Website: www.kevinpy.com 6 | Flexo v 0.1.0 7 | Website: https://kevinpy.com/Projects/Flexo/ 8 | Licence: CC-BY-SA-3.0 9 | 10 | ---------------------------------------- 11 | 12 | 1 - Layouts 13 | 1.1 - Base 14 | 1.2 - Position 15 | 1.3 - < 960px 16 | 1.4 - 640px < 960px 17 | 1.5 - 320px < 640px 18 | 1.6 - > 320px 19 | 20 | ----------------------------------------*/ 21 | 22 | /*----------------------------------------*/ 23 | /* 1.1 - Base */ 24 | /*----------------------------------------*/ 25 | 26 | .flexo-container { 27 | display: -webkit-flex; 28 | display: -ms-flexbox; 29 | display: -webkit-box; 30 | display: flex; 31 | -webkit-flex-direction: row; 32 | -ms-flex-direction: row; 33 | flex-direction: row; 34 | flex-wrap: wrap; 35 | -webkit-flex: 0 1 auto; 36 | -ms-flex: 0 1 auto; 37 | -webkit-box-flex: 0; 38 | flex: 0 1 auto; 39 | -webkit-flex-direction: row; 40 | -ms-flex-direction: row; 41 | -webkit-box-orient: horizontal; 42 | -webkit-box-direction: normal; 43 | flex-direction: row; 44 | margin-bottom: 2rem; 45 | } 46 | 47 | .flexo-container:last-of-type { margin-bottom: 0; } 48 | 49 | .flexo-container.row-reverse { 50 | -webkit-flex-direction: row-reverse; 51 | -ms-flex-direction: row-reverse; 52 | -webkit-box-orient: horizontal; 53 | -webkit-box-direction: reverse; 54 | flex-direction: row-reverse; 55 | } 56 | 57 | .flexo-container.col { 58 | -webkit-flex-direction: column; 59 | -ms-flex-direction: column; 60 | -webkit-box-orient: vertical; 61 | -webkit-box-direction: normal; 62 | flex-direction: column; 63 | } 64 | 65 | .flexo-container.col-reverse { 66 | -webkit-flex-direction: column-reverse; 67 | -ms-flex-direction: column-reverse; 68 | -webkit-box-orient: vertical; 69 | -webkit-box-direction: reverse; 70 | flex-direction: column-reverse; 71 | } 72 | 73 | /*.flexo-container.col [class*="grid-"] { margin-bottom: 2rem; } 74 | .flexo-container.col [class*="grid-"]:last-of-type { margin-bottom: 0; } 75 | 76 | .flexo-container.col-reverse [class*="grid-"] { margin-top: 2rem; } 77 | .flexo-container.col-reverse [class*="grid-"]:last-of-type { margin-top: 0; }*/ 78 | 79 | /*----------------------------------------*/ 80 | /* 1.2 - Position */ 81 | /*----------------------------------------*/ 82 | 83 | .flexo-start { 84 | -webkit-justify-content: flex-start; 85 | -ms-flex-pack: start; 86 | -webkit-box-pack: start; 87 | justify-content: flex-start; 88 | } 89 | 90 | .flexo-center { 91 | -webkit-justify-content: center; 92 | -ms-flex-pack: center; 93 | -webkit-box-pack: center; 94 | justify-content: center; 95 | } 96 | 97 | .flexo-end { 98 | -webkit-justify-content: flex-end; 99 | -ms-flex-pack: end; 100 | -webkit-box-pack: end; 101 | justify-content: flex-end; 102 | } 103 | 104 | .flexo-around { 105 | -webkit-justify-content: space-around; 106 | -ms-flex-pack: distribute; 107 | justify-content: space-around; 108 | } 109 | 110 | .flexo-between { 111 | -webkit-justify-content: space-between; 112 | -ms-flex-pack: justify; 113 | -webkit-box-pack: justify; 114 | justify-content: space-between; 115 | } 116 | 117 | .flexo-top { 118 | -webkit-align-items: flex-start; 119 | -ms-flex-align: start; 120 | -webkit-box-align: start; 121 | align-items: flex-start; 122 | } 123 | 124 | .flexo-middle { 125 | -webkit-align-items: center; 126 | -ms-flex-align: center; 127 | -webkit-box-align: center; 128 | align-items: center; 129 | } 130 | 131 | .flexo-bottom { 132 | -webkit-align-items: flex-end; 133 | -ms-flex-align: end; 134 | -webkit-box-align: end; 135 | align-items: flex-end; 136 | } 137 | 138 | .flexo-first { 139 | -webkit-order: -1; 140 | -ms-flex-order: -1; 141 | -webkit-box-ordinal-group: 0; 142 | order: -1; 143 | } 144 | 145 | .flexo-last { 146 | -webkit-order: 1; 147 | -ms-flex-order: 1; 148 | -webkit-box-ordinal-group: 2; 149 | order: 1; 150 | } 151 | 152 | /*----------------------------------------*/ 153 | /* 1.3 - < 960px */ 154 | /*----------------------------------------*/ 155 | 156 | [class*="grid-"] { 157 | box-sizing: border-box; 158 | padding: 1rem; 159 | } 160 | 161 | .grid-1 { width: calc( 100% / 12 * 1); } 162 | .grid-2 { width: calc( 100% / 12 * 2); } 163 | .grid-3 { width: calc( 100% / 12 * 3); } 164 | .grid-4 { width: calc( 100% / 12 * 4); } 165 | .grid-5 { width: calc( 100% / 12 * 5); } 166 | .grid-6 { width: calc( 100% / 12 * 6); } 167 | .grid-7 { width: calc( 100% / 12 * 7); } 168 | .grid-8 { width: calc( 100% / 12 * 8); } 169 | .grid-9 { width: calc( 100% / 12 * 9); } 170 | .grid-10 { width: calc( 100% / 12 * 10); } 171 | .grid-11 { width: calc( 100% / 12 * 11); } 172 | .grid-12 { width: calc( 100% / 12 * 12); } 173 | 174 | .grid-1-offset { margin-left: calc( 100% / 12 * 1); } 175 | .grid-2-offset { margin-left: calc( 100% / 12 * 2); } 176 | .grid-3-offset { margin-left: calc( 100% / 12 * 3); } 177 | .grid-4-offset { margin-left: calc( 100% / 12 * 4); } 178 | .grid-5-offset { margin-left: calc( 100% / 12 * 5); } 179 | .grid-6-offset { margin-left: calc( 100% / 12 * 6); } 180 | .grid-7-offset { margin-left: calc( 100% / 12 * 7); } 181 | .grid-8-offset { margin-left: calc( 100% / 12 * 8); } 182 | .grid-9-offset { margin-left: calc( 100% / 12 * 9); } 183 | .grid-10-offset { margin-left: calc( 100% / 12 * 10); } 184 | .grid-11-offset { margin-left: calc( 100% / 12 * 11); } 185 | .grid-12-offset { margin-left: calc( 100% / 12 * 12); } 186 | 187 | .grid-auto { 188 | -webkit-flex: 1 1 auto ; 189 | -ms-flex: 1 1 auto ; 190 | -webkit-box-flex: 1 ; 191 | flex: 1 1 auto ; 192 | max-width: 100%; 193 | } 194 | 195 | /*----------------------------------------*/ 196 | /* 1.4 - 640px < 960px */ 197 | /*----------------------------------------*/ 198 | 199 | @media screen and (min-width: 641px) and (max-width: 960px) { 200 | 201 | [class*="grid-"] { 202 | box-sizing: border-box; 203 | padding: 1rem; 204 | } 205 | 206 | .grid-1-l { width: calc( 100% / 12 * 1); } 207 | .grid-2-l { width: calc( 100% / 12 * 2); } 208 | .grid-3-l { width: calc( 100% / 12 * 3); } 209 | .grid-4-l { width: calc( 100% / 12 * 4); } 210 | .grid-5-l { width: calc( 100% / 12 * 5); } 211 | .grid-6-l { width: calc( 100% / 12 * 6); } 212 | .grid-7-l { width: calc( 100% / 12 * 7); } 213 | .grid-8-l { width: calc( 100% / 12 * 8); } 214 | .grid-9-l { width: calc( 100% / 12 * 9); } 215 | .grid-10-l { width: calc( 100% / 12 * 10); } 216 | .grid-11-l { width: calc( 100% / 12 * 11); } 217 | .grid-12-l { width: calc( 100% / 12 * 12); } 218 | 219 | .grid-1-offset-l { margin-left: calc( 100% / 12 * 1); } 220 | .grid-2-offset-l { margin-left: calc( 100% / 12 * 2); } 221 | .grid-3-offset-l { margin-left: calc( 100% / 12 * 3); } 222 | .grid-4-offset-l { margin-left: calc( 100% / 12 * 4); } 223 | .grid-5-offset-l { margin-left: calc( 100% / 12 * 5); } 224 | .grid-6-offset-l { margin-left: calc( 100% / 12 * 6); } 225 | .grid-7-offset-l { margin-left: calc( 100% / 12 * 7); } 226 | .grid-8-offset-l { margin-left: calc( 100% / 12 * 8); } 227 | .grid-9-offset-l { margin-left: calc( 100% / 12 * 9); } 228 | .grid-10-offset-l { margin-left: calc( 100% / 12 * 10); } 229 | .grid-11-offset-l { margin-left: calc( 100% / 12 * 11); } 230 | .grid-12-offset-l { margin-left: calc( 100% / 12 * 12); } 231 | 232 | .grid-auto-l { 233 | -webkit-flex: 1 1 auto ; 234 | -ms-flex: 1 1 auto ; 235 | -webkit-box-flex: 1 ; 236 | flex: 1 1 auto ; 237 | max-width: 100%; 238 | } 239 | 240 | [class*="-l"]:not([class*="grid-auto"]) { 241 | -webkit-flex: 0 0 auto; 242 | -ms-flex: 0 0 auto; 243 | -webkit-box-flex: 0; 244 | flex: 0 0 auto; 245 | } 246 | 247 | } 248 | 249 | /*----------------------------------------*/ 250 | /* 1.5 - 320px < 640px */ 251 | /*----------------------------------------*/ 252 | 253 | @media screen and (min-width: 321px) and (max-width: 640px) { 254 | 255 | .grid-1-m { width: calc( 100% / 12 * 1); } 256 | .grid-2-m { width: calc( 100% / 12 * 2); } 257 | .grid-3-m { width: calc( 100% / 12 * 3); } 258 | .grid-4-m { width: calc( 100% / 12 * 4); } 259 | .grid-5-m { width: calc( 100% / 12 * 5); } 260 | .grid-6-m { width: calc( 100% / 12 * 6); } 261 | .grid-7-m { width: calc( 100% / 12 * 7); } 262 | .grid-8-m { width: calc( 100% / 12 * 8); } 263 | .grid-9-m { width: calc( 100% / 12 * 9); } 264 | .grid-10-m { width: calc( 100% / 12 * 10); } 265 | .grid-11-m { width: calc( 100% / 12 * 11); } 266 | .grid-12-m { width: calc( 100% / 12 * 12); } 267 | 268 | .grid-1-offset-m { margin-left: calc( 100% / 12 * 1); } 269 | .grid-2-offset-m { margin-left: calc( 100% / 12 * 2); } 270 | .grid-3-offset-m { margin-left: calc( 100% / 12 * 3); } 271 | .grid-4-offset-m { margin-left: calc( 100% / 12 * 4); } 272 | .grid-5-offset-m { margin-left: calc( 100% / 12 * 5); } 273 | .grid-6-offset-m { margin-left: calc( 100% / 12 * 6); } 274 | .grid-7-offset-m { margin-left: calc( 100% / 12 * 7); } 275 | .grid-8-offset-m { margin-left: calc( 100% / 12 * 8); } 276 | .grid-9-offset-m { margin-left: calc( 100% / 12 * 9); } 277 | .grid-10-offset-m { margin-left: calc( 100% / 12 * 10); } 278 | .grid-11-offset-m { margin-left: calc( 100% / 12 * 11); } 279 | .grid-12-offset-m { margin-left: calc( 100% / 12 * 12); } 280 | 281 | .grid-auto-m { 282 | -webkit-flex: 1 1 auto ; 283 | -ms-flex: 1 1 auto ; 284 | -webkit-box-flex: 1 ; 285 | flex: 1 1 auto ; 286 | max-width: 100%; 287 | } 288 | 289 | [class*="-m"]:not([class*="grid-auto"]) { 290 | -webkit-flex: 0 0 auto; 291 | -ms-flex: 0 0 auto; 292 | -webkit-box-flex: 0; 293 | flex: 0 0 auto; 294 | } 295 | 296 | } 297 | 298 | /*----------------------------------------*/ 299 | /* 1.6 - > 320px */ 300 | /*----------------------------------------*/ 301 | 302 | @media screen and (max-width: 320px) { 303 | 304 | .grid-1-s { width: calc( 100% / 12 * 1); } 305 | .grid-2-s { width: calc( 100% / 12 * 2); } 306 | .grid-3-s { width: calc( 100% / 12 * 3); } 307 | .grid-4-s { width: calc( 100% / 12 * 4); } 308 | .grid-5-s { width: calc( 100% / 12 * 5); } 309 | .grid-6-s { width: calc( 100% / 12 * 6); } 310 | .grid-7-s { width: calc( 100% / 12 * 7); } 311 | .grid-8-s { width: calc( 100% / 12 * 8); } 312 | .grid-9-s { width: calc( 100% / 12 * 9); } 313 | .grid-10-s { width: calc( 100% / 12 * 10); } 314 | .grid-11-s { width: calc( 100% / 12 * 11); } 315 | .grid-12-s { width: calc( 100% / 12 * 12); } 316 | 317 | .grid-1-offset-s { margin-left: calc( 100% / 12 * 1); } 318 | .grid-2-offset-s { margin-left: calc( 100% / 12 * 2); } 319 | .grid-3-offset-s { margin-left: calc( 100% / 12 * 3); } 320 | .grid-4-offset-s { margin-left: calc( 100% / 12 * 4); } 321 | .grid-5-offset-s { margin-left: calc( 100% / 12 * 5); } 322 | .grid-6-offset-s { margin-left: calc( 100% / 12 * 6); } 323 | .grid-7-offset-s { margin-left: calc( 100% / 12 * 7); } 324 | .grid-8-offset-s { margin-left: calc( 100% / 12 * 8); } 325 | .grid-9-offset-s { margin-left: calc( 100% / 12 * 9); } 326 | .grid-10-offset-s { margin-left: calc( 100% / 12 * 10); } 327 | .grid-11-offset-s { margin-left: calc( 100% / 12 * 11); } 328 | .grid-12-offset-s { margin-left: calc( 100% / 12 * 12); } 329 | 330 | .grid-auto-s { 331 | -webkit-flex: 1 1 auto ; 332 | -ms-flex: 1 1 auto ; 333 | -webkit-box-flex: 1 ; 334 | flex: 1 1 auto ; 335 | max-width: 100%; 336 | } 337 | 338 | [class*="-s"]:not([class*="grid-auto"]) { 339 | -webkit-flex: 0 0 auto; 340 | -ms-flex: 0 0 auto; 341 | -webkit-box-flex: 0; 342 | flex: 0 0 auto; 343 | } 344 | 345 | } -------------------------------------------------------------------------------- /flexo.min.css: -------------------------------------------------------------------------------- 1 | /* Flexo v 0.1.0 - By Kevin Py : https://kevinpy.com/Projects/Flexo */ 2 | .flexo-container{display:-webkit-flex;display:-ms-flexbox;display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;-webkit-box-flex:0;flex:0 1 auto;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;margin-bottom:2rem}.flexo-container:last-of-type{margin-bottom:0}.flexo-container.row-reverse{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}.flexo-container.col{-webkit-flex-direction:column;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.flexo-container.col-reverse{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;-webkit-box-orient:vertical;-webkit-box-direction:reverse;flex-direction:column-reverse}.flexo-start{-webkit-justify-content:flex-start;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.flexo-center{-webkit-justify-content:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.flexo-end{-webkit-justify-content:flex-end;-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.flexo-around{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.flexo-between{-webkit-justify-content:space-between;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.flexo-top{-webkit-align-items:flex-start;-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.flexo-middle{-webkit-align-items:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center}.flexo-bottom{-webkit-align-items:flex-end;-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.flexo-first{-webkit-order:-1;-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.flexo-last{-webkit-order:1;-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}[class*=grid-]{box-sizing:border-box;padding:1rem}.grid-1{width:calc(100% / 12 * 1)}.grid-2{width:calc(100% / 12 * 2)}.grid-3{width:calc(100% / 12 * 3)}.grid-4{width:calc(100% / 12 * 4)}.grid-5{width:calc(100% / 12 * 5)}.grid-6{width:calc(100% / 12 * 6)}.grid-7{width:calc(100% / 12 * 7)}.grid-8{width:calc(100% / 12 * 8)}.grid-9{width:calc(100% / 12 * 9)}.grid-10{width:calc(100% / 12 * 10)}.grid-11{width:calc(100% / 12 * 11)}.grid-12{width:calc(100% / 12 * 12)}.grid-1-offset{margin-left:calc(100% / 12 * 1)}.grid-2-offset{margin-left:calc(100% / 12 * 2)}.grid-3-offset{margin-left:calc(100% / 12 * 3)}.grid-4-offset{margin-left:calc(100% / 12 * 4)}.grid-5-offset{margin-left:calc(100% / 12 * 5)}.grid-6-offset{margin-left:calc(100% / 12 * 6)}.grid-7-offset{margin-left:calc(100% / 12 * 7)}.grid-8-offset{margin-left:calc(100% / 12 * 8)}.grid-9-offset{margin-left:calc(100% / 12 * 9)}.grid-10-offset{margin-left:calc(100% / 12 * 10)}.grid-11-offset{margin-left:calc(100% / 12 * 11)}.grid-12-offset{margin-left:calc(100% / 12 * 12)}.grid-auto{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;-webkit-box-flex:1;flex:1 1 auto;max-width:100%}@media screen and (min-width:641px) and (max-width:960px){[class*=grid-]{box-sizing:border-box;padding:1rem}.grid-1-l{width:calc(100% / 12 * 1)}.grid-2-l{width:calc(100% / 12 * 2)}.grid-3-l{width:calc(100% / 12 * 3)}.grid-4-l{width:calc(100% / 12 * 4)}.grid-5-l{width:calc(100% / 12 * 5)}.grid-6-l{width:calc(100% / 12 * 6)}.grid-7-l{width:calc(100% / 12 * 7)}.grid-8-l{width:calc(100% / 12 * 8)}.grid-9-l{width:calc(100% / 12 * 9)}.grid-10-l{width:calc(100% / 12 * 10)}.grid-11-l{width:calc(100% / 12 * 11)}.grid-12-l{width:calc(100% / 12 * 12)}.grid-1-offset-l{margin-left:calc(100% / 12 * 1)}.grid-2-offset-l{margin-left:calc(100% / 12 * 2)}.grid-3-offset-l{margin-left:calc(100% / 12 * 3)}.grid-4-offset-l{margin-left:calc(100% / 12 * 4)}.grid-5-offset-l{margin-left:calc(100% / 12 * 5)}.grid-6-offset-l{margin-left:calc(100% / 12 * 6)}.grid-7-offset-l{margin-left:calc(100% / 12 * 7)}.grid-8-offset-l{margin-left:calc(100% / 12 * 8)}.grid-9-offset-l{margin-left:calc(100% / 12 * 9)}.grid-10-offset-l{margin-left:calc(100% / 12 * 10)}.grid-11-offset-l{margin-left:calc(100% / 12 * 11)}.grid-12-offset-l{margin-left:calc(100% / 12 * 12)}.grid-auto-l{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;-webkit-box-flex:1;flex:1 1 auto;max-width:100%}[class*="-l"]:not([class*=grid-auto]){-webkit-flex:0 0 auto;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto}}@media screen and (min-width:321px) and (max-width:640px){.grid-1-m{width:calc(100% / 12 * 1)}.grid-2-m{width:calc(100% / 12 * 2)}.grid-3-m{width:calc(100% / 12 * 3)}.grid-4-m{width:calc(100% / 12 * 4)}.grid-5-m{width:calc(100% / 12 * 5)}.grid-6-m{width:calc(100% / 12 * 6)}.grid-7-m{width:calc(100% / 12 * 7)}.grid-8-m{width:calc(100% / 12 * 8)}.grid-9-m{width:calc(100% / 12 * 9)}.grid-10-m{width:calc(100% / 12 * 10)}.grid-11-m{width:calc(100% / 12 * 11)}.grid-12-m{width:calc(100% / 12 * 12)}.grid-1-offset-m{margin-left:calc(100% / 12 * 1)}.grid-2-offset-m{margin-left:calc(100% / 12 * 2)}.grid-3-offset-m{margin-left:calc(100% / 12 * 3)}.grid-4-offset-m{margin-left:calc(100% / 12 * 4)}.grid-5-offset-m{margin-left:calc(100% / 12 * 5)}.grid-6-offset-m{margin-left:calc(100% / 12 * 6)}.grid-7-offset-m{margin-left:calc(100% / 12 * 7)}.grid-8-offset-m{margin-left:calc(100% / 12 * 8)}.grid-9-offset-m{margin-left:calc(100% / 12 * 9)}.grid-10-offset-m{margin-left:calc(100% / 12 * 10)}.grid-11-offset-m{margin-left:calc(100% / 12 * 11)}.grid-12-offset-m{margin-left:calc(100% / 12 * 12)}.grid-auto-m{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;-webkit-box-flex:1;flex:1 1 auto;max-width:100%}[class*="-m"]:not([class*=grid-auto]){-webkit-flex:0 0 auto;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto}}@media screen and (max-width:320px){.grid-1-s{width:calc(100% / 12 * 1)}.grid-2-s{width:calc(100% / 12 * 2)}.grid-3-s{width:calc(100% / 12 * 3)}.grid-4-s{width:calc(100% / 12 * 4)}.grid-5-s{width:calc(100% / 12 * 5)}.grid-6-s{width:calc(100% / 12 * 6)}.grid-7-s{width:calc(100% / 12 * 7)}.grid-8-s{width:calc(100% / 12 * 8)}.grid-9-s{width:calc(100% / 12 * 9)}.grid-10-s{width:calc(100% / 12 * 10)}.grid-11-s{width:calc(100% / 12 * 11)}.grid-12-s{width:calc(100% / 12 * 12)}.grid-1-offset-s{margin-left:calc(100% / 12 * 1)}.grid-2-offset-s{margin-left:calc(100% / 12 * 2)}.grid-3-offset-s{margin-left:calc(100% / 12 * 3)}.grid-4-offset-s{margin-left:calc(100% / 12 * 4)}.grid-5-offset-s{margin-left:calc(100% / 12 * 5)}.grid-6-offset-s{margin-left:calc(100% / 12 * 6)}.grid-7-offset-s{margin-left:calc(100% / 12 * 7)}.grid-8-offset-s{margin-left:calc(100% / 12 * 8)}.grid-9-offset-s{margin-left:calc(100% / 12 * 9)}.grid-10-offset-s{margin-left:calc(100% / 12 * 10)}.grid-11-offset-s{margin-left:calc(100% / 12 * 11)}.grid-12-offset-s{margin-left:calc(100% / 12 * 12)}.grid-auto-s{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;-webkit-box-flex:1;flex:1 1 auto;max-width:100%}[class*="-s"]:not([class*=grid-auto]){-webkit-flex:0 0 auto;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto}} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flexo-css", 3 | "version": "0.1.1", 4 | "description": "A grid system based on flex property, and works 100% CSS.", 5 | "main": "flexo.css", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/KevinPy/Flexo.git" 9 | }, 10 | "keywords": [ 11 | "grid", 12 | "flexbox", 13 | "flex" 14 | ], 15 | "author": "Kevin Py", 16 | "license": "CC-BY-SA-3.0", 17 | "bugs": { 18 | "url": "https://github.com/KevinPy/Flexo/issues" 19 | }, 20 | "homepage": "https://github.com/KevinPy/Flexo#readme" 21 | } 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![Flexo logo](http://kevinpy.com/Projects/Flexo/out/flexo-logo.png) 2 | # Flexo 3 | ### CSS Grid with Flex property 4 | A grid system based on `flex` property, and works 100% CSS. 5 | *** 6 | **Author**: *Kevin Py*
7 | **Website**:
8 | **Flexo Website**:
9 | **Version**: 0.1.0 10 | *** 11 | #### Installation 12 | You are just one file (`flexo.css` or `flexo.min.css`) to drag and drop into your CSS folder.
13 | 14 | ##### bower 15 | `bower install flexo-css` 16 | 17 | ##### npm 18 | `npm i flexo-css --save` 19 | 20 | #### Usage 21 | Flexo use a lot of CSS Classes. If you want to learn how Flexo works, check the documention on the Flexo's website: http://kevinpy.com/Projects/Flexo/ --------------------------------------------------------------------------------