├── .gitignore
├── .travis.yml
├── bower.json
├── package.json
├── gulpfile.js
├── examples
    ├── flex-center.html
    ├── flex-align-end.html
    ├── flex-align-start.html
    ├── flex-around.html
    ├── flex-between.html
    ├── columns-reverse.html
    ├── column-last.html
    ├── column-first.html
    ├── flex-justify-top.html
    ├── flex-justify-middle.html
    ├── flex-justify-bottom.html
    ├── media-queries.html
    ├── auto-flex-grid.html
    ├── column-offset.html
    ├── basic-grid.html
    └── nested-grid.html
├── README.md
├── dist
    ├── pintsize.min.css
    └── pintsize.css
└── 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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/examples/flex-center.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Flex Center Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: center;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |     <div class="col">
42 |             <h1>Flex center</h1>
43 |         </div>
44 |     </div>
45 | 
46 |     <div class="flex flex--center">
47 |         
48 |         <div class="col col--2"><div class="demo--content-block">1/2</div></div>
49 |         <div class="col col--2"><div class="demo--content-block">2/2</div></div>
50 | 
51 |     </div>
52 | 
53 | 
54 | </div>
55 | <!-- end container -->
56 | 
57 | </body>
58 | </html>      
59 | 


--------------------------------------------------------------------------------
/examples/flex-align-end.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Flex Align End Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: center;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |     <div class="col">
42 |             <h1>Flex align end</h1>
43 |         </div>
44 |     </div>
45 | 
46 |     <div class="flex flex--end">
47 |         
48 |         <div class="col col--2"><div class="demo--content-block">1/2</div></div>
49 |         <div class="col col--2"><div class="demo--content-block">2/2</div></div>
50 | 
51 |     </div>
52 | 
53 | 
54 | </div>
55 | <!-- end container -->
56 | 
57 | </body>
58 | </html>      
59 | 


--------------------------------------------------------------------------------
/examples/flex-align-start.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Flex Align Start Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: center;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |         <div class="col">
42 |             <h1>Flex align start</h1>
43 |         </div>
44 |     </div>
45 | 
46 |     <div class="flex flex--start">
47 |         
48 |         <div class="col col--2"><div class="demo--content-block">1/2</div></div>
49 |         <div class="col col--2"><div class="demo--content-block">2/2</div></div>
50 | 
51 |     </div>
52 | 
53 | </div>
54 | <!-- end container -->
55 | 
56 | </body>
57 | </html>      
58 | 


--------------------------------------------------------------------------------
/examples/flex-around.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Flex Around Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: center;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |     <div class="col">
42 |             <h1>Flex around</h1>
43 |         </div>
44 |     </div>
45 | 
46 |     <div class="flex flex--around">
47 |         
48 |         <div class="col col--2"><div class="demo--content-block">1/3</div></div>
49 |         <div class="col col--2"><div class="demo--content-block">2/3</div></div>
50 |         <div class="col col--2"><div class="demo--content-block">3/3</div></div>
51 | 
52 |     </div>  
53 | 
54 | 
55 | </div>
56 | <!-- end container -->
57 | 
58 | </body>
59 | </html>      
60 | 


--------------------------------------------------------------------------------
/examples/flex-between.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Flex Between Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: center;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |     <div class="col">
42 |             <h1>Flex between</h1>
43 |         </div>
44 |     </div>
45 | 
46 |     <div class="flex flex--between">
47 |         
48 |         <div class="col col--2"><div class="demo--content-block">1/3</div></div>
49 |         <div class="col col--2"><div class="demo--content-block">2/3</div></div>
50 |         <div class="col col--2"><div class="demo--content-block">3/3</div></div>
51 | 
52 |     </div>
53 | 
54 | 
55 | </div>
56 | <!-- end container -->
57 | 
58 | </body>
59 | </html>      
60 | 


--------------------------------------------------------------------------------
/examples/columns-reverse.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Column Reverse Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: center;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |         <div class="col">
42 |             <h1>Columns reverse</h1>
43 |         </div>
44 |     </div>
45 | 
46 |     <div class="flex flex--reverse">
47 | 
48 |         <div class="col col--2"><div class="demo--content-block">1</div></div>
49 |         <div class="col col--2"><div class="demo--content-block">2</div></div>
50 |         <div class="col col--2"><div class="demo--content-block">3</div></div>
51 |         <div class="col col--2"><div class="demo--content-block">4</div></div>
52 |         <div class="col col--2"><div class="demo--content-block">5</div></div>
53 |         <div class="col col--2"><div class="demo--content-block">6</div></div>
54 | 
55 |     </div>
56 | 
57 | </div>
58 | <!-- end container -->
59 | 
60 | </body>
61 | </html>      
62 | 


--------------------------------------------------------------------------------
/examples/column-last.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Column Last Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .col--last .demo--content-block {
27 |         background-color: #aaa;
28 |     }
29 | 
30 |     .demo--content-block {
31 |         background-color: #ddd;
32 |         text-align: center;
33 |         padding: 1.5em 0.5em;
34 |         margin: .5em 0;
35 |     }
36 |     </style>
37 |     
38 | </head>
39 | 
40 | <body>
41 | 
42 | <div class="container">
43 | 
44 |     <div class="flex">
45 |     <div class="col">
46 |             <h1>Column last</h1>
47 |         </div>
48 |     </div>
49 | 
50 |     <div class="flex">
51 | 
52 |         <div class="col col--2"><div class="demo--content-block">1</div></div>
53 |         <div class="col col--2"><div class="demo--content-block">2</div></div>
54 |         <div class="col col--2 col--last"><div class="demo--content-block">3</div></div>
55 |         <div class="col col--2"><div class="demo--content-block">4</div></div>
56 |         <div class="col col--2"><div class="demo--content-block">5</div></div>
57 |         <div class="col col--2"><div class="demo--content-block">6</div></div>
58 | 
59 |     </div>
60 | 
61 | 
62 | </div>
63 | <!-- end container -->
64 | 
65 | </body>
66 | </html>      
67 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/examples/column-first.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Column First Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .col--first .demo--content-block {
27 |         background-color: #aaa;
28 |     }
29 | 
30 |     .demo--content-block {
31 |         background-color: #ddd;
32 |         text-align: center;
33 |         padding: 1.5em 0.5em;
34 |         margin: .5em 0;
35 |     }
36 |     </style>
37 |     
38 | </head>
39 | 
40 | <body>
41 | 
42 | <div class="container">
43 | 
44 | 
45 |     <div class="flex">
46 |         
47 |         <div class="col">
48 |             <h1>Column first</h1>
49 |         </div>
50 | 
51 |     </div>
52 | 
53 | 
54 |     <div class="flex">
55 | 
56 |         <div class="col col--2"><div class="demo--content-block">1</div></div>
57 |         <div class="col col--2"><div class="demo--content-block">2</div></div>
58 |         <div class="col col--2 col--first"><div class="demo--content-block">3</div></div>
59 |         <div class="col col--2"><div class="demo--content-block">4</div></div>
60 |         <div class="col col--2"><div class="demo--content-block">5</div></div>
61 |         <div class="col col--2"><div class="demo--content-block">6</div></div>
62 | 
63 |     </div>
64 | 
65 | 
66 | </div>
67 | <!-- end container -->
68 | 
69 | </body>
70 | </html>      
71 | 


--------------------------------------------------------------------------------
/examples/flex-justify-top.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Justify Top Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: left;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |     <div class="col">
42 |             <h1>Justify top</h1>
43 |         </div>
44 |     </div>
45 | 
46 |     <div class="flex flex--top">
47 |         
48 |         <div class="col col--6">
49 |             <div class="demo--content-block u-text-left">
50 |                 <h2>Heading</h2>
51 |                 <p>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.</p>
52 |             </div>
53 |         </div>
54 | 
55 |         <div class="col col--6">
56 |             <div class="demo--content-block"></div>
57 |         </div>
58 | 
59 |     </div>
60 | 
61 | 
62 | </div>
63 | <!-- end container -->
64 | 
65 | </body>
66 | </html>      
67 | 


--------------------------------------------------------------------------------
/examples/flex-justify-middle.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Justify Middle Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: left;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |     <div class="col">
42 |             <h1>Justify middle</h1>
43 |         </div>
44 |     </div>
45 | 
46 |     <div class="flex flex--middle">
47 |         
48 |         <div class="col col--6">
49 |             <div class="demo--content-block u-text-left">
50 |                 <h2>Heading</h2>
51 |                 <p>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.</p>
52 |             </div>
53 |         </div>
54 | 
55 |         <div class="col col--6">
56 |             <div class="demo--content-block"></div>
57 |         </div>
58 | 
59 |     </div>
60 | 
61 | </div>
62 | <!-- end container -->
63 | 
64 | </body>
65 | </html>      
66 | 


--------------------------------------------------------------------------------
/examples/flex-justify-bottom.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Justify Bottom Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: left;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |     <div class="col">
42 |             <h1>Justify bottom</h1>
43 |         </div>
44 |     </div>
45 | 
46 |     <div class="flex flex--bottom">
47 |         
48 |         <div class="col col--6">
49 |             <div class="demo--content-block u-text-left">
50 |                 <h2>Heading</h2>
51 |                 <p>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.</p>
52 |             </div>
53 |         </div>
54 | 
55 |         <div class="col col--6">
56 |             <div class="demo--content-block"></div>
57 |         </div>
58 | 
59 |     </div>
60 | 
61 | 
62 | </div>
63 | <!-- end container -->
64 | 
65 | </body>
66 | </html>      
67 | 


--------------------------------------------------------------------------------
/examples/media-queries.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Media Queries Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: center;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 | 
33 |     .demo--class-display:before {
34 | 
35 |         content: '.col--12';
36 | 
37 |     }
38 |     
39 |     @media (min-width: 40em) {
40 | 
41 |         .demo--class-display:before {
42 | 
43 |             content: '.col--6';
44 | 
45 |         }
46 | 
47 |     }
48 | 
49 |     @media (min-width: 64em) {
50 | 
51 |         .demo--class-display:before {
52 | 
53 |             content: '.col--3';
54 | 
55 |         }
56 | 
57 |     }
58 |     </style>
59 |     
60 | </head>
61 | 
62 | <body>
63 | 
64 | <div class="container">
65 | 
66 |     <div class="flex">
67 |         <div class="col col__md--12">
68 |             <h1>Using media queries</h1>
69 |         </div>
70 |     </div>
71 | 
72 |     <div class="flex">
73 | 
74 |         <div class="col col--12 col__md--6 col__lg--3">
75 |             <div class="demo--content-block demo--class-display"></div>
76 |         </div>
77 |         <div class="col col--12 col__md--6 col__lg--3">
78 |             <div class="demo--content-block demo--class-display"></div>
79 |         </div>
80 |         <div class="col col--12 col__md--6 col__lg--3">
81 |             <div class="demo--content-block demo--class-display"></div>
82 |         </div>
83 |         <div class="col col--12 col__md--6 col__lg--3">
84 |             <div class="demo--content-block demo--class-display"></div>
85 |         </div>
86 |       
87 |     </div>
88 | 
89 | </div>
90 | <!-- end container -->
91 | 
92 | </body>
93 | </html>      
94 | 


--------------------------------------------------------------------------------
/examples/auto-flex-grid.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Auto Flex Grid Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: center;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |         <div class="col">
42 |             <h1>Auto Flex Grid</h1>
43 |         </div>
44 |     </div>
45 | 
46 | 
47 |     <div class="flex flex--auto">
48 |         <div class="col"><div class="demo--content-block">1/2</div></div>
49 |         <div class="col"><div class="demo--content-block">2/2</div></div>
50 | 
51 |     </div>
52 | 
53 |     <div class="flex flex--auto">
54 | 
55 |         <div class="col"><div class="demo--content-block">1/3</div></div>
56 |         <div class="col"><div class="demo--content-block">2/3</div></div>
57 |         <div class="col"><div class="demo--content-block">3/3</div></div>
58 | 
59 |     </div>
60 | 
61 |     <div class="flex flex--auto">
62 | 
63 |         <div class="col"><div class="demo--content-block">1/4</div></div>
64 |         <div class="col"><div class="demo--content-block">2/4</div></div>
65 |         <div class="col"><div class="demo--content-block">3/4</div></div>
66 |         <div class="col"><div class="demo--content-block">4/4</div></div>
67 |       
68 |     </div>
69 | 
70 |     <div class="flex flex--auto">
71 | 
72 |         <div class="col"><div class="demo--content-block">1/5</div></div>
73 |         <div class="col"><div class="demo--content-block">2/5</div></div>
74 |         <div class="col"><div class="demo--content-block">3/5</div></div>
75 |         <div class="col"><div class="demo--content-block">4/5</div></div>
76 |         <div class="col"><div class="demo--content-block">5/5</div></div>
77 |       
78 |     </div>
79 | 
80 | 
81 | </div>
82 | <!-- end container -->
83 | 
84 | </body>
85 | </html>     
86 | 


--------------------------------------------------------------------------------
/examples/column-offset.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
 3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
 4 | 
 5 | <head>
 6 | 
 7 |     <meta charset="utf-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 9 |     <title>Pintsize - Column Offset Example</title>
10 |     <meta name="description" content="">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
12 | 
13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
14 |     <style>
15 |     /*-------------------------------------------------------*\
16 |         #example styles
17 |     \*-------------------------------------------------------*/
18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
19 | 
20 |     body {
21 |         font-size: 1em;
22 |         line-height: 1.5;
23 |         font-family: 'Roboto', sans-serif;
24 |     }
25 | 
26 |     .demo--content-block {
27 |         background-color: #ddd;
28 |         text-align: center;
29 |         padding: 1.5em 0.5em;
30 |         margin: .5em 0;
31 |     }
32 |     </style>
33 |     
34 | </head>
35 | 
36 | <body>
37 | 
38 | <div class="container">
39 | 
40 |     <div class="flex">
41 |         <div class="col">
42 |             <h1>Column Offset</h1>
43 |         </div>
44 |     </div>
45 | 
46 | 
47 |     <div class="flex">
48 |         <div class="col col--2 col__offset--10"><div class="demo--content-block">1/2</div></div>
49 |     </div>
50 |     <div class="flex">
51 |         <div class="col col--3 col__offset--9"><div class="demo--content-block">1/2</div></div>
52 |     </div>
53 |     <div class="flex">
54 |         <div class="col col--4 col__offset--8"><div class="demo--content-block">1/2</div></div>
55 |     </div>
56 |     <div class="flex">
57 |         <div class="col col--5 col__offset--7"><div class="demo--content-block">1/2</div></div>
58 |     </div>
59 |     <div class="flex">
60 |         <div class="col col--6 col__offset--6"><div class="demo--content-block">1/2</div></div>
61 |     </div>
62 |     <div class="flex">
63 |         <div class="col col--7 col__offset--5"><div class="demo--content-block">1/2</div></div>
64 |     </div>
65 |     <div class="flex">
66 |         <div class="col col--8 col__offset--4"><div class="demo--content-block">1/2</div></div>
67 |     </div>
68 |     <div class="flex">
69 |         <div class="col col--9 col__offset--3"><div class="demo--content-block">1/2</div></div>
70 |     </div>
71 |     <div class="flex">
72 |         <div class="col col--10 col__offset--2"><div class="demo--content-block">1/2</div></div>
73 |     </div>
74 |     <div class="flex">
75 |         <div class="col col--11 col__offset--1"><div class="demo--content-block">1/2</div></div>
76 |     </div>
77 | 
78 | 
79 | </div>
80 | <!-- end container -->
81 | 
82 | </body>
83 | </html>     
84 | 


--------------------------------------------------------------------------------
/examples/basic-grid.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
  3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
  4 | 
  5 | <head>
  6 | 
  7 |     <meta charset="utf-8">
  8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  9 |     <title>Pintsize - Basic Grid Example</title>
 10 |     <meta name="description" content="">
 11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 12 | 
 13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
 14 |     <style>
 15 |     /*-------------------------------------------------------*\
 16 |         #example styles
 17 |     \*-------------------------------------------------------*/
 18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
 19 | 
 20 |     body {
 21 |         font-size: 1em;
 22 |         line-height: 1.5;
 23 |         font-family: 'Roboto', sans-serif;
 24 |     }
 25 |     
 26 |     .demo--content-block {
 27 |         background-color: #ddd;
 28 |         text-align: center;
 29 |         padding: 1.5em 0.5em;
 30 |         margin: .5em 0;
 31 |     }
 32 |     </style>
 33 |     
 34 | </head>
 35 | 
 36 | <body>
 37 | 
 38 | <div class="container">
 39 | 
 40 |     <div class="flex">
 41 |         <div class="col">
 42 |             <h1>Basic grid</h1>
 43 |         </div>
 44 |     </div>
 45 | 
 46 |     <div class="flex">
 47 | 
 48 |         <div class="col col--6">
 49 |             <div class="demo--content-block">col--6</div>
 50 |         </div>
 51 | 
 52 |         <div class="col col--6">
 53 |             <div class="demo--content-block">col--6</div>
 54 |         </div>
 55 | 
 56 |     </div>
 57 | 
 58 |     <div class="flex">
 59 | 
 60 |         <div class="col col--8">
 61 |             <div class="demo--content-block">col--8</div>
 62 |         </div>
 63 | 
 64 |         <div class="col col--4">
 65 |             <div class="demo--content-block">col--4</div>
 66 |         </div>
 67 | 
 68 |     </div>
 69 | 
 70 | 
 71 | 
 72 |     <div class="flex">
 73 | 
 74 |         <div class="col col--6">
 75 |             <div class="demo--content-block">col--6</div>
 76 |         </div>
 77 |         <div class="col col--3">
 78 |             <div class="demo--content-block">col--3</div>
 79 |         </div>
 80 |         <div class="col col--3">
 81 |             <div class="demo--content-block">col--3</div>
 82 |         </div>
 83 |       
 84 |     </div>
 85 | 
 86 |     <div class="flex">
 87 | 
 88 |         <div class="col col--3">
 89 |             <div class="demo--content-block">col-3</div>
 90 |         </div>
 91 |         <div class="col col--9">
 92 |             <div class="demo--content-block">col--9</div>
 93 |         </div>
 94 |       
 95 |     </div> 
 96 | 
 97 | </div>
 98 | <!-- end container -->
 99 | 
100 | </body>
101 | </html>        
102 | 
103 | 
104 | 


--------------------------------------------------------------------------------
/examples/nested-grid.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--[if lte IE 9]><html lang="en" class="no-js old-ie"><![endif]-->
  3 | <!--[if gt IE 9]><!--><html lang="en" class="no-js"><!--<![endif]-->
  4 | 
  5 | <head>
  6 | 
  7 |     <meta charset="utf-8">
  8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  9 |     <title>Pintsize - Nested Grid Example</title>
 10 |     <meta name="description" content="">
 11 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 12 | 
 13 |     <link rel="stylesheet" href="../dist/pintsize.css"/>
 14 |     <style>
 15 |     /*-------------------------------------------------------*\
 16 |         #example styles
 17 |     \*-------------------------------------------------------*/
 18 |     @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
 19 | 
 20 |     body {
 21 |         font-size: 1em;
 22 |         line-height: 1.5;
 23 |         font-family: 'Roboto', sans-serif;
 24 |     }
 25 | 
 26 |     .demo--content-block {
 27 |         background-color: #ddd;
 28 |         text-align: center;
 29 |         padding: 1.5em 0.5em;
 30 |         margin: .5em 0;
 31 |     }
 32 | 
 33 |     .demo--content-block .demo--content-block {
 34 |         background-color: #aaa;
 35 |     }
 36 |     </style>
 37 |     
 38 | </head>
 39 | 
 40 | <body>
 41 | 
 42 | <div class="container">
 43 | 
 44 |     <div class="flex">
 45 |         <div class="col col__md--12">
 46 |             <h2>Nesting</h2>
 47 |         </div>
 48 |     </div>
 49 | 
 50 |     <div class="flex">
 51 |         <div class="col col__md--12">
 52 |             <h3>Auto flex nesting</h3>
 53 |         </div>
 54 |     </div>
 55 | 
 56 |     <div class="flex flex--auto">
 57 | 
 58 |         <div class="col">
 59 | 
 60 |             <div class="demo--content-block">
 61 | 
 62 |                 <p>Parent column</p>
 63 | 
 64 |                 <div class="flex">
 65 |                 
 66 |             
 67 |                         <div class="col"><div class="demo--content-block"><p>Child column</p></div></div>
 68 |                         <div class="col"><div class="demo--content-block"><p>Child column</p></div></div>
 69 |                     
 70 | 
 71 |                 </div>
 72 | 
 73 |             </div> 
 74 |             
 75 | 
 76 |         </div>
 77 |         
 78 |         <div class="col">
 79 | 
 80 |             <div class="demo--content-block">
 81 | 
 82 |                 <p>Parent column</p>
 83 | 
 84 |                 <div class="flex">
 85 |                 
 86 |             
 87 |                         <div class="col"><div class="demo--content-block"><p>Child column</p></div></div>
 88 |                         <div class="col"><div class="demo--content-block"><p>Child column</p></div></div>
 89 |                     
 90 | 
 91 |                 </div>
 92 | 
 93 |             </div> 
 94 |             
 95 | 
 96 |         </div>
 97 | 
 98 |         <div class="col">
 99 | 
100 |             <div class="demo--content-block">
101 | 
102 |                 <p>Parent column</p>
103 | 
104 |                 <div class="flex">
105 |                 
106 |             
107 |                         <div class="col"><div class="demo--content-block"><p>Child column</p></div></div>
108 |                         <div class="col"><div class="demo--content-block"><p>Child column</p></div></div>
109 |                     
110 | 
111 |                 </div>
112 | 
113 |             </div> 
114 |             
115 | 
116 |         </div>
117 | 
118 |         <div class="col">
119 | 
120 |             <div class="demo--content-block">
121 | 
122 |                 <p>Parent column</p>
123 | 
124 |                 <div class="flex">
125 |                 
126 |             
127 |                         <div class="col"><div class="demo--content-block"><p>Child column</p></div></div>
128 |                         <div class="col"><div class="demo--content-block"><p>Child column</p></div></div>
129 |                     
130 | 
131 |                 </div>
132 | 
133 |             </div> 
134 |             
135 | 
136 |         </div>
137 |         
138 |       
139 |     </div>
140 | 
141 |     <div class="flex">
142 |         <div class="col col__md--12">
143 |             <h3>Basic nesting</h3>
144 |         </div>
145 |     </div>
146 | 
147 | 
148 |     <div class="flex">
149 | 
150 |         <div class="col col--6">
151 | 
152 |             <div class="demo--content-block">
153 | 
154 |                 <p>Parent column</p>
155 | 
156 |                 <div class="flex">
157 |                 
158 |             
159 |                         <div class="col col--6"><div class="demo--content-block"><p>Child column</p></div></div>
160 |                         <div class="col col--6"><div class="demo--content-block"><p>Child column</p></div></div>
161 |                     
162 | 
163 |                 </div>
164 | 
165 |             </div> 
166 |             
167 | 
168 |         </div>
169 |         
170 |         <div class="col col--6">
171 | 
172 |             <div class="demo--content-block">
173 | 
174 |                 <p>Parent column</p>
175 | 
176 |                 <div class="flex">
177 |                 
178 |             
179 |                         <div class="col col--6"><div class="demo--content-block"><p>Child column</p></div></div>
180 |                         <div class="col col--6"><div class="demo--content-block"><p>Child column</p></div></div>
181 |                     
182 | 
183 |                 </div>
184 | 
185 |             </div> 
186 |             
187 | 
188 |         </div>
189 | 
190 |         <div class="col col--6">
191 | 
192 |             <div class="demo--content-block">
193 | 
194 |                 <p>Parent column</p>
195 | 
196 |                 <div class="flex">
197 |                 
198 |             
199 |                         <div class="col col--6"><div class="demo--content-block"><p>Child column</p></div></div>
200 |                         <div class="col col--6"><div class="demo--content-block"><p>Child column</p></div></div>
201 |                     
202 | 
203 |                 </div>
204 | 
205 |             </div> 
206 |             
207 | 
208 |         </div>
209 | 
210 |         <div class="col col--6">
211 | 
212 |             <div class="demo--content-block">
213 | 
214 |                 <p>Parent column</p>
215 | 
216 |                 <div class="flex">
217 |                 
218 |             
219 |                         <div class="col col--6"><div class="demo--content-block"><p>Child column</p></div></div>
220 |                         <div class="col col--6"><div class="demo--content-block"><p>Child column</p></div></div>
221 |                     
222 | 
223 |                 </div>
224 | 
225 |             </div> 
226 |             
227 | 
228 |         </div>
229 |         
230 |       
231 |     </div>
232 | 
233 | 
234 | </div>
235 | <!-- end container -->
236 | 
237 | </body>
238 | </html>      
239 | 


--------------------------------------------------------------------------------
/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%}}


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------