├── .gitignore ├── .travis.yml ├── README.md ├── bower.json ├── dist ├── pintsize.css └── pintsize.min.css ├── examples ├── auto-flex-grid.html ├── basic-grid.html ├── column-first.html ├── column-last.html ├── column-offset.html ├── columns-reverse.html ├── flex-align-end.html ├── flex-align-start.html ├── flex-around.html ├── flex-between.html ├── flex-center.html ├── flex-justify-bottom.html ├── flex-justify-middle.html ├── flex-justify-top.html ├── media-queries.html └── nested-grid.html ├── gulpfile.js ├── package.json └── src └── pintsize.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules* 2 | npm-debug* 3 | .DS_STORE 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.12' 4 | before_script: 5 | - npm install 6 | script: gulp build 7 | branches: 8 | except: 9 | - gh-pages 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pintsize 2 | 3 | [![Build Status](https://travis-ci.org/alistairtweedie/pintsize.svg?branch=master)](https://travis-ci.org/alistairtweedie/pintsize) 4 | [![devDependency Status](https://david-dm.org/alistairtweedie/pintsize/dev-status.svg)](https://david-dm.org/alistairtweedie/pintsize#info=devDependencies) 5 | 6 | 7 | A simple and modern flexible grid system 8 | 9 | ## Get started 10 | It's easy to get started. Just follow the steps below. 11 | 12 | 13 | ### 1.Download 14 | 15 | * [Download Pintsize](https://github.com/alistairtweedie/pintsize/archive/master.zip). 16 | 17 | 18 | 19 | ### 2. Install 20 | 21 | Run Node Package Manager 22 | 23 | $ npm install 24 | 25 | 26 | ### 3. Configure 27 | 28 | Copy the pixel grid values used in your design into _pintsize.scss file. 29 | 30 | $columns: 12; 31 | $column-width: 65px; 32 | $gutter-width: 20px; 33 | 34 | 35 | ### 4. Build 36 | 37 | Run Gulp to build the grid 38 | 39 | $ gulp build 40 | 41 | ## License 42 | 43 | The MIT License (MIT) 44 | 45 | Copyright (c) 2016 @alistairtweedie 46 | 47 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 48 | 49 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 50 | 51 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 52 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Pintsize", 3 | "version": "2.0.0", 4 | "authors": [ 5 | "Alistair Tweedie @alistairtweedie" 6 | ], 7 | "description": "A simple and modern flexible grid system", 8 | "main": "dist/pintsize.css", 9 | "keywords": [ 10 | "gulp", 11 | "grid", 12 | "system", 13 | "flexbox" 14 | ], 15 | "license": "MIT", 16 | "homepage": "https://github.com/alistairtweedie/pintsize", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /dist/pintsize.css: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------* 2 | Pintsize 3 | Url: http://www.pintsize.io 4 | Github: https://github.com/alistairtweedie/Pintsize/ 5 | 6 | /*-------------------------------------------------------*/ 7 | /*-------------------------------------------------------* #grid config 8 | \*-------------------------------------------------------*/ 9 | /*-------------------------------------------------------* #grid calculations 10 | \*-------------------------------------------------------*/ 11 | /*-------------------------------------------------------* #clearfix mixin 12 | \*-------------------------------------------------------*/ 13 | /*-------------------------------------------------------* #box sizing mixin 14 | \*-------------------------------------------------------*/ 15 | /*-------------------------------------------------------* #media query mixin 16 | \*-------------------------------------------------------*/ 17 | /*-------------------------------------------------------* #older IE mixin 18 | - support for IE9 and IE8. 19 | - $old-ie in grid config must be true 20 | \*-------------------------------------------------------*/ 21 | /*-------------------------------------------------------* #gutter mixin 22 | - If $fixed-gutter-size is set to true this will output 23 | the $gutter-width as a fixed value and not percentage 24 | \*-------------------------------------------------------*/ 25 | /*-------------------------------------------------------* #The grid 26 | \*-------------------------------------------------------*/ 27 | .container { 28 | max-width: 1020px; 29 | margin: 0 auto; 30 | box-sizing: border-box; } 31 | 32 | .flex { 33 | display: -webkit-box; 34 | display: -webkit-flex; 35 | display: -ms-flexbox; 36 | display: flex; 37 | -webkit-flex-flow: row wrap; 38 | -ms-flex-flow: row wrap; 39 | flex-flow: row wrap; } 40 | 41 | /*-------------------------------------------------------* #flexbox helper classes 42 | - docs for browser support to be provided 43 | \*-------------------------------------------------------*/ 44 | .flex--auto .col { 45 | -webkit-box-flex: 1; 46 | -webkit-flex-grow: 1; 47 | -ms-flex-positive: 1; 48 | flex-grow: 1; } 49 | 50 | .flex--start { 51 | -webkit-box-pack: start; 52 | -webkit-justify-content: flex-start; 53 | -ms-flex-pack: start; 54 | justify-content: flex-start; } 55 | .flex--start .col { 56 | -webkit-box-flex: 0; 57 | -webkit-flex-grow: 0; 58 | -ms-flex-positive: 0; 59 | flex-grow: 0; } 60 | 61 | .flex--center { 62 | -webkit-box-pack: center; 63 | -webkit-justify-content: center; 64 | -ms-flex-pack: center; 65 | justify-content: center; } 66 | .flex--center .col { 67 | -webkit-box-flex: 0; 68 | -webkit-flex-grow: 0; 69 | -ms-flex-positive: 0; 70 | flex-grow: 0; } 71 | 72 | .flex--end { 73 | -webkit-box-pack: end; 74 | -webkit-justify-content: flex-end; 75 | -ms-flex-pack: end; 76 | justify-content: flex-end; } 77 | .flex--end .col { 78 | -webkit-box-flex: 0; 79 | -webkit-flex-grow: 0; 80 | -ms-flex-positive: 0; 81 | flex-grow: 0; } 82 | 83 | .flex--top { 84 | -webkit-box-align: start; 85 | -webkit-align-items: flex-start; 86 | -ms-flex-align: start; 87 | align-items: flex-start; } 88 | 89 | .flex--middle { 90 | -webkit-box-align: center; 91 | -webkit-align-items: center; 92 | -ms-flex-align: center; 93 | align-items: center; } 94 | 95 | .flex--baseline { 96 | -webkit-box-align: baseline; 97 | -webkit-align-items: baseline; 98 | -ms-flex-align: baseline; 99 | align-items: baseline; } 100 | 101 | .flex--wrap { 102 | -webkit-flex-wrap: wrap; 103 | -ms-flex-wrap: wrap; 104 | flex-wrap: wrap; } 105 | 106 | .flex--row { 107 | -webkit-box-orient: horizontal; 108 | -webkit-box-direction: normal; 109 | -webkit-flex-direction: row; 110 | -ms-flex-direction: row; 111 | flex-direction: row; } 112 | 113 | .flex--bottom { 114 | -webkit-box-align: end; 115 | -webkit-align-items: flex-end; 116 | -ms-flex-align: end; 117 | align-items: flex-end; } 118 | .flex--bottom .col { 119 | -webkit-box-flex: 1; 120 | -webkit-flex-grow: 1; 121 | -ms-flex-positive: 1; 122 | flex-grow: 1; } 123 | 124 | .flex--around { 125 | -webkit-justify-content: space-around; 126 | -ms-flex-pack: distribute; 127 | justify-content: space-around; } 128 | .flex--around .col { 129 | -webkit-box-flex: 0; 130 | -webkit-flex-grow: 0; 131 | -ms-flex-positive: 0; 132 | flex-grow: 0; 133 | -webkit-flex-shrink: 1; 134 | -ms-flex-negative: 1; 135 | flex-shrink: 1; } 136 | 137 | .flex--between { 138 | -webkit-box-pack: justify; 139 | -webkit-justify-content: space-between; 140 | -ms-flex-pack: justify; 141 | justify-content: space-between; } 142 | .flex--between .col { 143 | -webkit-box-flex: 0; 144 | -webkit-flex-grow: 0; 145 | -ms-flex-positive: 0; 146 | flex-grow: 0; 147 | -webkit-flex-shrink: 1; 148 | -ms-flex-negative: 1; 149 | flex-shrink: 1; } 150 | 151 | .flex--reverse { 152 | -webkit-box-orient: horizontal; 153 | -webkit-box-direction: reverse; 154 | -webkit-flex-direction: row-reverse; 155 | -ms-flex-direction: row-reverse; 156 | flex-direction: row-reverse; } 157 | 158 | .col { 159 | -webkit-box-flex: 0; 160 | -webkit-flex-grow: 0; 161 | -ms-flex-positive: 0; 162 | flex-grow: 0; 163 | -webkit-flex-shrink: 0; 164 | -ms-flex-negative: 0; 165 | flex-shrink: 0; 166 | -webkit-flex-basis: auto; 167 | -ms-flex-preferred-size: auto; 168 | flex-basis: auto; 169 | max-width: 100%; 170 | box-sizing: border-box; 171 | padding-left: 10px; 172 | padding-right: 10px; } 173 | 174 | .col--first { 175 | -webkit-box-ordinal-group: 0; 176 | -webkit-order: -1; 177 | -ms-flex-order: -1; 178 | order: -1; } 179 | 180 | .col--last { 181 | -webkit-box-ordinal-group: 2; 182 | -webkit-order: 1; 183 | -ms-flex-order: 1; 184 | order: 1; } 185 | 186 | .col--1 { 187 | -webkit-flex-basis: 8.33333%; 188 | -ms-flex-preferred-size: 8.33333%; 189 | flex-basis: 8.33333%; 190 | max-width: 8.33333%; } 191 | 192 | .col--2 { 193 | -webkit-flex-basis: 16.66667%; 194 | -ms-flex-preferred-size: 16.66667%; 195 | flex-basis: 16.66667%; 196 | max-width: 16.66667%; } 197 | 198 | .col--3 { 199 | -webkit-flex-basis: 25%; 200 | -ms-flex-preferred-size: 25%; 201 | flex-basis: 25%; 202 | max-width: 25%; } 203 | 204 | .col--4 { 205 | -webkit-flex-basis: 33.33333%; 206 | -ms-flex-preferred-size: 33.33333%; 207 | flex-basis: 33.33333%; 208 | max-width: 33.33333%; } 209 | 210 | .col--5 { 211 | -webkit-flex-basis: 41.66667%; 212 | -ms-flex-preferred-size: 41.66667%; 213 | flex-basis: 41.66667%; 214 | max-width: 41.66667%; } 215 | 216 | .col--6 { 217 | -webkit-flex-basis: 50%; 218 | -ms-flex-preferred-size: 50%; 219 | flex-basis: 50%; 220 | max-width: 50%; } 221 | 222 | .col--7 { 223 | -webkit-flex-basis: 58.33333%; 224 | -ms-flex-preferred-size: 58.33333%; 225 | flex-basis: 58.33333%; 226 | max-width: 58.33333%; } 227 | 228 | .col--8 { 229 | -webkit-flex-basis: 66.66667%; 230 | -ms-flex-preferred-size: 66.66667%; 231 | flex-basis: 66.66667%; 232 | max-width: 66.66667%; } 233 | 234 | .col--9 { 235 | -webkit-flex-basis: 75%; 236 | -ms-flex-preferred-size: 75%; 237 | flex-basis: 75%; 238 | max-width: 75%; } 239 | 240 | .col--10 { 241 | -webkit-flex-basis: 83.33333%; 242 | -ms-flex-preferred-size: 83.33333%; 243 | flex-basis: 83.33333%; 244 | max-width: 83.33333%; } 245 | 246 | .col--11 { 247 | -webkit-flex-basis: 91.66667%; 248 | -ms-flex-preferred-size: 91.66667%; 249 | flex-basis: 91.66667%; 250 | max-width: 91.66667%; } 251 | 252 | .col--12 { 253 | -webkit-flex-basis: 100%; 254 | -ms-flex-preferred-size: 100%; 255 | flex-basis: 100%; 256 | max-width: 100%; } 257 | 258 | .col__offset--1 { 259 | margin-left: 8.33333%; } 260 | 261 | .col__offset--2 { 262 | margin-left: 16.66667%; } 263 | 264 | .col__offset--3 { 265 | margin-left: 25%; } 266 | 267 | .col__offset--4 { 268 | margin-left: 33.33333%; } 269 | 270 | .col__offset--5 { 271 | margin-left: 41.66667%; } 272 | 273 | .col__offset--6 { 274 | margin-left: 50%; } 275 | 276 | .col__offset--7 { 277 | margin-left: 58.33333%; } 278 | 279 | .col__offset--8 { 280 | margin-left: 66.66667%; } 281 | 282 | .col__offset--9 { 283 | margin-left: 75%; } 284 | 285 | .col__offset--10 { 286 | margin-left: 83.33333%; } 287 | 288 | .col__offset--11 { 289 | margin-left: 91.66667%; } 290 | 291 | .col__offset--12 { 292 | margin-left: 100%; } 293 | 294 | @media (min-width: 40em) { 295 | .col__md--1 { 296 | -webkit-flex-basis: 8.33333%; 297 | -ms-flex-preferred-size: 8.33333%; 298 | flex-basis: 8.33333%; 299 | max-width: 8.33333%; } 300 | .col__md--2 { 301 | -webkit-flex-basis: 16.66667%; 302 | -ms-flex-preferred-size: 16.66667%; 303 | flex-basis: 16.66667%; 304 | max-width: 16.66667%; } 305 | .col__md--3 { 306 | -webkit-flex-basis: 25%; 307 | -ms-flex-preferred-size: 25%; 308 | flex-basis: 25%; 309 | max-width: 25%; } 310 | .col__md--4 { 311 | -webkit-flex-basis: 33.33333%; 312 | -ms-flex-preferred-size: 33.33333%; 313 | flex-basis: 33.33333%; 314 | max-width: 33.33333%; } 315 | .col__md--5 { 316 | -webkit-flex-basis: 41.66667%; 317 | -ms-flex-preferred-size: 41.66667%; 318 | flex-basis: 41.66667%; 319 | max-width: 41.66667%; } 320 | .col__md--6 { 321 | -webkit-flex-basis: 50%; 322 | -ms-flex-preferred-size: 50%; 323 | flex-basis: 50%; 324 | max-width: 50%; } 325 | .col__md--7 { 326 | -webkit-flex-basis: 58.33333%; 327 | -ms-flex-preferred-size: 58.33333%; 328 | flex-basis: 58.33333%; 329 | max-width: 58.33333%; } 330 | .col__md--8 { 331 | -webkit-flex-basis: 66.66667%; 332 | -ms-flex-preferred-size: 66.66667%; 333 | flex-basis: 66.66667%; 334 | max-width: 66.66667%; } 335 | .col__md--9 { 336 | -webkit-flex-basis: 75%; 337 | -ms-flex-preferred-size: 75%; 338 | flex-basis: 75%; 339 | max-width: 75%; } 340 | .col__md--10 { 341 | -webkit-flex-basis: 83.33333%; 342 | -ms-flex-preferred-size: 83.33333%; 343 | flex-basis: 83.33333%; 344 | max-width: 83.33333%; } 345 | .col__md--11 { 346 | -webkit-flex-basis: 91.66667%; 347 | -ms-flex-preferred-size: 91.66667%; 348 | flex-basis: 91.66667%; 349 | max-width: 91.66667%; } 350 | .col__md--12 { 351 | -webkit-flex-basis: 100%; 352 | -ms-flex-preferred-size: 100%; 353 | flex-basis: 100%; 354 | max-width: 100%; } } 355 | 356 | @media (min-width: 64em) { 357 | .col__lg--1 { 358 | -webkit-flex-basis: 8.33333%; 359 | -ms-flex-preferred-size: 8.33333%; 360 | flex-basis: 8.33333%; 361 | max-width: 8.33333%; } 362 | .col__lg--2 { 363 | -webkit-flex-basis: 16.66667%; 364 | -ms-flex-preferred-size: 16.66667%; 365 | flex-basis: 16.66667%; 366 | max-width: 16.66667%; } 367 | .col__lg--3 { 368 | -webkit-flex-basis: 25%; 369 | -ms-flex-preferred-size: 25%; 370 | flex-basis: 25%; 371 | max-width: 25%; } 372 | .col__lg--4 { 373 | -webkit-flex-basis: 33.33333%; 374 | -ms-flex-preferred-size: 33.33333%; 375 | flex-basis: 33.33333%; 376 | max-width: 33.33333%; } 377 | .col__lg--5 { 378 | -webkit-flex-basis: 41.66667%; 379 | -ms-flex-preferred-size: 41.66667%; 380 | flex-basis: 41.66667%; 381 | max-width: 41.66667%; } 382 | .col__lg--6 { 383 | -webkit-flex-basis: 50%; 384 | -ms-flex-preferred-size: 50%; 385 | flex-basis: 50%; 386 | max-width: 50%; } 387 | .col__lg--7 { 388 | -webkit-flex-basis: 58.33333%; 389 | -ms-flex-preferred-size: 58.33333%; 390 | flex-basis: 58.33333%; 391 | max-width: 58.33333%; } 392 | .col__lg--8 { 393 | -webkit-flex-basis: 66.66667%; 394 | -ms-flex-preferred-size: 66.66667%; 395 | flex-basis: 66.66667%; 396 | max-width: 66.66667%; } 397 | .col__lg--9 { 398 | -webkit-flex-basis: 75%; 399 | -ms-flex-preferred-size: 75%; 400 | flex-basis: 75%; 401 | max-width: 75%; } 402 | .col__lg--10 { 403 | -webkit-flex-basis: 83.33333%; 404 | -ms-flex-preferred-size: 83.33333%; 405 | flex-basis: 83.33333%; 406 | max-width: 83.33333%; } 407 | .col__lg--11 { 408 | -webkit-flex-basis: 91.66667%; 409 | -ms-flex-preferred-size: 91.66667%; 410 | flex-basis: 91.66667%; 411 | max-width: 91.66667%; } 412 | .col__lg--12 { 413 | -webkit-flex-basis: 100%; 414 | -ms-flex-preferred-size: 100%; 415 | flex-basis: 100%; 416 | max-width: 100%; } } 417 | -------------------------------------------------------------------------------- /dist/pintsize.min.css: -------------------------------------------------------------------------------- 1 | .flex--reverse,.flex--row{-webkit-box-orient:horizontal}.col,.container{box-sizing:border-box}.container{max-width:1020px;margin:0 auto}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap}.flex--auto .col{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.flex--start{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.flex--start .col{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.flex--center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.flex--center .col{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.flex--end{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flex--end .col{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.flex--top{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flex--middle{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex--baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flex--wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex--row{-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex--bottom{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flex--bottom .col{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.flex--around{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.flex--around .col{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.flex--between .col{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1}.flex--reverse{-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;max-width:100%;padding-left:10px;padding-right:10px}.col--first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.col--last{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.col--1{-webkit-flex-basis:8.33333%;-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.col--2{-webkit-flex-basis:16.66667%;-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.col--3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col--4{-webkit-flex-basis:33.33333%;-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.col--5{-webkit-flex-basis:41.66667%;-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.col--6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col--7{-webkit-flex-basis:58.33333%;-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.col--8{-webkit-flex-basis:66.66667%;-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.col--9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col--10{-webkit-flex-basis:83.33333%;-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.col--11{-webkit-flex-basis:91.66667%;-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.col--12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col__offset--1{margin-left:8.33333%}.col__offset--2{margin-left:16.66667%}.col__offset--3{margin-left:25%}.col__offset--4{margin-left:33.33333%}.col__offset--5{margin-left:41.66667%}.col__offset--6{margin-left:50%}.col__offset--7{margin-left:58.33333%}.col__offset--8{margin-left:66.66667%}.col__offset--9{margin-left:75%}.col__offset--10{margin-left:83.33333%}.col__offset--11{margin-left:91.66667%}.col__offset--12{margin-left:100%}@media (min-width:40em){.col__md--1{-webkit-flex-basis:8.33333%;-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.col__md--2{-webkit-flex-basis:16.66667%;-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.col__md--3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col__md--4{-webkit-flex-basis:33.33333%;-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.col__md--5{-webkit-flex-basis:41.66667%;-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.col__md--6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col__md--7{-webkit-flex-basis:58.33333%;-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.col__md--8{-webkit-flex-basis:66.66667%;-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.col__md--9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col__md--10{-webkit-flex-basis:83.33333%;-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.col__md--11{-webkit-flex-basis:91.66667%;-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.col__md--12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}}@media (min-width:64em){.col__lg--1{-webkit-flex-basis:8.33333%;-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.col__lg--2{-webkit-flex-basis:16.66667%;-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.col__lg--3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col__lg--4{-webkit-flex-basis:33.33333%;-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.col__lg--5{-webkit-flex-basis:41.66667%;-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.col__lg--6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col__lg--7{-webkit-flex-basis:58.33333%;-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.col__lg--8{-webkit-flex-basis:66.66667%;-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.col__lg--9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col__lg--10{-webkit-flex-basis:83.33333%;-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.col__lg--11{-webkit-flex-basis:91.66667%;-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.col__lg--12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}} -------------------------------------------------------------------------------- /examples/auto-flex-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Auto Flex Grid Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Auto Flex Grid

43 |
44 |
45 | 46 | 47 |
48 |
1/2
49 |
2/2
50 | 51 |
52 | 53 |
54 | 55 |
1/3
56 |
2/3
57 |
3/3
58 | 59 |
60 | 61 |
62 | 63 |
1/4
64 |
2/4
65 |
3/4
66 |
4/4
67 | 68 |
69 | 70 |
71 | 72 |
1/5
73 |
2/5
74 |
3/5
75 |
4/5
76 |
5/5
77 | 78 |
79 | 80 | 81 |
82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /examples/basic-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Basic Grid Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Basic grid

43 |
44 |
45 | 46 |
47 | 48 |
49 |
col--6
50 |
51 | 52 |
53 |
col--6
54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 |
col--8
62 |
63 | 64 |
65 |
col--4
66 |
67 | 68 |
69 | 70 | 71 | 72 |
73 | 74 |
75 |
col--6
76 |
77 |
78 |
col--3
79 |
80 |
81 |
col--3
82 |
83 | 84 |
85 | 86 |
87 | 88 |
89 |
col-3
90 |
91 |
92 |
col--9
93 |
94 | 95 |
96 | 97 |
98 | 99 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /examples/column-first.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Column First Example 10 | 11 | 12 | 13 | 14 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 45 |
46 | 47 |
48 |

Column first

49 |
50 | 51 |
52 | 53 | 54 |
55 | 56 |
1
57 |
2
58 |
3
59 |
4
60 |
5
61 |
6
62 | 63 |
64 | 65 | 66 |
67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /examples/column-last.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Column Last Example 10 | 11 | 12 | 13 | 14 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 |
45 |
46 |

Column last

47 |
48 |
49 | 50 |
51 | 52 |
1
53 |
2
54 |
3
55 |
4
56 |
5
57 |
6
58 | 59 |
60 | 61 | 62 |
63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /examples/column-offset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Column Offset Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Column Offset

43 |
44 |
45 | 46 | 47 |
48 |
1/2
49 |
50 |
51 |
1/2
52 |
53 |
54 |
1/2
55 |
56 |
57 |
1/2
58 |
59 |
60 |
1/2
61 |
62 |
63 |
1/2
64 |
65 |
66 |
1/2
67 |
68 |
69 |
1/2
70 |
71 |
72 |
1/2
73 |
74 |
75 |
1/2
76 |
77 | 78 | 79 |
80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /examples/columns-reverse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Column Reverse Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Columns reverse

43 |
44 |
45 | 46 |
47 | 48 |
1
49 |
2
50 |
3
51 |
4
52 |
5
53 |
6
54 | 55 |
56 | 57 |
58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /examples/flex-align-end.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Flex Align End Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Flex align end

43 |
44 |
45 | 46 |
47 | 48 |
1/2
49 |
2/2
50 | 51 |
52 | 53 | 54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /examples/flex-align-start.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Flex Align Start Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Flex align start

43 |
44 |
45 | 46 |
47 | 48 |
1/2
49 |
2/2
50 | 51 |
52 | 53 |
54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /examples/flex-around.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Flex Around Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Flex around

43 |
44 |
45 | 46 |
47 | 48 |
1/3
49 |
2/3
50 |
3/3
51 | 52 |
53 | 54 | 55 |
56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /examples/flex-between.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Flex Between Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Flex between

43 |
44 |
45 | 46 |
47 | 48 |
1/3
49 |
2/3
50 |
3/3
51 | 52 |
53 | 54 | 55 |
56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /examples/flex-center.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Flex Center Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Flex center

43 |
44 |
45 | 46 |
47 | 48 |
1/2
49 |
2/2
50 | 51 |
52 | 53 | 54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /examples/flex-justify-bottom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Justify Bottom Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Justify bottom

43 |
44 |
45 | 46 |
47 | 48 |
49 |
50 |

Heading

51 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex id fugiat optio magni quos mollitia, dolorem distinctio sed quod fuga hic quae maiores a. Provident quibusdam vel animi, consectetur explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex id fugiat optio magni quos mollitia, dolorem distinctio sed quod fuga hic quae maiores a. Provident quibusdam vel animi, consectetur explicabo.

52 |
53 |
54 | 55 |
56 |
57 |
58 | 59 |
60 | 61 | 62 |
63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /examples/flex-justify-middle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Justify Middle Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Justify middle

43 |
44 |
45 | 46 |
47 | 48 |
49 |
50 |

Heading

51 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex id fugiat optio magni quos mollitia, dolorem distinctio sed quod fuga hic quae maiores a. Provident quibusdam vel animi, consectetur explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex id fugiat optio magni quos mollitia, dolorem distinctio sed quod fuga hic quae maiores a. Provident quibusdam vel animi, consectetur explicabo.

52 |
53 |
54 | 55 |
56 |
57 |
58 | 59 |
60 | 61 |
62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /examples/flex-justify-top.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Justify Top Example 10 | 11 | 12 | 13 | 14 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | 40 |
41 |
42 |

Justify top

43 |
44 |
45 | 46 |
47 | 48 |
49 |
50 |

Heading

51 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex id fugiat optio magni quos mollitia, dolorem distinctio sed quod fuga hic quae maiores a. Provident quibusdam vel animi, consectetur explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex id fugiat optio magni quos mollitia, dolorem distinctio sed quod fuga hic quae maiores a. Provident quibusdam vel animi, consectetur explicabo.

52 |
53 |
54 | 55 |
56 |
57 |
58 | 59 |
60 | 61 | 62 |
63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /examples/media-queries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Media Queries Example 10 | 11 | 12 | 13 | 14 | 59 | 60 | 61 | 62 | 63 | 64 |
65 | 66 |
67 |
68 |

Using media queries

69 |
70 |
71 | 72 |
73 | 74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 |
88 | 89 |
90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /examples/nested-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Pintsize - Nested Grid Example 10 | 11 | 12 | 13 | 14 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 |
45 |
46 |

Nesting

47 |
48 |
49 | 50 |
51 |
52 |

Auto flex nesting

53 |
54 |
55 | 56 |
57 | 58 |
59 | 60 |
61 | 62 |

Parent column

63 | 64 |
65 | 66 | 67 |

Child column

68 |

Child column

69 | 70 | 71 |
72 | 73 |
74 | 75 | 76 |
77 | 78 |
79 | 80 |
81 | 82 |

Parent column

83 | 84 |
85 | 86 | 87 |

Child column

88 |

Child column

89 | 90 | 91 |
92 | 93 |
94 | 95 | 96 |
97 | 98 |
99 | 100 |
101 | 102 |

Parent column

103 | 104 |
105 | 106 | 107 |

Child column

108 |

Child column

109 | 110 | 111 |
112 | 113 |
114 | 115 | 116 |
117 | 118 |
119 | 120 |
121 | 122 |

Parent column

123 | 124 |
125 | 126 | 127 |

Child column

128 |

Child column

129 | 130 | 131 |
132 | 133 |
134 | 135 | 136 |
137 | 138 | 139 |
140 | 141 |
142 |
143 |

Basic nesting

144 |
145 |
146 | 147 | 148 |
149 | 150 |
151 | 152 |
153 | 154 |

Parent column

155 | 156 |
157 | 158 | 159 |

Child column

160 |

Child column

161 | 162 | 163 |
164 | 165 |
166 | 167 | 168 |
169 | 170 |
171 | 172 |
173 | 174 |

Parent column

175 | 176 |
177 | 178 | 179 |

Child column

180 |

Child column

181 | 182 | 183 |
184 | 185 |
186 | 187 | 188 |
189 | 190 |
191 | 192 |
193 | 194 |

Parent column

195 | 196 |
197 | 198 | 199 |

Child column

200 |

Child column

201 | 202 | 203 |
204 | 205 |
206 | 207 | 208 |
209 | 210 |
211 | 212 |
213 | 214 |

Parent column

215 | 216 |
217 | 218 | 219 |

Child column

220 |

Child column

221 | 222 | 223 |
224 | 225 |
226 | 227 | 228 |
229 | 230 | 231 |
232 | 233 | 234 |
235 | 236 | 237 | 238 | 239 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Gulp tasks 2 | 3 | var gulp = require('gulp'), 4 | prefix = require('gulp-autoprefixer'), 5 | minifyCSS = require('gulp-minify-css'), 6 | sass = require('gulp-sass'), 7 | size = require('gulp-size'), 8 | rename = require('gulp-rename'); 9 | 10 | 11 | // Build Pintsize scss into css 12 | gulp.task('build', function(){ 13 | gulp.src('./src/pintsize.scss') 14 | .pipe(sass()) 15 | .pipe(size({gzip: false, showFiles: true, title:'un-prefixed css'})) 16 | .pipe(size({gzip: true, showFiles: true, title:'un-prefixed gzipped css'})) 17 | .pipe(prefix()) 18 | .pipe(size({gzip: false, showFiles: true, title:'prefixed css'})) 19 | .pipe(size({gzip: true, showFiles: true, title:'prefixed css'})) 20 | .pipe(gulp.dest('./dist')) 21 | .pipe(minifyCSS()) 22 | .pipe(rename('pintsize.min.css')) 23 | .pipe(gulp.dest('./dist')) 24 | .pipe(size({gzip: false, showFiles: true, title:'minified css'})) 25 | .pipe(size({gzip: true, showFiles: true, title:'minified css'})) 26 | }); 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Pintsize", 3 | "version": "2.0.0", 4 | "description": "A simple and modern flexible grid system", 5 | "main": "dist/pintsize.css", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/alistairtweedie/pintsize.git" 9 | }, 10 | "keywords": [ 11 | "gulp", 12 | "grid", 13 | "system", 14 | "flexbox" 15 | ], 16 | "author": "@alistairtweedie", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/alistairtweedie/pintsize/issues" 20 | }, 21 | "devDependencies": { 22 | "gulp": "3.9.0", 23 | "gulp-autoprefixer": "3.1.0", 24 | "gulp-minify-css": "1.2.2", 25 | "gulp-rename": "1.2.2", 26 | "gulp-sass": "2.1.0", 27 | "gulp-size": "2.0.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/pintsize.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------*\ 2 | 3 | Pintsize 4 | Url: http://www.pintsize.io 5 | Github: https://github.com/alistairtweedie/Pintsize/ 6 | 7 | /*-------------------------------------------------------*/ 8 | 9 | 10 | 11 | /*-------------------------------------------------------*\ 12 | #grid config 13 | \*-------------------------------------------------------*/ 14 | 15 | // Number of columns 16 | $columns: 12 !default; 17 | 18 | //Width of a column in pixels 19 | $column-width: 65px !default; 20 | 21 | //Width of a gutter in pixels 22 | $gutter-width: 20px !default; 23 | 24 | //Fixed gutter width? 25 | //False will generate a flexible gutter width. 26 | $fixed-gutter-size: true !default; 27 | 28 | //Medium breakpoint to respond to 29 | $md: 40em; 30 | 31 | //Large breakpoint to respond to 32 | $lg: 64em; 33 | 34 | //Provide fallbacks for IE9 and IE8? 35 | //This generates a lot more css 36 | $old-ie: false !default; 37 | 38 | 39 | /*-------------------------------------------------------*\ 40 | #grid calculations 41 | \*-------------------------------------------------------*/ 42 | 43 | //percentage function 44 | @function percentage($size, $width) { 45 | 46 | @return $size / $width * 100%; 47 | 48 | } 49 | 50 | $grid-width: ($columns * $column-width) + (($columns ) * $gutter-width); 51 | 52 | 53 | //calc column width 54 | @function column($value) { 55 | 56 | $width: $value * $column-width + ($value ) * $gutter-width; 57 | @return percentage($width, $grid-width); 58 | 59 | } 60 | 61 | 62 | /*-------------------------------------------------------*\ 63 | #clearfix mixin 64 | \*-------------------------------------------------------*/ 65 | 66 | @mixin clearfix() { 67 | 68 | &:before, 69 | &:after { 70 | content: " "; /* 1 */ 71 | display: table; /* 2 */ 72 | } 73 | 74 | &:after { 75 | clear: both; 76 | } 77 | 78 | & { 79 | *zoom: 1; 80 | } 81 | 82 | } 83 | 84 | /*-------------------------------------------------------*\ 85 | #box sizing mixin 86 | \*-------------------------------------------------------*/ 87 | 88 | @mixin box-sizing { 89 | 90 | -webkit-box-sizing: border-box; 91 | -moz-box-sizing: border-box; 92 | box-sizing: border-box; 93 | 94 | } 95 | 96 | 97 | /*-------------------------------------------------------*\ 98 | #media query mixin 99 | \*-------------------------------------------------------*/ 100 | 101 | @mixin respond-to($point) { 102 | 103 | @media (min-width: $point) { 104 | 105 | @content; 106 | 107 | } 108 | 109 | } 110 | 111 | /*-------------------------------------------------------*\ 112 | #older IE mixin 113 | - support for IE9 and IE8. 114 | - $old-ie in grid config must be true 115 | \*-------------------------------------------------------*/ 116 | 117 | @mixin old-ie { 118 | 119 | @if $old-ie == true { 120 | 121 | .old-ie & { 122 | 123 | @content 124 | 125 | } 126 | 127 | } 128 | 129 | } 130 | 131 | /*-------------------------------------------------------*\ 132 | #gutter mixin 133 | - If $fixed-gutter-size is set to true this will output 134 | the $gutter-width as a fixed value and not percentage 135 | \*-------------------------------------------------------*/ 136 | 137 | 138 | @mixin gutter-output { 139 | 140 | @if $fixed-gutter-size == true { 141 | 142 | padding-left: $gutter-width / 2; 143 | padding-right: $gutter-width / 2; 144 | 145 | } 146 | 147 | @else { 148 | 149 | padding-left: percentage($gutter-width, $grid-width) / 2; 150 | padding-right: percentage($gutter-width, $grid-width) / 2; 151 | } 152 | 153 | } 154 | 155 | 156 | /*-------------------------------------------------------*\ 157 | #The grid 158 | \*-------------------------------------------------------*/ 159 | 160 | .container { 161 | 162 | max-width: $grid-width; // Calculated from config 163 | margin: 0 auto; 164 | @include box-sizing; 165 | 166 | @include old-ie { 167 | 168 | @include clearfix; 169 | 170 | } 171 | 172 | } 173 | 174 | // wrapper class for .col classes 175 | .flex { 176 | 177 | display: flex; 178 | flex-flow: row wrap; 179 | 180 | @include old-ie { 181 | 182 | @include clearfix; 183 | 184 | } 185 | } 186 | 187 | 188 | /*-------------------------------------------------------*\ 189 | #flexbox helper classes 190 | - docs for browser support to be provided 191 | \*-------------------------------------------------------*/ 192 | 193 | .flex--auto { 194 | 195 | .col { 196 | 197 | flex-grow: 1; 198 | 199 | } 200 | 201 | } 202 | 203 | .flex--start { 204 | 205 | justify-content: flex-start; 206 | 207 | .col { 208 | 209 | flex-grow: 0; 210 | 211 | } 212 | 213 | } 214 | 215 | .flex--center { 216 | 217 | justify-content: center; 218 | 219 | .col { 220 | 221 | flex-grow: 0; 222 | 223 | } 224 | 225 | 226 | // IE 8 and IE 9 fallback 227 | @include old-ie { 228 | 229 | .flex--center { 230 | float: none; 231 | margin-left: auto; 232 | margin-right: auto; 233 | 234 | } 235 | 236 | } 237 | 238 | } 239 | 240 | 241 | 242 | .flex--end { 243 | 244 | justify-content: flex-end; 245 | 246 | // defualt columns class required to be altered 247 | .col { 248 | 249 | flex-grow: 0; 250 | 251 | } 252 | } 253 | 254 | .flex--top { 255 | 256 | align-items: flex-start; 257 | } 258 | 259 | .flex--middle { 260 | 261 | align-items: center; 262 | } 263 | 264 | .flex--baseline { 265 | 266 | align-items: baseline; 267 | } 268 | 269 | .flex--wrap { 270 | 271 | flex-wrap: wrap; 272 | } 273 | 274 | .flex--row { 275 | 276 | flex-direction: row; 277 | } 278 | 279 | .flex--bottom { 280 | 281 | align-items: flex-end; 282 | 283 | .col { 284 | 285 | flex-grow: 1; 286 | 287 | } 288 | } 289 | 290 | 291 | .flex--around { 292 | 293 | justify-content: space-around; 294 | 295 | // defualt columns class required to be altered 296 | .col { 297 | 298 | flex-grow: 0; 299 | flex-shrink: 1; 300 | 301 | } 302 | 303 | } 304 | 305 | .flex--between { 306 | 307 | justify-content: space-between; 308 | 309 | // defualt columns class required to be altered 310 | .col { 311 | 312 | flex-grow: 0; 313 | flex-shrink: 1; 314 | 315 | } 316 | } 317 | 318 | .flex--reverse { 319 | 320 | flex-direction: row-reverse; 321 | } 322 | 323 | 324 | // defualt columns class - auto flex 325 | .col { 326 | 327 | flex-grow: 0; 328 | flex-shrink: 0; 329 | flex-basis: auto; 330 | max-width: 100%; 331 | @include box-sizing; 332 | @include gutter-output; 333 | 334 | @include old-ie { 335 | 336 | float: left; 337 | display: block; 338 | 339 | } 340 | } 341 | 342 | 343 | .col--first { 344 | 345 | order: -1; 346 | 347 | } 348 | 349 | .col--last { 350 | 351 | order: 1; 352 | } 353 | 354 | 355 | 356 | // cycles through $columns and calculates widths 357 | @for $i from 1 through $columns { 358 | 359 | .col--#{$i} { 360 | 361 | flex-basis: column($i); 362 | max-width: column($i); 363 | 364 | @include old-ie { 365 | 366 | width: column($i); 367 | 368 | } 369 | 370 | } 371 | 372 | } 373 | 374 | // cycles through $columns and calculates offsets 375 | @for $i from 1 through $columns { 376 | 377 | .col__offset--#{$i} { 378 | 379 | margin-left: column($i); 380 | 381 | } 382 | 383 | } 384 | 385 | 386 | 387 | // cycles through $columns and 388 | // generates medium breakpoint column classes 389 | @include respond-to($md) { 390 | 391 | @for $i from 1 through $columns { 392 | 393 | .col__md--#{$i} { 394 | 395 | flex-basis: column($i); 396 | max-width: column($i); 397 | 398 | @include old-ie { 399 | 400 | width: column($i); 401 | 402 | } 403 | 404 | } 405 | 406 | } 407 | 408 | } 409 | 410 | 411 | // cycles through $columns and 412 | // generates large breakpoint column classes 413 | @include respond-to($lg) { 414 | 415 | 416 | @for $i from 1 through $columns { 417 | 418 | .col__lg--#{$i} { 419 | 420 | flex-basis: column($i); 421 | max-width: column($i); 422 | 423 | @include old-ie { 424 | 425 | width: column($i); 426 | 427 | } 428 | 429 | } 430 | 431 | } 432 | 433 | } 434 | --------------------------------------------------------------------------------