├── design └── flexboxgrid-template.sketch ├── .gitignore ├── .github ├── PULL_REQUEST_TEMPLATE.md ├── ISSUE_TEMPLATE.md └── CONTRIBUTING.md ├── LICENSE ├── package.json ├── README.md ├── Gruntfile.js ├── docs ├── src │ ├── style.css │ └── index.html ├── index.html └── style.css └── src └── flexboxgrid2.css /design/flexboxgrid-template.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imevro/flexboxgrid2/HEAD/design/flexboxgrid-template.sketch -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | yarn.lock 4 | dist 5 | flexboxgrid2.css 6 | flexboxgrid2.min.css 7 | !src/flexboxgrid2.css -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Description 2 | 3 | ... 4 | 5 | ### Check List 6 | __instruction : terminal command__ 7 | - [ ] run the build script `grunt` 8 | - [ ] open `index.html` in a browser & resize to test visual issues 9 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Briefly ( tweet size ) describe your issue and how you discovered it. 2 | 3 | ... 4 | 5 | ### Expected behavior 6 | 7 | ... 8 | 9 | ### Actual behavior 10 | 11 | ... 12 | 13 | ### Steps to reproduce behavior 14 | 15 | * OS: 16 | * Browser: 17 | * code/fiddle/pen url: 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2013 Kristofer Joseph 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # FLEXBOX GRID 2 | 3 | ## Thanks for contributing 4 | 5 | ### When creating an issue 6 | 7 | You should use the supplied issue template to help in capturing all of the pertinent information needed to close the issue as soon as humanly possible. 8 | Don't forget to say what platform you are on. 9 | Code examples are always useful in debugging as well. 10 | Again the better the information, the quicker your issue will be resolved. 11 | 12 | ## When creating a pull request 13 | 14 | Use the supplied template in order to supply all the information I need to merge in your code. 15 | Make sure to follow the build steps and double check the output index.html to make sure you haven't broken anything. 16 | The website is basically the equivalent of a visual unit test since it uses the newly built css for it's layout. 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flexboxgrid2", 3 | "version": "7.2.1", 4 | "description": "Grid based off of CSS3 flexbox specification", 5 | "style": "flexboxgrid2.css", 6 | "main": "flexboxgrid2.css", 7 | "scripts": { 8 | "build": "grunt", 9 | "prepublish": "npm run build" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git://github.com/evgenyrodionov/flexboxgrid2.git" 14 | }, 15 | "keywords": ["browser", "flexbox", "grid", "css"], 16 | "author": "@evgenyrodionov", 17 | "license": "Apache-2.0", 18 | "bugs": { 19 | "url": "https://github.com/evgenyrodionov/flexboxgrid2/issues" 20 | }, 21 | "files": ["flexboxgrid2.css", "flexboxgrid2.min.css", "src"], 22 | "homepage": "https://github.com/evgenyrodionov/flexboxgrid2", 23 | "devDependencies": { 24 | "grunt": "^0.4.5", 25 | "grunt-autoprefixer": "^3.0.4", 26 | "grunt-contrib-cssmin": "^0.7.0", 27 | "grunt-contrib-htmlmin": "^0.1.3", 28 | "grunt-contrib-uglify": "^0.2.7", 29 | "grunt-contrib-watch": "^0.5.3", 30 | "grunt-myth": "^1.0.1", 31 | "grunt-processhtml": "^0.2.9" 32 | }, 33 | "dependencies": { 34 | "normalize.css": "^7.0.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # flexboxgrid2 2 | [![npm version](https://badge.fury.io/js/flexboxgrid2.svg)](https://badge.fury.io/js/flexboxgrid2) 3 | 4 | Modern 12 column grid system based on flex property. 5 | 6 | → [Documentation](https://evgenyrodionov.github.io/flexboxgrid2/) 7 | 8 | ## Motivation 9 | Forked from [kristoferjoseph/flexboxgrid](https://github.com/kristoferjoseph/flexboxgrid) because original project seems abandoned ([kristoferjoseph/flexboxgrid#236](https://github.com/kristoferjoseph/flexboxgrid/pull/236), [kristoferjoseph/flexboxgrid#229](https://github.com/kristoferjoseph/flexboxgrid/pull/229), [kristoferjoseph/flexboxgrid#211](https://github.com/kristoferjoseph/flexboxgrid/pull/211), etc). 10 | 11 | ## Breakpoints 12 | - `xs`: 0..575px 13 | - `sm`: 576..767px 14 | - `md`: 768..991px 15 | - `lg`: 992..1199px 16 | - `xl`: 1200px+ 17 | - `.container` padding: 8px 18 | - `.container` width: $breakpoint - 16px 19 | - `.col-*` padding: 8px 20 | 21 | ## Install 22 | ### yarn 23 | `yarn add flexboxgrid2` 24 | 25 | ### npm 26 | `npm i -S flexboxgrid2` 27 | 28 | # Usage 29 | ### webpack 30 | ```js 31 | import 'flexboxgrid2' 32 | // or if you use airbnb-config-eslint which explicitly wants .css extension 33 | import 'flexboxgrid2/flexboxgrid2.css' 34 | ``` 35 | 36 | ### unpkg.com CDN 37 | ```html 38 | 39 | ``` 40 | 41 | Replace `[version]` with current version, f.e. `7.2.1` 42 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /*global module:false*/ 2 | 3 | module.exports = function(grunt) { 4 | grunt.initConfig({ 5 | myth: { 6 | compile: { 7 | expand: true, 8 | cwd: "css", 9 | src: ["*.css", "!*.min.css"], 10 | dest: "css", 11 | ext: ".css" 12 | }, 13 | release: { 14 | files: { 15 | "flexboxgrid2.css": "src/flexboxgrid2.css", 16 | "dist/flexboxgrid2.css": "src/flexboxgrid2.css" 17 | } 18 | } 19 | }, 20 | cssmin: { 21 | concat: { 22 | files: { 23 | "docs/style.css": [ 24 | "node_modules/normalize.css/normalize.css", 25 | "docs/src/style.css", 26 | "flexboxgrid2.css" 27 | ] 28 | } 29 | }, 30 | minify: { 31 | expand: true, 32 | cwd: "css", 33 | src: ["*.css", "!*.min.css"], 34 | dest: "css", 35 | ext: ".min.css" 36 | }, 37 | release: { 38 | expand: true, 39 | src: ["flexboxgrid2.css", "dist/flexboxgrid2.css"], 40 | ext: ".min.css" 41 | } 42 | }, 43 | processhtml: { 44 | dist: { 45 | options: { 46 | process: true 47 | }, 48 | files: { 49 | "docs/index.html": ["docs/src/index.html"] 50 | } 51 | } 52 | }, 53 | htmlmin: { 54 | dist: { 55 | options: { 56 | removeComments: true, 57 | collapseWhitespace: true 58 | }, 59 | files: { 60 | "docs/index.html": ["docs/index.html"] 61 | } 62 | } 63 | }, 64 | watch: { 65 | css: { 66 | files: "src/**/*", 67 | tasks: ["default"] 68 | }, 69 | livereload: { 70 | options: { 71 | livereload: true 72 | }, 73 | files: ["index.html", "css/*.css", "js/*.js", "img/*"] 74 | } 75 | } 76 | }); 77 | 78 | // These plugins provide necessary tasks. 79 | grunt.loadNpmTasks("grunt-myth"); 80 | grunt.loadNpmTasks("grunt-contrib-cssmin"); 81 | grunt.loadNpmTasks("grunt-contrib-watch"); 82 | grunt.loadNpmTasks("grunt-processhtml"); 83 | grunt.loadNpmTasks("grunt-contrib-htmlmin"); 84 | 85 | // Default task. 86 | grunt.registerTask("default", [ 87 | "myth", 88 | "cssmin:concat", 89 | "cssmin:minify", 90 | "cssmin:release", 91 | "processhtml", 92 | "htmlmin" 93 | ]); 94 | grunt.registerTask("watch", ["watch"]); 95 | }; 96 | -------------------------------------------------------------------------------- /docs/src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | font-size: 18px; 6 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, 7 | sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 8 | font-weight: normal; 9 | background: #eee; 10 | line-height: 1.4rem; 11 | } 12 | h1, 13 | h2, 14 | h3, 15 | h4, 16 | h5, 17 | h6 { 18 | font-family: "Chivo", "HelveticaNeue-Light", "Helvetica Neue Light", 19 | "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 20 | color: #001a33; 21 | } 22 | h2 { 23 | font-size: 2rem; 24 | margin: 1rem 0; 25 | } 26 | :focus { 27 | outline-color: transparent; 28 | outline-style: none; 29 | } 30 | h2 + p { 31 | margin: 0 0 2rem 0; 32 | } 33 | a { 34 | text-decoration: none; 35 | color: #007fff; 36 | padding: 0 0 .2rem 0; 37 | font-weight: bold; 38 | } 39 | a:hover { 40 | color: #007fff; 41 | } 42 | pre { 43 | overflow-x: auto; 44 | padding: 1.25em; 45 | margin: 1.6em 0; 46 | font-size: .875em; 47 | background: #fcfcfc; 48 | white-space: pre; 49 | word-wrap: normal; 50 | } 51 | code { 52 | color: #007fff; 53 | } 54 | .layout { 55 | display: flex; 56 | min-height: 100vh; 57 | flex-direction: column; 58 | } 59 | .page { 60 | z-index: 0; 61 | background: #eee; 62 | } 63 | .wrap { 64 | box-sizing: border-box; 65 | max-width: 1200px; 66 | margin: 0 auto; 67 | } 68 | .page-section { 69 | padding-top: 3rem; 70 | margin-bottom: 3rem; 71 | } 72 | .page-features { 73 | width: 100%; 74 | background: hsl(209, 100%, 10%); 75 | overflow: scroll; 76 | } 77 | .hero { 78 | box-sizing: border-box; 79 | padding: 2rem; 80 | background: #fff; 81 | border: 1px solid #fff; 82 | border-radius: 2px; 83 | } 84 | .hero-headline { 85 | font-size: 3rem; 86 | line-height: 3rem; 87 | white-space: nowrap; 88 | margin-bottom: .5rem; 89 | margin-top: 1rem; 90 | } 91 | .hero-copy { 92 | font-size: 1rem; 93 | margin-top: 0; 94 | margin-bottom: 1rem; 95 | padding: 0 2rem; 96 | text-align: center; 97 | } 98 | .link-top { 99 | align-self: flex-end; 100 | } 101 | .button { 102 | display: inline-block; 103 | min-width: 9rem; 104 | padding: .5rem 0; 105 | margin: 0; 106 | border: 2px solid #007fff; 107 | border-radius: 3px; 108 | color: #007fff; 109 | font-size: 1rem; 110 | line-height: 1.6; 111 | background-color: transparent; 112 | transition: background-color, 0.15s; 113 | } 114 | .button:hover { 115 | background: #3399ff; 116 | border-color: #3399ff; 117 | color: #fff; 118 | text-shadow: 0 1px #007fff; 119 | } 120 | .button:active { 121 | background: #007fff; 122 | color: #fff; 123 | border-top: 2px solid #0066cc; 124 | } 125 | .box-row, 126 | .box-first, 127 | .box-nested, 128 | .box-large, 129 | .box { 130 | box-sizing: border-box; 131 | position: relative; 132 | box-sizing: border-box; 133 | min-height: 1.5rem; 134 | padding: .25rem; 135 | margin-bottom: 0; 136 | background: #007fff; 137 | border-radius: 2px; 138 | overflow: hidden; 139 | text-align: center; 140 | color: white; 141 | } 142 | .box-row { 143 | margin-bottom: 1rem; 144 | } 145 | .box-first { 146 | background: #0066cc; 147 | border-color: #007fff; 148 | } 149 | .box-nested { 150 | background: #003366; 151 | border-color: #007fff; 152 | } 153 | .box-large { 154 | height: 8rem; 155 | } 156 | .box-container { 157 | box-sizing: border-box; 158 | padding: .5rem; 159 | } 160 | .page-footer { 161 | box-sizing: border-box; 162 | padding-bottom: 3rem; 163 | } 164 | .end { 165 | text-align: end; 166 | } 167 | @media only screen and (min-width: 48rem) { 168 | body { 169 | font-size: 16px; 170 | } 171 | .hero-headline { 172 | font-size: 6rem; 173 | line-height: 6rem; 174 | margin-bottom: 2rem; 175 | margin-top: 3rem; 176 | } 177 | .hero-copy { 178 | font-size: 1.25rem; 179 | margin-bottom: 2rem; 180 | } 181 | .button { 182 | min-width: 11rem; 183 | margin: .5rem 1rem; 184 | font-size: 1.25rem; 185 | } 186 | .box-row, 187 | .box-first, 188 | .box-nested, 189 | .box-large, 190 | .box { 191 | padding: 1rem; 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | flexboxgrid2

flexboxgrid2

A grid system based on the flex display property.

Github

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg & xl viewport widths.

<div class="row">
 31 |     <div class="col-xs-12
 32 |                 col-sm-8
 33 |                 col-md-6
 34 |                 col-lg-4
 35 |                 col-xl-2">
 36 |         <div>Responsive</div>
 37 |     </div>
 38 | </div>

Fluid

Percent based widths allow fluid resizing of columns and rows.

.col-xs-6 {
 39 |   flex-basis: 50%;
 40 | }

Simple Syntax

All you need to remember is row, column, content.

<div class="row">
 41 |     <div class="col-xs-12">
 42 |         <div>12</div>
 43 |     </div>
 44 | </div>

Offsets

Offset a column

<div class="row">
 45 |     <div class="col-xs-offset-3 col-xs-9">
 46 |         <div>offset</div>
 47 |     </div>
 48 | </div>

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

<div class="row">
 49 |     <div class="col-xs">
 50 |         <div>auto</div>
 51 |     </div>
 52 | </div>

Nested Grids

Nest grids inside grids inside grids.

<div class="row">
 53 |     <div class="col-xs">
 54 |         <div>
 55 |             <div class="row">
 56 |                 <div class="col-xs">
 57 |                     <div>auto</div>
 58 |                 </div>
 59 |             </div>
 60 |         </div>
 61 |     </div>
 62 | </div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

<div class="row start-xs">
 63 |     <div class="col-xs-6">
 64 |         <div>
 65 |             start
 66 |         </div>
 67 |     </div>
 68 | </div>
 69 |

.center-

<div class="row center-xs">
 70 |     <div class="col-xs-6">
 71 |         <div>
 72 |             start
 73 |         </div>
 74 |     </div>
 75 | </div>
 76 |

.end-

<div class="row end-xs">
 77 |     <div class="col-xs-6">
 78 |         <div>
 79 |             end
 80 |         </div>
 81 |     </div>
 82 | </div>
 83 |

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

<div class="row center-xs end-sm start-lg">
 84 |     <div class="col-xs-6">
 85 |         <div>
 86 |             All together now
 87 |         </div>
 88 |     </div>
 89 | </div>
 90 |

.top-

<div class="row top-xs">
 91 |     <div class="col-xs-6">
 92 |         <div>
 93 |             top
 94 |         </div>
 95 |     </div>
 96 | </div>
 97 |

.middle-

<div class="row middle-xs">
 98 |     <div class="col-xs-6">
 99 |         <div>
100 |             center
101 |         </div>
102 |     </div>
103 | </div>
104 |

.bottom-

<div class="row bottom-xs">
105 |     <div class="col-xs-6">
106 |         <div>
107 |             bottom
108 |         </div>
109 |     </div>
110 | </div>
111 |

Distribution

Add classes to distribute the contents of a row or column.

.around-

<div class="row around-xs">
112 |     <div class="col-xs-2">
113 |         <div>
114 |             around
115 |         </div>
116 |     </div>
117 |     <div class="col-xs-2">
118 |         <div>
119 |             around
120 |         </div>
121 |     </div>
122 |     <div class="col-xs-2">
123 |         <div>
124 |             around
125 |         </div>
126 |     </div>
127 | </div>
128 |

.between-

<div class="row between-xs">
129 |     <div class="col-xs-2">
130 |         <div>
131 |             between
132 |         </div>
133 |     </div>
134 |     <div class="col-xs-2">
135 |         <div>
136 |             between
137 |         </div>
138 |     </div>
139 |     <div class="col-xs-2">
140 |         <div>
141 |             between
142 |         </div>
143 |     </div>
144 | </div>
145 |

Reordering

Add classes to reorder columns.

.first-

Forces a column to appear first.

1
2
3
4
5
6
<div class="row">
146 |     <div class="col-xs-2">
147 |         <div>
148 |             1
149 |         </div>
150 |     </div>
151 |     <div class="col-xs-2">
152 |         <div>
153 |             2
154 |         </div>
155 |     </div>
156 |     <div class="col-xs-2 first-xs">
157 |         <div>
158 |             3
159 |         </div>
160 |     </div>
161 | </div>
162 |

.last-

Forces a column to appear last.

1
2
3
4
5
6
<div class="row">
163 |     <div class="col-xs-2 last-xs">
164 |         <div>
165 |             1
166 |         </div>
167 |     </div>
168 |     <div class="col-xs-2">
169 |         <div>
170 |             2
171 |         </div>
172 |     </div>
173 |     <div class="col-xs-2">
174 |         <div>
175 |             3
176 |         </div>
177 |     </div>
178 | </div>
179 |

.initial-order-

Resets a column to its initial order.

1
2
3
4
5
6
<div class="row">
180 |     <div class="col-xs-2">
181 |         <div>
182 |             1
183 |         </div>
184 |     </div>
185 |     <div class="col-xs-2">
186 |         <div>
187 |             2
188 |         </div>
189 |     </div>
190 |     <div class="col-xs-2 first-xs initial-order-sm">
191 |         <div>
192 |             3
193 |         </div>
194 |     </div>
195 | </div>

Reversing

.reverse

1
2
3
4
5
6
<div class="row reverse">
196 |     <div class="col-xs-2">
197 |         <div>
198 |             1
199 |         </div>
200 |     </div>
201 |     <div class="col-xs-2">
202 |         <div>
203 |             2
204 |         </div>
205 |     </div>
206 |     <div class="col-xs-2">
207 |         <div>
208 |             3
209 |         </div>
210 |     </div>
211 | </div>
212 |

Hiding

Add one or more breakpoint modifiers to hide columns based on the viewport.

.hidden-

md
<div class="row">
213 |     <div class="col-xs">
214 |         <div class="hidden-xs">
215 |             xs
216 |         </div>
217 |     </div>
218 |     <div class="col-xs">
219 |         <div class="hidden-sm">
220 |             sm
221 |         </div>
222 |     </div>
223 |     <div class="col-xs">
224 |         <div class="hidden-md">
225 |             md
226 |         </div>
227 |     </div>
228 |     <div class="col-xs">
229 |         <div class="hidden-lg">
230 |             lg
231 |         </div>
232 |     </div>
233 |     <div class="col-xs">
234 |         <div class="hidden-xl">
235 |             xl
236 |         </div>
237 |     </div>
238 | </div>
-------------------------------------------------------------------------------- /docs/style.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}body{box-sizing:border-box;padding:0;margin:0;font-size:18px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-weight:400;background:#eee;line-height:1.4rem}h1,h2,h3,h4,h5,h6{font-family:Chivo,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;color:#001a33}h2{font-size:2rem;margin:1rem 0}:focus{outline-color:transparent;outline-style:none}h2+p{margin:0 0 2rem}a{text-decoration:none;color:#007fff;padding:0 0 .2rem;font-weight:700}a:hover{color:#007fff}pre{overflow-x:auto;padding:1.25em;margin:1.6em 0;font-size:.875em;background:#fcfcfc;white-space:pre;word-wrap:normal}code{color:#007fff}.layout{display:flex;min-height:100vh;flex-direction:column}.page{z-index:0;background:#eee}.wrap{box-sizing:border-box;max-width:1200px;margin:0 auto}.page-section{padding-top:3rem;margin-bottom:3rem}.page-features{width:100%;background:#001a33;overflow:scroll}.hero{box-sizing:border-box;padding:2rem;background:#fff;border:1px solid #fff;border-radius:2px}.hero-headline{font-size:3rem;line-height:3rem;white-space:nowrap;margin-bottom:.5rem;margin-top:1rem}.hero-copy{font-size:1rem;margin-top:0;margin-bottom:1rem;padding:0 2rem;text-align:center}.link-top{align-self:flex-end}.button{display:inline-block;min-width:9rem;padding:.5rem 0;margin:0;border:2px solid #007fff;border-radius:3px;color:#007fff;font-size:1rem;line-height:1.6;background-color:transparent;transition:background-color,.15s}.button:hover{background:#39f;border-color:#39f;color:#fff;text-shadow:0 1px #007fff}.button:active{background:#007fff;color:#fff;border-top:2px solid #06c}.box,.box-first,.box-large,.box-nested,.box-row{position:relative;box-sizing:border-box;min-height:1.5rem;padding:.25rem;margin-bottom:0;background:#007fff;border-radius:2px;overflow:hidden;text-align:center;color:#fff}.box-row{margin-bottom:1rem}.box-first{background:#06c;border-color:#007fff}.box-nested{background:#036;border-color:#007fff}.box-large{height:8rem}.box-container{box-sizing:border-box;padding:.5rem}.page-footer{box-sizing:border-box;padding-bottom:3rem}.end{text-align:end}@media only screen and (min-width:48rem){body{font-size:16px}.hero-headline{font-size:6rem;line-height:6rem;margin-bottom:2rem;margin-top:3rem}.hero-copy{font-size:1.25rem;margin-bottom:2rem}.button{min-width:11rem;margin:.5rem 1rem;font-size:1.25rem}.box,.box-first,.box-large,.box-nested,.box-row{padding:1rem}}.container{box-sizing:border-box;margin-left:auto;margin-right:auto;padding-right:8px;padding-left:8px}.container-fluid{padding-right:16px;padding-left:16px}@media only screen and (min-width:576px){.container{width:560px;max-width:100%}}@media only screen and (min-width:768px){.container{width:752px;max-width:100%}}@media only screen and (min-width:992px){.container{width:976px;max-width:100%}}@media only screen and (min-width:1200px){.container{width:1184px;max-width:100%}}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-8px;margin-left:-8px}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-offset-0,.col-xl-offset-1,.col-xl-offset-10,.col-xl-offset-11,.col-xl-offset-12,.col-xl-offset-2,.col-xl-offset-3,.col-xl-offset-4,.col-xl-offset-5,.col-xl-offset-6,.col-xl-offset-7,.col-xl-offset-8,.col-xl-offset-9,.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-preferred-size:100%;flex-basis:100%;padding-right:8px;padding-left:8px;max-width:100%}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.initial-order-xs{-webkit-box-ordinal-group:NaN;-ms-flex-order:initial;order:initial}@media only screen and (min-width:576px){.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.initial-order-sm{-webkit-box-ordinal-group:NaN;-ms-flex-order:initial;order:initial}}@media only screen and (min-width:768px){.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:8px;padding-left:8px}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.initial-order-md{-webkit-box-ordinal-group:NaN;-ms-flex-order:initial;order:initial}}@media only screen and (min-width:992px){.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:8px;padding-left:8px}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.initial-order-lg{-webkit-box-ordinal-group:NaN;-ms-flex-order:initial;order:initial}}@media only screen and (min-width:1200px){.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-offset-0,.col-xl-offset-1,.col-xl-offset-10,.col-xl-offset-11,.col-xl-offset-12,.col-xl-offset-2,.col-xl-offset-3,.col-xl-offset-4,.col-xl-offset-5,.col-xl-offset-6,.col-xl-offset-7,.col-xl-offset-8,.col-xl-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:8px;padding-left:8px}.col-xl{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xl-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xl-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xl-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xl-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xl-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xl-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xl-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xl-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xl-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xl-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xl-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xl-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xl-offset-0{margin-left:0}.col-xl-offset-1{margin-left:8.33333333%}.col-xl-offset-2{margin-left:16.66666667%}.col-xl-offset-3{margin-left:25%}.col-xl-offset-4{margin-left:33.33333333%}.col-xl-offset-5{margin-left:41.66666667%}.col-xl-offset-6{margin-left:50%}.col-xl-offset-7{margin-left:58.33333333%}.col-xl-offset-8{margin-left:66.66666667%}.col-xl-offset-9{margin-left:75%}.col-xl-offset-10{margin-left:83.33333333%}.col-xl-offset-11{margin-left:91.66666667%}.start-xl{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xl{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xl{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xl{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xl{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xl{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xl{-ms-flex-pack:distribute;justify-content:space-around}.between-xl{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xl{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xl{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.initial-order-xl{-webkit-box-ordinal-group:NaN;-ms-flex-order:initial;order:initial}}@media only screen and (max-width:575px){.hidden-xs{display:none}}@media only screen and (min-width:576px) and (max-width:767px){.hidden-sm{display:none}}@media only screen and (min-width:768px) and (max-width:991px){.hidden-md{display:none}}@media only screen and (min-width:992px) and (max-width:1199px){.hidden-lg{display:none}}@media only screen and (min-width:1200px){.hidden-xl{display:none}} -------------------------------------------------------------------------------- /src/flexboxgrid2.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gutter-width: 16px; 3 | --outer-margin: 32px; 4 | --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1); 5 | --half-gutter-width: calc((var(--gutter-width) * 0.5)); 6 | --xs-min: 0rem; 7 | --sm-min: 576px; 8 | --md-min: 768px; 9 | --lg-min: 992px; 10 | --xl-min: 1200px; 11 | } 12 | 13 | @custom-media --sm-viewport only screen and (min-width: 576px); 14 | @custom-media --md-viewport only screen and (min-width: 768px); 15 | @custom-media --lg-viewport only screen and (min-width: 992px); 16 | @custom-media --xl-viewport only screen and (min-width: 1200px); 17 | 18 | @custom-media --xs-only only screen and (max-width: 575px); 19 | @custom-media --sm-only only screen and (min-width: 576px) and (max-width: 767px); 20 | @custom-media --md-only only screen and (min-width: 768px) and (max-width: 991px); 21 | @custom-media --lg-only only screen and (min-width: 992px) and (max-width: 1199px); 22 | @custom-media --xl-only only screen and (min-width: 1200px); 23 | 24 | .container { 25 | box-sizing: border-box; 26 | margin-left: auto; 27 | margin-right: auto; 28 | padding-right: 8px; 29 | padding-left: 8px; 30 | } 31 | 32 | .container-fluid { 33 | padding-right: var(--gutter-width, 16px); 34 | padding-left: var(--gutter-width, 16px); 35 | } 36 | 37 | @media (--sm-viewport) { 38 | .container { 39 | width: calc(var(--sm-min) - var(--gutter-width)); 40 | max-width: 100%; 41 | } 42 | } 43 | 44 | @media (--md-viewport) { 45 | .container { 46 | width: calc(var(--md-min) - var(--gutter-width)); 47 | max-width: 100%; 48 | } 49 | } 50 | 51 | @media (--lg-viewport) { 52 | .container { 53 | width: calc(var(--lg-min) - var(--gutter-width)); 54 | max-width: 100%; 55 | } 56 | } 57 | 58 | @media (--xl-viewport) { 59 | .container { 60 | width: calc(var(--xl-min) - var(--gutter-width)); 61 | max-width: 100%; 62 | } 63 | } 64 | 65 | .row { 66 | box-sizing: border-box; 67 | display: flex; 68 | flex: 0 1 auto; 69 | flex-direction: row; 70 | flex-wrap: wrap; 71 | margin-right: var(--gutter-compensation, -08px); 72 | margin-left: var(--gutter-compensation, -08px); 73 | } 74 | 75 | .row.reverse { 76 | flex-direction: row-reverse; 77 | } 78 | 79 | .col.reverse { 80 | flex-direction: column-reverse; 81 | } 82 | 83 | .col-xs, 84 | .col-xs-1, 85 | .col-xs-2, 86 | .col-xs-3, 87 | .col-xs-4, 88 | .col-xs-5, 89 | .col-xs-6, 90 | .col-xs-7, 91 | .col-xs-8, 92 | .col-xs-9, 93 | .col-xs-10, 94 | .col-xs-11, 95 | .col-xs-12, 96 | .col-xs-offset-0, 97 | .col-xs-offset-1, 98 | .col-xs-offset-2, 99 | .col-xs-offset-3, 100 | .col-xs-offset-4, 101 | .col-xs-offset-5, 102 | .col-xs-offset-6, 103 | .col-xs-offset-7, 104 | .col-xs-offset-8, 105 | .col-xs-offset-9, 106 | .col-xs-offset-10, 107 | .col-xs-offset-11, 108 | .col-xs-offset-12, 109 | .col-sm, 110 | .col-sm-1, 111 | .col-sm-2, 112 | .col-sm-3, 113 | .col-sm-4, 114 | .col-sm-5, 115 | .col-sm-6, 116 | .col-sm-7, 117 | .col-sm-8, 118 | .col-sm-9, 119 | .col-sm-10, 120 | .col-sm-11, 121 | .col-sm-12, 122 | .col-sm-offset-0, 123 | .col-sm-offset-1, 124 | .col-sm-offset-2, 125 | .col-sm-offset-3, 126 | .col-sm-offset-4, 127 | .col-sm-offset-5, 128 | .col-sm-offset-6, 129 | .col-sm-offset-7, 130 | .col-sm-offset-8, 131 | .col-sm-offset-9, 132 | .col-sm-offset-10, 133 | .col-sm-offset-11, 134 | .col-sm-offset-12, 135 | .col-md, 136 | .col-md-1, 137 | .col-md-2, 138 | .col-md-3, 139 | .col-md-4, 140 | .col-md-5, 141 | .col-md-6, 142 | .col-md-7, 143 | .col-md-8, 144 | .col-md-9, 145 | .col-md-10, 146 | .col-md-11, 147 | .col-md-12, 148 | .col-md-offset-0, 149 | .col-md-offset-1, 150 | .col-md-offset-2, 151 | .col-md-offset-3, 152 | .col-md-offset-4, 153 | .col-md-offset-5, 154 | .col-md-offset-6, 155 | .col-md-offset-7, 156 | .col-md-offset-8, 157 | .col-md-offset-9, 158 | .col-md-offset-10, 159 | .col-md-offset-11, 160 | .col-md-offset-12, 161 | .col-lg, 162 | .col-lg-1, 163 | .col-lg-2, 164 | .col-lg-3, 165 | .col-lg-4, 166 | .col-lg-5, 167 | .col-lg-6, 168 | .col-lg-7, 169 | .col-lg-8, 170 | .col-lg-9, 171 | .col-lg-10, 172 | .col-lg-11, 173 | .col-lg-12, 174 | .col-lg-offset-0, 175 | .col-lg-offset-1, 176 | .col-lg-offset-2, 177 | .col-lg-offset-3, 178 | .col-lg-offset-4, 179 | .col-lg-offset-5, 180 | .col-lg-offset-6, 181 | .col-lg-offset-7, 182 | .col-lg-offset-8, 183 | .col-lg-offset-9, 184 | .col-lg-offset-10, 185 | .col-lg-offset-11, 186 | .col-lg-offset-12, 187 | .col-xl, 188 | .col-xl-1, 189 | .col-xl-2, 190 | .col-xl-3, 191 | .col-xl-4, 192 | .col-xl-5, 193 | .col-xl-6, 194 | .col-xl-7, 195 | .col-xl-8, 196 | .col-xl-9, 197 | .col-xl-10, 198 | .col-xl-11, 199 | .col-xl-12, 200 | .col-xl-offset-0, 201 | .col-xl-offset-1, 202 | .col-xl-offset-2, 203 | .col-xl-offset-3, 204 | .col-xl-offset-4, 205 | .col-xl-offset-5, 206 | .col-xl-offset-6, 207 | .col-xl-offset-7, 208 | .col-xl-offset-8, 209 | .col-xl-offset-9, 210 | .col-xl-offset-10, 211 | .col-xl-offset-11, 212 | .col-xl-offset-12 { 213 | box-sizing: border-box; 214 | flex: 0 0 auto; 215 | flex-basis: 100%; 216 | padding-right: var(--half-gutter-width, 8px); 217 | padding-left: var(--half-gutter-width, 8px); 218 | max-width: 100%; 219 | } 220 | 221 | .col-xs { 222 | flex-grow: 1; 223 | flex-basis: 0; 224 | max-width: 100%; 225 | } 226 | 227 | .col-xs-1 { 228 | flex-basis: 8.33333333%; 229 | max-width: 8.33333333%; 230 | } 231 | 232 | .col-xs-2 { 233 | flex-basis: 16.66666667%; 234 | max-width: 16.66666667%; 235 | } 236 | 237 | .col-xs-3 { 238 | flex-basis: 25%; 239 | max-width: 25%; 240 | } 241 | 242 | .col-xs-4 { 243 | flex-basis: 33.33333333%; 244 | max-width: 33.33333333%; 245 | } 246 | 247 | .col-xs-5 { 248 | flex-basis: 41.66666667%; 249 | max-width: 41.66666667%; 250 | } 251 | 252 | .col-xs-6 { 253 | flex-basis: 50%; 254 | max-width: 50%; 255 | } 256 | 257 | .col-xs-7 { 258 | flex-basis: 58.33333333%; 259 | max-width: 58.33333333%; 260 | } 261 | 262 | .col-xs-8 { 263 | flex-basis: 66.66666667%; 264 | max-width: 66.66666667%; 265 | } 266 | 267 | .col-xs-9 { 268 | flex-basis: 75%; 269 | max-width: 75%; 270 | } 271 | 272 | .col-xs-10 { 273 | flex-basis: 83.33333333%; 274 | max-width: 83.33333333%; 275 | } 276 | 277 | .col-xs-11 { 278 | flex-basis: 91.66666667%; 279 | max-width: 91.66666667%; 280 | } 281 | 282 | .col-xs-12 { 283 | flex-basis: 100%; 284 | max-width: 100%; 285 | } 286 | 287 | .col-xs-offset-0 { 288 | margin-left: 0; 289 | } 290 | 291 | .col-xs-offset-1 { 292 | margin-left: 8.33333333%; 293 | } 294 | 295 | .col-xs-offset-2 { 296 | margin-left: 16.66666667%; 297 | } 298 | 299 | .col-xs-offset-3 { 300 | margin-left: 25%; 301 | } 302 | 303 | .col-xs-offset-4 { 304 | margin-left: 33.33333333%; 305 | } 306 | 307 | .col-xs-offset-5 { 308 | margin-left: 41.66666667%; 309 | } 310 | 311 | .col-xs-offset-6 { 312 | margin-left: 50%; 313 | } 314 | 315 | .col-xs-offset-7 { 316 | margin-left: 58.33333333%; 317 | } 318 | 319 | .col-xs-offset-8 { 320 | margin-left: 66.66666667%; 321 | } 322 | 323 | .col-xs-offset-9 { 324 | margin-left: 75%; 325 | } 326 | 327 | .col-xs-offset-10 { 328 | margin-left: 83.33333333%; 329 | } 330 | 331 | .col-xs-offset-11 { 332 | margin-left: 91.66666667%; 333 | } 334 | 335 | .start-xs { 336 | justify-content: flex-start; 337 | text-align: start; 338 | } 339 | 340 | .center-xs { 341 | justify-content: center; 342 | text-align: center; 343 | } 344 | 345 | .end-xs { 346 | justify-content: flex-end; 347 | text-align: end; 348 | } 349 | 350 | .top-xs { 351 | align-items: flex-start; 352 | } 353 | 354 | .middle-xs { 355 | align-items: center; 356 | } 357 | 358 | .bottom-xs { 359 | align-items: flex-end; 360 | } 361 | 362 | .around-xs { 363 | justify-content: space-around; 364 | } 365 | 366 | .between-xs { 367 | justify-content: space-between; 368 | } 369 | 370 | .first-xs { 371 | order: -1; 372 | } 373 | 374 | .last-xs { 375 | order: 1; 376 | } 377 | 378 | .initial-order-xs { 379 | order: initial; 380 | } 381 | 382 | @media (--sm-viewport) { 383 | .col-sm { 384 | flex-grow: 1; 385 | flex-basis: 0; 386 | max-width: 100%; 387 | } 388 | 389 | .col-sm-1 { 390 | flex-basis: 8.33333333%; 391 | max-width: 8.33333333%; 392 | } 393 | 394 | .col-sm-2 { 395 | flex-basis: 16.66666667%; 396 | max-width: 16.66666667%; 397 | } 398 | 399 | .col-sm-3 { 400 | flex-basis: 25%; 401 | max-width: 25%; 402 | } 403 | 404 | .col-sm-4 { 405 | flex-basis: 33.33333333%; 406 | max-width: 33.33333333%; 407 | } 408 | 409 | .col-sm-5 { 410 | flex-basis: 41.66666667%; 411 | max-width: 41.66666667%; 412 | } 413 | 414 | .col-sm-6 { 415 | flex-basis: 50%; 416 | max-width: 50%; 417 | } 418 | 419 | .col-sm-7 { 420 | flex-basis: 58.33333333%; 421 | max-width: 58.33333333%; 422 | } 423 | 424 | .col-sm-8 { 425 | flex-basis: 66.66666667%; 426 | max-width: 66.66666667%; 427 | } 428 | 429 | .col-sm-9 { 430 | flex-basis: 75%; 431 | max-width: 75%; 432 | } 433 | 434 | .col-sm-10 { 435 | flex-basis: 83.33333333%; 436 | max-width: 83.33333333%; 437 | } 438 | 439 | .col-sm-11 { 440 | flex-basis: 91.66666667%; 441 | max-width: 91.66666667%; 442 | } 443 | 444 | .col-sm-12 { 445 | flex-basis: 100%; 446 | max-width: 100%; 447 | } 448 | 449 | .col-sm-offset-0 { 450 | margin-left: 0; 451 | } 452 | 453 | .col-sm-offset-1 { 454 | margin-left: 8.33333333%; 455 | } 456 | 457 | .col-sm-offset-2 { 458 | margin-left: 16.66666667%; 459 | } 460 | 461 | .col-sm-offset-3 { 462 | margin-left: 25%; 463 | } 464 | 465 | .col-sm-offset-4 { 466 | margin-left: 33.33333333%; 467 | } 468 | 469 | .col-sm-offset-5 { 470 | margin-left: 41.66666667%; 471 | } 472 | 473 | .col-sm-offset-6 { 474 | margin-left: 50%; 475 | } 476 | 477 | .col-sm-offset-7 { 478 | margin-left: 58.33333333%; 479 | } 480 | 481 | .col-sm-offset-8 { 482 | margin-left: 66.66666667%; 483 | } 484 | 485 | .col-sm-offset-9 { 486 | margin-left: 75%; 487 | } 488 | 489 | .col-sm-offset-10 { 490 | margin-left: 83.33333333%; 491 | } 492 | 493 | .col-sm-offset-11 { 494 | margin-left: 91.66666667%; 495 | } 496 | 497 | .start-sm { 498 | justify-content: flex-start; 499 | text-align: start; 500 | } 501 | 502 | .center-sm { 503 | justify-content: center; 504 | text-align: center; 505 | } 506 | 507 | .end-sm { 508 | justify-content: flex-end; 509 | text-align: end; 510 | } 511 | 512 | .top-sm { 513 | align-items: flex-start; 514 | } 515 | 516 | .middle-sm { 517 | align-items: center; 518 | } 519 | 520 | .bottom-sm { 521 | align-items: flex-end; 522 | } 523 | 524 | .around-sm { 525 | justify-content: space-around; 526 | } 527 | 528 | .between-sm { 529 | justify-content: space-between; 530 | } 531 | 532 | .first-sm { 533 | order: -1; 534 | } 535 | 536 | .last-sm { 537 | order: 1; 538 | } 539 | 540 | .initial-order-sm { 541 | order: initial; 542 | } 543 | } 544 | 545 | @media (--md-viewport) { 546 | .col-md, 547 | .col-md-1, 548 | .col-md-2, 549 | .col-md-3, 550 | .col-md-4, 551 | .col-md-5, 552 | .col-md-6, 553 | .col-md-7, 554 | .col-md-8, 555 | .col-md-9, 556 | .col-md-10, 557 | .col-md-11, 558 | .col-md-12, 559 | .col-md-offset-0, 560 | .col-md-offset-1, 561 | .col-md-offset-2, 562 | .col-md-offset-3, 563 | .col-md-offset-4, 564 | .col-md-offset-5, 565 | .col-md-offset-6, 566 | .col-md-offset-7, 567 | .col-md-offset-8, 568 | .col-md-offset-9, 569 | .col-md-offset-10, 570 | .col-md-offset-11, 571 | .col-md-offset-12 { 572 | box-sizing: border-box; 573 | flex: 0 0 auto; 574 | padding-right: var(--half-gutter-width, 08px); 575 | padding-left: var(--half-gutter-width, 08px); 576 | } 577 | 578 | .col-md { 579 | flex-grow: 1; 580 | flex-basis: 0; 581 | max-width: 100%; 582 | } 583 | 584 | .col-md-1 { 585 | flex-basis: 8.33333333%; 586 | max-width: 8.33333333%; 587 | } 588 | 589 | .col-md-2 { 590 | flex-basis: 16.66666667%; 591 | max-width: 16.66666667%; 592 | } 593 | 594 | .col-md-3 { 595 | flex-basis: 25%; 596 | max-width: 25%; 597 | } 598 | 599 | .col-md-4 { 600 | flex-basis: 33.33333333%; 601 | max-width: 33.33333333%; 602 | } 603 | 604 | .col-md-5 { 605 | flex-basis: 41.66666667%; 606 | max-width: 41.66666667%; 607 | } 608 | 609 | .col-md-6 { 610 | flex-basis: 50%; 611 | max-width: 50%; 612 | } 613 | 614 | .col-md-7 { 615 | flex-basis: 58.33333333%; 616 | max-width: 58.33333333%; 617 | } 618 | 619 | .col-md-8 { 620 | flex-basis: 66.66666667%; 621 | max-width: 66.66666667%; 622 | } 623 | 624 | .col-md-9 { 625 | flex-basis: 75%; 626 | max-width: 75%; 627 | } 628 | 629 | .col-md-10 { 630 | flex-basis: 83.33333333%; 631 | max-width: 83.33333333%; 632 | } 633 | 634 | .col-md-11 { 635 | flex-basis: 91.66666667%; 636 | max-width: 91.66666667%; 637 | } 638 | 639 | .col-md-12 { 640 | flex-basis: 100%; 641 | max-width: 100%; 642 | } 643 | 644 | .col-md-offset-0 { 645 | margin-left: 0; 646 | } 647 | 648 | .col-md-offset-1 { 649 | margin-left: 8.33333333%; 650 | } 651 | 652 | .col-md-offset-2 { 653 | margin-left: 16.66666667%; 654 | } 655 | 656 | .col-md-offset-3 { 657 | margin-left: 25%; 658 | } 659 | 660 | .col-md-offset-4 { 661 | margin-left: 33.33333333%; 662 | } 663 | 664 | .col-md-offset-5 { 665 | margin-left: 41.66666667%; 666 | } 667 | 668 | .col-md-offset-6 { 669 | margin-left: 50%; 670 | } 671 | 672 | .col-md-offset-7 { 673 | margin-left: 58.33333333%; 674 | } 675 | 676 | .col-md-offset-8 { 677 | margin-left: 66.66666667%; 678 | } 679 | 680 | .col-md-offset-9 { 681 | margin-left: 75%; 682 | } 683 | 684 | .col-md-offset-10 { 685 | margin-left: 83.33333333%; 686 | } 687 | 688 | .col-md-offset-11 { 689 | margin-left: 91.66666667%; 690 | } 691 | 692 | .start-md { 693 | justify-content: flex-start; 694 | text-align: start; 695 | } 696 | 697 | .center-md { 698 | justify-content: center; 699 | text-align: center; 700 | } 701 | 702 | .end-md { 703 | justify-content: flex-end; 704 | text-align: end; 705 | } 706 | 707 | .top-md { 708 | align-items: flex-start; 709 | } 710 | 711 | .middle-md { 712 | align-items: center; 713 | } 714 | 715 | .bottom-md { 716 | align-items: flex-end; 717 | } 718 | 719 | .around-md { 720 | justify-content: space-around; 721 | } 722 | 723 | .between-md { 724 | justify-content: space-between; 725 | } 726 | 727 | .first-md { 728 | order: -1; 729 | } 730 | 731 | .last-md { 732 | order: 1; 733 | } 734 | 735 | .initial-order-md { 736 | order: initial; 737 | } 738 | } 739 | 740 | @media (--lg-viewport) { 741 | .col-lg, 742 | .col-lg-1, 743 | .col-lg-2, 744 | .col-lg-3, 745 | .col-lg-4, 746 | .col-lg-5, 747 | .col-lg-6, 748 | .col-lg-7, 749 | .col-lg-8, 750 | .col-lg-9, 751 | .col-lg-10, 752 | .col-lg-11, 753 | .col-lg-12, 754 | .col-lg-offset-0, 755 | .col-lg-offset-1, 756 | .col-lg-offset-2, 757 | .col-lg-offset-3, 758 | .col-lg-offset-4, 759 | .col-lg-offset-5, 760 | .col-lg-offset-6, 761 | .col-lg-offset-7, 762 | .col-lg-offset-8, 763 | .col-lg-offset-9, 764 | .col-lg-offset-10, 765 | .col-lg-offset-11, 766 | .col-lg-offset-12 { 767 | box-sizing: border-box; 768 | flex: 0 0 auto; 769 | padding-right: var(--half-gutter-width, 08px); 770 | padding-left: var(--half-gutter-width, 08px); 771 | } 772 | 773 | .col-lg { 774 | flex-grow: 1; 775 | flex-basis: 0; 776 | max-width: 100%; 777 | } 778 | 779 | .col-lg-1 { 780 | flex-basis: 8.33333333%; 781 | max-width: 8.33333333%; 782 | } 783 | 784 | .col-lg-2 { 785 | flex-basis: 16.66666667%; 786 | max-width: 16.66666667%; 787 | } 788 | 789 | .col-lg-3 { 790 | flex-basis: 25%; 791 | max-width: 25%; 792 | } 793 | 794 | .col-lg-4 { 795 | flex-basis: 33.33333333%; 796 | max-width: 33.33333333%; 797 | } 798 | 799 | .col-lg-5 { 800 | flex-basis: 41.66666667%; 801 | max-width: 41.66666667%; 802 | } 803 | 804 | .col-lg-6 { 805 | flex-basis: 50%; 806 | max-width: 50%; 807 | } 808 | 809 | .col-lg-7 { 810 | flex-basis: 58.33333333%; 811 | max-width: 58.33333333%; 812 | } 813 | 814 | .col-lg-8 { 815 | flex-basis: 66.66666667%; 816 | max-width: 66.66666667%; 817 | } 818 | 819 | .col-lg-9 { 820 | flex-basis: 75%; 821 | max-width: 75%; 822 | } 823 | 824 | .col-lg-10 { 825 | flex-basis: 83.33333333%; 826 | max-width: 83.33333333%; 827 | } 828 | 829 | .col-lg-11 { 830 | flex-basis: 91.66666667%; 831 | max-width: 91.66666667%; 832 | } 833 | 834 | .col-lg-12 { 835 | flex-basis: 100%; 836 | max-width: 100%; 837 | } 838 | 839 | .col-lg-offset-0 { 840 | margin-left: 0; 841 | } 842 | 843 | .col-lg-offset-1 { 844 | margin-left: 8.33333333%; 845 | } 846 | 847 | .col-lg-offset-2 { 848 | margin-left: 16.66666667%; 849 | } 850 | 851 | .col-lg-offset-3 { 852 | margin-left: 25%; 853 | } 854 | 855 | .col-lg-offset-4 { 856 | margin-left: 33.33333333%; 857 | } 858 | 859 | .col-lg-offset-5 { 860 | margin-left: 41.66666667%; 861 | } 862 | 863 | .col-lg-offset-6 { 864 | margin-left: 50%; 865 | } 866 | 867 | .col-lg-offset-7 { 868 | margin-left: 58.33333333%; 869 | } 870 | 871 | .col-lg-offset-8 { 872 | margin-left: 66.66666667%; 873 | } 874 | 875 | .col-lg-offset-9 { 876 | margin-left: 75%; 877 | } 878 | 879 | .col-lg-offset-10 { 880 | margin-left: 83.33333333%; 881 | } 882 | 883 | .col-lg-offset-11 { 884 | margin-left: 91.66666667%; 885 | } 886 | 887 | .start-lg { 888 | justify-content: flex-start; 889 | text-align: start; 890 | } 891 | 892 | .center-lg { 893 | justify-content: center; 894 | text-align: center; 895 | } 896 | 897 | .end-lg { 898 | justify-content: flex-end; 899 | text-align: end; 900 | } 901 | 902 | .top-lg { 903 | align-items: flex-start; 904 | } 905 | 906 | .middle-lg { 907 | align-items: center; 908 | } 909 | 910 | .bottom-lg { 911 | align-items: flex-end; 912 | } 913 | 914 | .around-lg { 915 | justify-content: space-around; 916 | } 917 | 918 | .between-lg { 919 | justify-content: space-between; 920 | } 921 | 922 | .first-lg { 923 | order: -1; 924 | } 925 | 926 | .last-lg { 927 | order: 1; 928 | } 929 | 930 | .initial-order-lg { 931 | order: initial; 932 | } 933 | } 934 | 935 | @media (--xl-viewport) { 936 | .col-xl, 937 | .col-xl-1, 938 | .col-xl-2, 939 | .col-xl-3, 940 | .col-xl-4, 941 | .col-xl-5, 942 | .col-xl-6, 943 | .col-xl-7, 944 | .col-xl-8, 945 | .col-xl-9, 946 | .col-xl-10, 947 | .col-xl-11, 948 | .col-xl-12, 949 | .col-xl-offset-0, 950 | .col-xl-offset-1, 951 | .col-xl-offset-2, 952 | .col-xl-offset-3, 953 | .col-xl-offset-4, 954 | .col-xl-offset-5, 955 | .col-xl-offset-6, 956 | .col-xl-offset-7, 957 | .col-xl-offset-8, 958 | .col-xl-offset-9, 959 | .col-xl-offset-10, 960 | .col-xl-offset-11, 961 | .col-xl-offset-12 { 962 | box-sizing: border-box; 963 | flex: 0 0 auto; 964 | padding-right: var(--half-gutter-width, 08px); 965 | padding-left: var(--half-gutter-width, 08px); 966 | } 967 | 968 | .col-xl { 969 | flex-grow: 1; 970 | flex-basis: 0; 971 | max-width: 100%; 972 | } 973 | 974 | .col-xl-1 { 975 | flex-basis: 8.33333333%; 976 | max-width: 8.33333333%; 977 | } 978 | 979 | .col-xl-2 { 980 | flex-basis: 16.66666667%; 981 | max-width: 16.66666667%; 982 | } 983 | 984 | .col-xl-3 { 985 | flex-basis: 25%; 986 | max-width: 25%; 987 | } 988 | 989 | .col-xl-4 { 990 | flex-basis: 33.33333333%; 991 | max-width: 33.33333333%; 992 | } 993 | 994 | .col-xl-5 { 995 | flex-basis: 41.66666667%; 996 | max-width: 41.66666667%; 997 | } 998 | 999 | .col-xl-6 { 1000 | flex-basis: 50%; 1001 | max-width: 50%; 1002 | } 1003 | 1004 | .col-xl-7 { 1005 | flex-basis: 58.33333333%; 1006 | max-width: 58.33333333%; 1007 | } 1008 | 1009 | .col-xl-8 { 1010 | flex-basis: 66.66666667%; 1011 | max-width: 66.66666667%; 1012 | } 1013 | 1014 | .col-xl-9 { 1015 | flex-basis: 75%; 1016 | max-width: 75%; 1017 | } 1018 | 1019 | .col-xl-10 { 1020 | flex-basis: 83.33333333%; 1021 | max-width: 83.33333333%; 1022 | } 1023 | 1024 | .col-xl-11 { 1025 | flex-basis: 91.66666667%; 1026 | max-width: 91.66666667%; 1027 | } 1028 | 1029 | .col-xl-12 { 1030 | flex-basis: 100%; 1031 | max-width: 100%; 1032 | } 1033 | 1034 | .col-xl-offset-0 { 1035 | margin-left: 0; 1036 | } 1037 | 1038 | .col-xl-offset-1 { 1039 | margin-left: 8.33333333%; 1040 | } 1041 | 1042 | .col-xl-offset-2 { 1043 | margin-left: 16.66666667%; 1044 | } 1045 | 1046 | .col-xl-offset-3 { 1047 | margin-left: 25%; 1048 | } 1049 | 1050 | .col-xl-offset-4 { 1051 | margin-left: 33.33333333%; 1052 | } 1053 | 1054 | .col-xl-offset-5 { 1055 | margin-left: 41.66666667%; 1056 | } 1057 | 1058 | .col-xl-offset-6 { 1059 | margin-left: 50%; 1060 | } 1061 | 1062 | .col-xl-offset-7 { 1063 | margin-left: 58.33333333%; 1064 | } 1065 | 1066 | .col-xl-offset-8 { 1067 | margin-left: 66.66666667%; 1068 | } 1069 | 1070 | .col-xl-offset-9 { 1071 | margin-left: 75%; 1072 | } 1073 | 1074 | .col-xl-offset-10 { 1075 | margin-left: 83.33333333%; 1076 | } 1077 | 1078 | .col-xl-offset-11 { 1079 | margin-left: 91.66666667%; 1080 | } 1081 | 1082 | .start-xl { 1083 | justify-content: flex-start; 1084 | text-align: start; 1085 | } 1086 | 1087 | .center-xl { 1088 | justify-content: center; 1089 | text-align: center; 1090 | } 1091 | 1092 | .end-xl { 1093 | justify-content: flex-end; 1094 | text-align: end; 1095 | } 1096 | 1097 | .top-xl { 1098 | align-items: flex-start; 1099 | } 1100 | 1101 | .middle-xl { 1102 | align-items: center; 1103 | } 1104 | 1105 | .bottom-xl { 1106 | align-items: flex-end; 1107 | } 1108 | 1109 | .around-xl { 1110 | justify-content: space-around; 1111 | } 1112 | 1113 | .between-xl { 1114 | justify-content: space-between; 1115 | } 1116 | 1117 | .first-xl { 1118 | order: -1; 1119 | } 1120 | 1121 | .last-xl { 1122 | order: 1; 1123 | } 1124 | 1125 | .initial-order-xl { 1126 | order: initial; 1127 | } 1128 | } 1129 | 1130 | @media (--xs-only) { 1131 | .hidden-xs { 1132 | display: none; 1133 | } 1134 | } 1135 | 1136 | @media (--sm-only) { 1137 | .hidden-sm { 1138 | display: none; 1139 | } 1140 | } 1141 | 1142 | @media (--md-only) { 1143 | .hidden-md { 1144 | display: none; 1145 | } 1146 | } 1147 | 1148 | @media (--lg-only) { 1149 | .hidden-lg { 1150 | display: none; 1151 | } 1152 | } 1153 | 1154 | @media (--xl-only) { 1155 | .hidden-xl { 1156 | display: none; 1157 | } 1158 | } 1159 | -------------------------------------------------------------------------------- /docs/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | flexboxgrid2 9 | 10 | 11 | 12 | 44 | 47 | 48 | 49 | 50 | 51 |
52 |
53 |
54 |

flexboxgrid2

55 |
56 |
57 |

A grid system based on the flex display property. 58 |

59 |
60 |
61 | Github 62 |
63 |
64 | 65 | 66 |
67 |
68 | 69 |

Responsive

70 |

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, 71 | lg & xl viewport widths.

72 | 73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 | 
<div class="row">
101 |     <div class="col-xs-12
102 |                 col-sm-8
103 |                 col-md-6
104 |                 col-lg-4
105 |                 col-xl-2">
106 |         <div>Responsive</div>
107 |     </div>
108 | </div>
109 | 110 |
111 | 112 |
113 | 114 |

Fluid

115 |

Percent based widths allow fluid resizing of columns and rows.

116 | 117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 | 
.col-xs-6 {
171 |   flex-basis: 50%;
172 | }
173 | 174 |
175 | 176 |
177 | 178 |

Simple Syntax

179 |

All you need to remember is row, column, content.

180 | 181 | 
<div class="row">
182 |     <div class="col-xs-12">
183 |         <div>12</div>
184 |     </div>
185 | </div>
186 | 187 |
188 | 189 |
190 | 191 |

Offsets

192 |

Offset a column

193 | 194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 | 
<div class="row">
213 |     <div class="col-xs-offset-3 col-xs-9">
214 |         <div>offset</div>
215 |     </div>
216 | </div>
217 | 218 |
219 | 220 |
221 | 222 |

Auto Width

223 |

Add any number of auto sizing columns to a row. Let the grid figure it out.

224 | 225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 | 
<div class="row">
245 |     <div class="col-xs">
246 |         <div>auto</div>
247 |     </div>
248 | </div>
249 | 250 |
251 | 252 |
253 | 254 |

Nested Grids

255 |

Nest grids inside grids inside grids.

256 | 257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 | 
<div class="row">
305 |     <div class="col-xs">
306 |         <div>
307 |             <div class="row">
308 |                 <div class="col-xs">
309 |                     <div>auto</div>
310 |                 </div>
311 |             </div>
312 |         </div>
313 |     </div>
314 | </div>
315 | 316 |
317 | 318 |
319 | 320 |

Alignment

321 |

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

322 | 323 |

.start-

324 | 325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 | 
<div class="row start-xs">
337 |     <div class="col-xs-6">
338 |         <div>
339 |             start
340 |         </div>
341 |     </div>
342 | </div>
343 |
344 | 345 | 346 |

.center-

347 | 348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 |
358 |
359 | 
<div class="row center-xs">
360 |     <div class="col-xs-6">
361 |         <div>
362 |             start
363 |         </div>
364 |     </div>
365 | </div>
366 |
367 | 368 |

.end-

369 | 370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
379 |
380 |
381 | 
<div class="row end-xs">
382 |     <div class="col-xs-6">
383 |         <div>
384 |             end
385 |         </div>
386 |     </div>
387 | </div>
388 |
389 | 390 |

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes. 391 |

392 | 393 |
394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 | 
<div class="row center-xs end-sm start-lg">
405 |     <div class="col-xs-6">
406 |         <div>
407 |             All together now
408 |         </div>
409 |     </div>
410 | </div>
411 |
412 | 413 |

.top-

414 | 415 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |
423 | 
<div class="row top-xs">
424 |     <div class="col-xs-6">
425 |         <div>
426 |             top
427 |         </div>
428 |     </div>
429 | </div>
430 |
431 | 432 |

.middle-

433 | 434 |
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 | 
<div class="row middle-xs">
443 |     <div class="col-xs-6">
444 |         <div>
445 |             center
446 |         </div>
447 |     </div>
448 | </div>
449 |
450 | 451 |

.bottom-

452 | 453 |
454 |
455 |
456 |
457 |
458 |
459 |
460 |
461 | 
<div class="row bottom-xs">
462 |     <div class="col-xs-6">
463 |         <div>
464 |             bottom
465 |         </div>
466 |     </div>
467 | </div>
468 |
469 | 470 |
471 | 472 |
473 | 474 |

Distribution

475 |

Add classes to distribute the contents of a row or column.

476 | 477 |

.around-

478 | 479 |
480 |
481 |
482 |
483 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
492 |
493 |
494 |
495 |
496 | 
<div class="row around-xs">
497 |     <div class="col-xs-2">
498 |         <div>
499 |             around
500 |         </div>
501 |     </div>
502 |     <div class="col-xs-2">
503 |         <div>
504 |             around
505 |         </div>
506 |     </div>
507 |     <div class="col-xs-2">
508 |         <div>
509 |             around
510 |         </div>
511 |     </div>
512 | </div>
513 |
514 | 515 |

.between-

516 | 517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
532 |
533 |
534 | 
<div class="row between-xs">
535 |     <div class="col-xs-2">
536 |         <div>
537 |             between
538 |         </div>
539 |     </div>
540 |     <div class="col-xs-2">
541 |         <div>
542 |             between
543 |         </div>
544 |     </div>
545 |     <div class="col-xs-2">
546 |         <div>
547 |             between
548 |         </div>
549 |     </div>
550 | </div>
551 |
552 | 553 |
554 | 555 |
556 | 557 |

Reordering

558 |

Add classes to reorder columns.

559 | 560 |

.first-

561 |

Forces a column to appear first.

562 | 563 |
564 |
565 |
566 |
567 |
568 |
1
569 |
570 |
571 |
2
572 |
573 |
574 |
3
575 |
576 |
577 |
4
578 |
579 |
580 |
5
581 |
582 |
583 |
6
584 |
585 |
586 |
587 |
588 |
589 | 
<div class="row">
590 |     <div class="col-xs-2">
591 |         <div>
592 |             1
593 |         </div>
594 |     </div>
595 |     <div class="col-xs-2">
596 |         <div>
597 |             2
598 |         </div>
599 |     </div>
600 |     <div class="col-xs-2 first-xs">
601 |         <div>
602 |             3
603 |         </div>
604 |     </div>
605 | </div>
606 |
607 | 608 |

.last-

609 |

Forces a column to appear last.

610 | 611 |
612 |
613 |
614 |
615 |
616 |
1
617 |
618 |
619 |
2
620 |
621 |
622 |
3
623 |
624 |
625 |
4
626 |
627 |
628 |
5
629 |
630 |
631 |
6
632 |
633 |
634 |
635 |
636 |
637 | 
<div class="row">
638 |     <div class="col-xs-2 last-xs">
639 |         <div>
640 |             1
641 |         </div>
642 |     </div>
643 |     <div class="col-xs-2">
644 |         <div>
645 |             2
646 |         </div>
647 |     </div>
648 |     <div class="col-xs-2">
649 |         <div>
650 |             3
651 |         </div>
652 |     </div>
653 | </div>
654 |
655 | 656 |

.initial-order-

657 |

Resets a column to its initial order.

658 | 659 |
660 |
661 |
662 |
663 |
664 |
1
665 |
666 |
667 |
2
668 |
669 |
670 |
3
671 |
672 |
673 |
4
674 |
675 |
676 |
5
677 |
678 |
679 |
6
680 |
681 |
682 |
683 |
684 |
685 | 
<div class="row">
686 |     <div class="col-xs-2">
687 |         <div>
688 |             1
689 |         </div>
690 |     </div>
691 |     <div class="col-xs-2">
692 |         <div>
693 |             2
694 |         </div>
695 |     </div>
696 |     <div class="col-xs-2 first-xs initial-order-sm">
697 |         <div>
698 |             3
699 |         </div>
700 |     </div>
701 | </div>
702 | 703 |
704 | 705 |
706 | 707 |

Reversing

708 |

.reverse

709 | 710 |
711 |
712 |
713 |
714 |
715 |
1
716 |
717 |
718 |
2
719 |
720 |
721 |
3
722 |
723 |
724 |
4
725 |
726 |
727 |
5
728 |
729 |
730 |
6
731 |
732 |
733 |
734 |
735 |
736 | 
<div class="row reverse">
737 |     <div class="col-xs-2">
738 |         <div>
739 |             1
740 |         </div>
741 |     </div>
742 |     <div class="col-xs-2">
743 |         <div>
744 |             2
745 |         </div>
746 |     </div>
747 |     <div class="col-xs-2">
748 |         <div>
749 |             3
750 |         </div>
751 |     </div>
752 | </div>
753 |
754 | 755 |
756 | 757 |
758 | 759 |

Hiding

760 |

Add one or more breakpoint modifiers to hide columns based on the viewport.

761 | 762 |

.hidden-

763 | 764 |
765 |
766 |
767 |
768 |
769 | 770 |
771 |
772 | 773 |
774 |
775 |
md
776 |
777 |
778 | 779 |
780 |
781 | 782 |
783 |
784 |
785 |
786 |
787 | 
<div class="row">
788 |     <div class="col-xs">
789 |         <div class="hidden-xs">
790 |             xs
791 |         </div>
792 |     </div>
793 |     <div class="col-xs">
794 |         <div class="hidden-sm">
795 |             sm
796 |         </div>
797 |     </div>
798 |     <div class="col-xs">
799 |         <div class="hidden-md">
800 |             md
801 |         </div>
802 |     </div>
803 |     <div class="col-xs">
804 |         <div class="hidden-lg">
805 |             lg
806 |         </div>
807 |     </div>
808 |     <div class="col-xs">
809 |         <div class="hidden-xl">
810 |             xl
811 |         </div>
812 |     </div>
813 | </div>
814 | 815 |
816 | 817 | 824 |
825 |
826 | 827 | 828 | --------------------------------------------------------------------------------