├── .gitignore ├── Gruntfile.js ├── LICENSE.txt ├── README.md ├── bower.json ├── css ├── base.css ├── bootstrap.css ├── pygments.css ├── smart-grid-demo.css ├── smart-grid-doc.css ├── smart-grid-flexbox.css ├── smart-grid-flexbox.css.map ├── smart-grid.css └── smart-grid.css.map ├── package.json └── sass ├── smart-grid-columns.scss ├── smart-grid-containers.scss ├── smart-grid-flexbox.scss ├── smart-grid-mixins.scss ├── smart-grid-variables.scss └── smart-grid.scss /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .sass-cache/ 3 | _site/ 4 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | grunt.initConfig({ 3 | pkg: grunt.file.readJSON('package.json'), 4 | sass: { 5 | dist: { 6 | files: { 7 | 'css/smart-grid.css': 'sass/smart-grid.scss', 8 | 'css/smart-grid-flexbox.css': 'sass/smart-grid-flexbox.scss' 9 | } 10 | }, 11 | options: { 12 | style: 'compressed', 13 | banner: '/*! <%= pkg.name %> <%= pkg.version %> | <%= pkg.license %> | <%= pkg.homepage %> */' 14 | } 15 | }, 16 | watch: { 17 | css: { 18 | files: 'sass/*.scss', 19 | tasks: ['sass'] 20 | } 21 | }, 22 | bump: { 23 | options: { 24 | files: ['package.json', 'bower.json'], 25 | commit: true, 26 | commitMessage: 'Release %VERSION%', 27 | commitFiles: ['package.json', 'bower.json', 'sass/*', 'css/*'], 28 | createTag: true, 29 | tagName: '%VERSION%', 30 | tagMessage: 'Release %VERSION%', 31 | push: true, 32 | pushTo: 'origin' 33 | } 34 | } 35 | }); 36 | grunt.loadNpmTasks('grunt-contrib-sass'); 37 | grunt.loadNpmTasks('grunt-contrib-watch'); 38 | grunt.loadNpmTasks('grunt-bump'); 39 | grunt.registerTask('default', ['watch']); 40 | grunt.registerTask('build', ['sass']); 41 | grunt.registerTask('rev:patch', ['bump-only:patch', 'sass', 'bump-commit']); 42 | grunt.registerTask('rev:minor', ['bump-only:minor', 'sass', 'bump-commit']); 43 | grunt.registerTask('rev:major', ['bump-only:major', 'sass', 'bump-commit']); 44 | grunt.registerTask('rev', ['rev:patch']); 45 | }; 46 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2011-2014 Daniel Ryan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project is being left here for historical purposes. It's time to move on to CSS Grid. 2 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-smart-grid", 3 | "version": "5.1.6", 4 | "homepage": "http://css.gd/", 5 | "authors": [ 6 | "Daniel Ryan " 7 | ], 8 | "description": "Lightweight, Responsive, Mobile First Grid System", 9 | "main": "sass/smart-grid.scss", 10 | "keywords": [ 11 | "sass", 12 | "css", 13 | "grid" 14 | ], 15 | "license": "MIT", 16 | "ignore": [ 17 | "**/.*", 18 | "node_modules", 19 | "bower_components", 20 | "test", 21 | "tests" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeleton V1.1 3 | * Copyright 2011, Dave Gamache 4 | * www.getskeleton.com 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8/17/2011 8 | */ 9 | 10 | 11 | /* Table of Content 12 | ================================================== 13 | #Reset & Basics 14 | #Basic Styles 15 | #Site Styles 16 | #Typography 17 | #Links 18 | #Lists 19 | #Images 20 | #Buttons 21 | #Tabs 22 | #Forms 23 | #Misc */ 24 | 25 | 26 | /* #Reset & Basics (Inspired by E. Meyers) 27 | ================================================== */ 28 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 29 | margin: 0; 30 | padding: 0; 31 | border: 0; 32 | font-size: 100%; 33 | font: inherit; 34 | vertical-align: baseline; } 35 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 36 | display: block; } 37 | body { 38 | line-height: 1; } 39 | ol, ul { 40 | list-style: none; } 41 | blockquote, q { 42 | quotes: none; } 43 | blockquote:before, blockquote:after, 44 | q:before, q:after { 45 | content: ''; 46 | content: none; } 47 | table { 48 | border-collapse: collapse; 49 | border-spacing: 0; } 50 | 51 | 52 | /* #Basic Styles 53 | ================================================== */ 54 | body { 55 | background: #fff; 56 | font: 16px/24px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 57 | color: #444; 58 | -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ 59 | -webkit-text-size-adjust: 100%; 60 | text-rendering: optimizeLegibility; 61 | } 62 | 63 | 64 | /* #Typography 65 | ================================================== */ 66 | h1, h2, h3, h4, h5, h6 { 67 | color: #181818; 68 | font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; 69 | font-weight: normal; } 70 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } 71 | h1 { font-size: 32px; line-height: 40px; margin-bottom: 8px;} 72 | h2 { font-size: 24px; line-height: 30px; margin-bottom: 6px; } 73 | h3 { font-size: 20px; line-height: 25px; } 74 | 75 | p { margin: 0 0 24px; } 76 | p img { margin: 0; } 77 | p.lead { font-size: 21px; line-height: 27px; color: #777; } 78 | 79 | em { font-style: italic; } 80 | strong { font-weight: bold; color: #333; } 81 | small { font-size: 80%; } 82 | 83 | /* Blockquotes */ 84 | blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } 85 | blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } 86 | blockquote cite { display: block; font-size: 12px; color: #555; } 87 | blockquote cite:before { content: "\2014 \0020"; } 88 | blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } 89 | 90 | hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; } 91 | 92 | 93 | /* #Links 94 | ================================================== */ 95 | a, a:visited { color: #333; text-decoration: underline; outline: 0; } 96 | a:hover, a:focus { color: #000; } 97 | p a, p a:visited { line-height: inherit; } 98 | 99 | 100 | /* #Lists 101 | ================================================== */ 102 | ul, ol { margin-bottom: 20px; } 103 | ul { list-style: none outside; } 104 | ol { list-style: decimal; } 105 | ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } 106 | ul.square { list-style: square outside; } 107 | ul.circle { list-style: circle outside; } 108 | ul.disc { list-style: disc outside; } 109 | ul ul, ul ol, 110 | ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; } 111 | ul ul li, ul ol li, 112 | ol ol li, ol ul li { margin-bottom: 6px; } 113 | li { line-height: 18px; margin-bottom: 12px; } 114 | ul.large li { line-height: 21px; } 115 | li p { line-height: 21px; } 116 | 117 | /* #Images 118 | ================================================== */ 119 | 120 | img.scale-with-grid { 121 | max-width: 100%; 122 | height: auto; } 123 | 124 | 125 | /* #Buttons 126 | ================================================== */ 127 | 128 | a.button, 129 | button, 130 | input[type="submit"], 131 | input[type="reset"], 132 | input[type="button"] { 133 | background: #eee; /* Old browsers */ 134 | background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ 135 | background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ 136 | background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ 137 | background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ 138 | background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ 139 | background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ 140 | border: 1px solid #aaa; 141 | border-top: 1px solid #ccc; 142 | border-left: 1px solid #ccc; 143 | padding: 4px 12px; 144 | -moz-border-radius: 3px; 145 | -webkit-border-radius: 3px; 146 | border-radius: 3px; 147 | color: #444; 148 | display: inline-block; 149 | font-size: 11px; 150 | font-weight: bold; 151 | text-decoration: none; 152 | text-shadow: 0 1px rgba(255, 255, 255, .75); 153 | cursor: pointer; 154 | margin-bottom: 20px; 155 | line-height: 21px; 156 | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } 157 | 158 | a.button:hover, 159 | button:hover, 160 | input[type="submit"]:hover, 161 | input[type="reset"]:hover, 162 | input[type="button"]:hover { 163 | color: #222; 164 | background: #ddd; /* Old browsers */ 165 | background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ 166 | background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ 167 | background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ 168 | background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ 169 | background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ 170 | background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ 171 | border: 1px solid #888; 172 | border-top: 1px solid #aaa; 173 | border-left: 1px solid #aaa; } 174 | 175 | a.button:active, 176 | button:active, 177 | input[type="submit"]:active, 178 | input[type="reset"]:active, 179 | input[type="button"]:active { 180 | border: 1px solid #666; 181 | background: #ccc; /* Old browsers */ 182 | background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ 183 | background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ 184 | background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ 185 | background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ 186 | background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ 187 | background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } 188 | 189 | .button.full-width, 190 | button.full-width, 191 | input[type="submit"].full-width, 192 | input[type="reset"].full-width, 193 | input[type="button"].full-width { 194 | width: 100%; 195 | padding-left: 0 !important; 196 | padding-right: 0 !important; 197 | text-align: center; } 198 | 199 | 200 | /* #Tabs (activate in tabs.js) 201 | ================================================== */ 202 | ul.tabs { 203 | display: block; 204 | margin: 0 0 20px 0; 205 | padding: 0; 206 | border-bottom: solid 1px #ddd; } 207 | ul.tabs li { 208 | display: block; 209 | width: auto; 210 | height: 30px; 211 | padding: 0; 212 | float: left; 213 | margin-bottom: 0; } 214 | ul.tabs li a { 215 | display: block; 216 | text-decoration: none; 217 | width: auto; 218 | height: 29px; 219 | padding: 0px 20px; 220 | line-height: 30px; 221 | border: solid 1px #ddd; 222 | border-width: 1px 1px 0 0; 223 | margin: 0; 224 | background: #f5f5f5; 225 | font-size: 13px; } 226 | ul.tabs li a.active { 227 | background: #fff; 228 | height: 30px; 229 | position: relative; 230 | top: -4px; 231 | padding-top: 4px; 232 | border-left-width: 1px; 233 | margin: 0 0 0 -1px; 234 | color: #111; 235 | -moz-border-radius-topleft: 2px; 236 | -webkit-border-top-left-radius: 2px; 237 | border-top-left-radius: 2px; 238 | -moz-border-radius-topright: 2px; 239 | -webkit-border-top-right-radius: 2px; 240 | border-top-right-radius: 2px; } 241 | ul.tabs li:first-child a.active { 242 | margin-left: 0; } 243 | ul.tabs li:first-child a { 244 | border-width: 1px 1px 0 1px; 245 | -moz-border-radius-topleft: 2px; 246 | -webkit-border-top-left-radius: 2px; 247 | border-top-left-radius: 2px; } 248 | ul.tabs li:last-child a { 249 | -moz-border-radius-topright: 2px; 250 | -webkit-border-top-right-radius: 2px; 251 | border-top-right-radius: 2px; } 252 | 253 | ul.tabs-content { margin: 0; display: block; } 254 | ul.tabs-content > li { display:none; } 255 | ul.tabs-content > li.active { display: block; } 256 | 257 | /* Clearfixing tabs for beautiful stacking */ 258 | ul.tabs:before, 259 | ul.tabs:after { 260 | content: '\0020'; 261 | display: block; 262 | overflow: hidden; 263 | visibility: hidden; 264 | width: 0; 265 | height: 0; } 266 | ul.tabs:after { 267 | clear: both; } 268 | ul.tabs { 269 | zoom: 1; } 270 | 271 | 272 | /* #Forms 273 | ================================================== */ 274 | 275 | form { 276 | margin-bottom: 20px; } 277 | fieldset { 278 | margin-bottom: 20px; } 279 | input[type="text"], 280 | input[type="password"], 281 | input[type="email"], 282 | textarea, 283 | select { 284 | border: 1px solid #ccc; 285 | padding: 6px 4px; 286 | outline: none; 287 | -moz-border-radius: 2px; 288 | -webkit-border-radius: 2px; 289 | border-radius: 2px; 290 | font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 291 | color: #777; 292 | margin: 0; 293 | width: 210px; 294 | max-width: 100%; 295 | display: block; 296 | margin-bottom: 20px; 297 | background: #fff; } 298 | select { 299 | padding: 0; } 300 | input[type="text"]:focus, 301 | input[type="password"]:focus, 302 | input[type="email"]:focus, 303 | textarea:focus { 304 | border: 1px solid #aaa; 305 | color: #444; 306 | -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); 307 | -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); 308 | box-shadow: 0 0 3px rgba(0,0,0,.2); } 309 | textarea { 310 | min-height: 60px; } 311 | label, 312 | legend { 313 | display: block; 314 | font-weight: bold; 315 | font-size: 13px; } 316 | select { 317 | width: 220px; } 318 | input[type="checkbox"] { 319 | display: inline; } 320 | label span, 321 | legend span { 322 | font-weight: normal; 323 | font-size: 13px; 324 | color: #444; } 325 | 326 | /* #Misc 327 | ================================================== */ 328 | .remove-bottom { margin-bottom: 0 !important; } 329 | .half-bottom { margin-bottom: 10px !important; } 330 | .add-bottom { margin-bottom: 20px !important; } 331 | 332 | 333 | -------------------------------------------------------------------------------- /css/bootstrap.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Props to Eric Meyer (meyerweb.com) for his CSS reset file. 3 | */ 4 | 5 | html,body{margin:0;padding:0;} 6 | h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;} 7 | table{border-collapse:collapse;border-spacing:0;} 8 | ol,ul{list-style:none;} 9 | q:before,q:after,blockquote:before,blockquote:after{content:"";} 10 | html{overflow-y:scroll;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} 11 | a:focus{outline:thin dotted;} 12 | a:hover,a:active{outline:0;} 13 | article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;} 14 | audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} 15 | audio:not([controls]){display:none;} 16 | sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} 17 | sup{top:-0.5em;} 18 | sub{bottom:-0.25em;} 19 | img{border:0;-ms-interpolation-mode:bicubic;} 20 | button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} 21 | button,input{line-height:normal;*overflow:visible;} 22 | button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} 23 | button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;} 24 | input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} 25 | input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} 26 | textarea{overflow:auto;vertical-align:top;} 27 | html,body{background-color:#ffffff;} 28 | body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;line-height:24px;color:#404040;} 29 | p{font-size:16px;font-weight:normal;line-height:24px;margin-bottom:12px;}p small{font-size:14px;color:#bfbfbf;} 30 | h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} 31 | h1{margin-bottom:24px;font-size:30px;line-height:48px;}h1 small{font-size:18px;} 32 | h2{font-size:24px;line-height:48px;}h2 small{font-size:14px;} 33 | h3,h4,h5,h6{line-height:48px;} 34 | h3{font-size:18px;}h3 small{font-size:14px;} 35 | h4{font-size:16px;}h4 small{font-size:12px;} 36 | h5{font-size:14px;} 37 | h6{font-size:13px;color:#bfbfbf;text-transform:uppercase;} 38 | ul,ol{margin:0 0 24px 25px;} 39 | ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} 40 | ul{list-style:disc;} 41 | ol{list-style:decimal;} 42 | li{line-height:24px;} 43 | ul.unstyled{list-style:none;margin-left:0;} 44 | dl{margin-bottom:24px;}dl dt,dl dd{line-height:24px;} 45 | dl dt{font-weight:bold;} 46 | dl dd{margin-left:12px;} 47 | hr{margin:20px 0 19px;border:0;border-bottom:1px solid #eee;} 48 | strong{font-style:inherit;font-weight:bold;} 49 | em{font-style:italic;font-weight:inherit;line-height:inherit;} 50 | .muted{color:#bfbfbf;} 51 | blockquote{margin-bottom:24px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:14px;font-weight:300;line-height:24px;margin-bottom:0;} 52 | blockquote small{display:block;font-size:12px;font-weight:300;line-height:24px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} 53 | address{display:block;line-height:24px;margin-bottom:24px;} 54 | code,pre{padding:0 3px 2px;font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} 55 | code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;} 56 | pre{background-color:#f5f5f5;display:block;padding:11.5px;margin:0 0 24px;line-height:24px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;} 57 | 58 | /* 59 | * from Skeleton 60 | */ 61 | a.button, 62 | button, 63 | input[type="submit"], 64 | input[type="reset"], 65 | input[type="button"] { 66 | background: #eee; /* Old browsers */ 67 | background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */ 68 | background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */ 69 | background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */ 70 | background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */ 71 | background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */ 72 | background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */ 73 | border: 1px solid #aaa; 74 | border-top: 1px solid #ccc; 75 | border-left: 1px solid #ccc; 76 | padding: 4px 12px; 77 | -moz-border-radius: 3px; 78 | -webkit-border-radius: 3px; 79 | border-radius: 3px; 80 | color: #444; 81 | display: inline-block; 82 | font-size: 11px; 83 | font-weight: bold; 84 | text-decoration: none; 85 | text-shadow: 0 1px rgba(255, 255, 255, .75); 86 | cursor: pointer; 87 | margin-bottom: 20px; 88 | line-height: 21px; 89 | font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } 90 | a.button:hover, 91 | button:hover, 92 | input[type="submit"]:hover, 93 | input[type="reset"]:hover, 94 | input[type="button"]:hover { 95 | color: #222; 96 | background: #ddd; /* Old browsers */ 97 | background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */ 98 | background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */ 99 | background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */ 100 | background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */ 101 | background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */ 102 | background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */ 103 | border: 1px solid #888; 104 | border-top: 1px solid #aaa; 105 | border-left: 1px solid #aaa; } 106 | 107 | a.button:active, 108 | button:active, 109 | input[type="submit"]:active, 110 | input[type="reset"]:active, 111 | input[type="button"]:active { 112 | border: 1px solid #666; 113 | background: #ccc; /* Old browsers */ 114 | background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */ 115 | background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */ 116 | background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */ 117 | background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */ 118 | background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */ 119 | background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ } 120 | 121 | .button.full-width, 122 | button.full-width, 123 | input[type="submit"].full-width, 124 | input[type="reset"].full-width, 125 | input[type="button"].full-width { 126 | width: 100%; 127 | padding-left: 0 !important; 128 | padding-right: 0 !important; 129 | text-align: center; } 130 | 131 | /* 132 | * from HTML5 Boilerplate 133 | */ 134 | nav ul { 135 | margin: 0; 136 | padding: 0; 137 | } 138 | nav ul li { 139 | list-style: none; 140 | margin: 0; 141 | padding: 0; 142 | } 143 | 144 | table th, 145 | table td { 146 | vertical-align: middle; 147 | padding: 0.5em; 148 | border: 1px solid #666; 149 | } 150 | 151 | table th { 152 | font-weight: bold; 153 | text-align: center; 154 | } -------------------------------------------------------------------------------- /css/pygments.css: -------------------------------------------------------------------------------- 1 | .highlight .hll { background-color: #ffffcc } 2 | .highlight { background: #ffffff; } 3 | .highlight .c { color: #808080 } /* Comment */ 4 | .highlight .err { color: #F00000; background-color: #F0A0A0 } /* Error */ 5 | .highlight .k { color: #008000; font-weight: bold } /* Keyword */ 6 | .highlight .o { color: #303030 } /* Operator */ 7 | .highlight .cm { color: #808080 } /* Comment.Multiline */ 8 | .highlight .cp { color: #507090 } /* Comment.Preproc */ 9 | .highlight .c1 { color: #808080 } /* Comment.Single */ 10 | .highlight .cs { color: #cc0000; font-weight: bold } /* Comment.Special */ 11 | .highlight .gd { color: #A00000 } /* Generic.Deleted */ 12 | .highlight .ge { font-style: italic } /* Generic.Emph */ 13 | .highlight .gr { color: #FF0000 } /* Generic.Error */ 14 | .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ 15 | .highlight .gi { color: #00A000 } /* Generic.Inserted */ 16 | .highlight .go { color: #808080 } /* Generic.Output */ 17 | .highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */ 18 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 19 | .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ 20 | .highlight .gt { color: #0040D0 } /* Generic.Traceback */ 21 | .highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */ 22 | .highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */ 23 | .highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */ 24 | .highlight .kp { color: #003080; font-weight: bold } /* Keyword.Pseudo */ 25 | .highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */ 26 | .highlight .kt { color: #303090; font-weight: bold } /* Keyword.Type */ 27 | .highlight .m { color: #6000E0; font-weight: bold } /* Literal.Number */ 28 | .highlight .s { background-color: #fff0f0 } /* Literal.String */ 29 | .highlight .na { color: #0000C0 } /* Name.Attribute */ 30 | .highlight .nb { color: #007020 } /* Name.Builtin */ 31 | .highlight .nc { color: #B00060; font-weight: bold } /* Name.Class */ 32 | .highlight .no { color: #003060; font-weight: bold } /* Name.Constant */ 33 | .highlight .nd { color: #505050; font-weight: bold } /* Name.Decorator */ 34 | .highlight .ni { color: #800000; font-weight: bold } /* Name.Entity */ 35 | .highlight .ne { color: #F00000; font-weight: bold } /* Name.Exception */ 36 | .highlight .nf { color: #0060B0; font-weight: bold } /* Name.Function */ 37 | .highlight .nl { color: #907000; font-weight: bold } /* Name.Label */ 38 | .highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */ 39 | .highlight .nt { color: #007000 } /* Name.Tag */ 40 | .highlight .nv { color: #906030 } /* Name.Variable */ 41 | .highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ 42 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 43 | .highlight .mf { color: #6000E0; font-weight: bold } /* Literal.Number.Float */ 44 | .highlight .mh { color: #005080; font-weight: bold } /* Literal.Number.Hex */ 45 | .highlight .mi { color: #0000D0; font-weight: bold } /* Literal.Number.Integer */ 46 | .highlight .mo { color: #4000E0; font-weight: bold } /* Literal.Number.Oct */ 47 | .highlight .sb { background-color: #fff0f0 } /* Literal.String.Backtick */ 48 | .highlight .sc { color: #0040D0 } /* Literal.String.Char */ 49 | .highlight .sd { color: #D04020 } /* Literal.String.Doc */ 50 | .highlight .s2 { background-color: #fff0f0 } /* Literal.String.Double */ 51 | .highlight .se { color: #606060; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */ 52 | .highlight .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */ 53 | .highlight .si { background-color: #e0e0e0 } /* Literal.String.Interpol */ 54 | .highlight .sx { color: #D02000; background-color: #fff0f0 } /* Literal.String.Other */ 55 | .highlight .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */ 56 | .highlight .s1 { background-color: #fff0f0 } /* Literal.String.Single */ 57 | .highlight .ss { color: #A06000 } /* Literal.String.Symbol */ 58 | .highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */ 59 | .highlight .vc { color: #306090 } /* Name.Variable.Class */ 60 | .highlight .vg { color: #d07000; font-weight: bold } /* Name.Variable.Global */ 61 | .highlight .vi { color: #3030B0 } /* Name.Variable.Instance */ 62 | .highlight .il { color: #0000D0; font-weight: bold } /* Literal.Number.Integer.Long */ 63 | -------------------------------------------------------------------------------- /css/smart-grid-demo.css: -------------------------------------------------------------------------------- 1 | #main h1, 2 | #main p.center { 3 | text-align: center; 4 | } 5 | 6 | #main h1 + p.center { 7 | margin-top: -24px; 8 | } 9 | 10 | #main { 11 | } 12 | 13 | .demo #main .row { 14 | background: #ddd; 15 | margin: 20px 0; 16 | border-radius: 5px; 17 | } 18 | 19 | .practical-demo #main .row { 20 | background: #ddd; 21 | } 22 | 23 | #main .row .columns b { 24 | display: block; 25 | text-align: center; 26 | padding-top: 5px; 27 | padding-bottom: 5px; 28 | background: #444; 29 | color: #fff; 30 | font-weight: bold; 31 | text-shadow: 0 -1px 1px black; 32 | border-radius: 5px; 33 | margin-top: 10px; 34 | } 35 | 36 | .practical-demo #main .row .columns b { 37 | margin-bottom: 20px; 38 | padding: 10px; 39 | } 40 | 41 | .oldie #main .row .columns b, 42 | #main .row .columns:first-child b { 43 | margin-top: 0; 44 | } 45 | 46 | @media screen and (min-width:481px) { 47 | #main .row .columns b { 48 | margin-top: 0; 49 | } 50 | 51 | .practical-demo #main .callouts .columns b { 52 | margin-bottom: 0; 53 | } 54 | } -------------------------------------------------------------------------------- /css/smart-grid-doc.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: transparent; 3 | } 4 | 5 | .show-grid .container { 6 | background: url('../images/grid-horizontal-12.png') repeat-y 50% 0; 7 | } 8 | 9 | @media (min-width:768px) and (max-width:959px) { 10 | .show-grid .container { 11 | background-image: url('../images/grid-horizontal-12@768.png'); 12 | } 13 | } 14 | 15 | @media (min-width:1200px) { 16 | .show-grid .container.large { 17 | background-image: url('../images/grid-horizontal-12@1200.png'); 18 | } 19 | } 20 | 21 | @media (min-width:1920px) { 22 | .show-grid .container.hd { 23 | background-image: url('../images/grid-horizontal-12@1920.png'); 24 | } 25 | } 26 | 27 | a { 28 | color: #c00; 29 | text-decoration: none; 30 | -moz-transition: color 0.5s; 31 | -ms-transition: color 0.5s; 32 | -o-transition: color 0.5s; 33 | -webkit-transition: color 0.5s; 34 | transition: color 0.5s; 35 | } 36 | 37 | a:hover { 38 | color: #f00; 39 | } 40 | 41 | code { 42 | background-color: transparent; 43 | } 44 | 45 | h1, 46 | h2, 47 | h3, 48 | h4, 49 | h5, 50 | h6 { 51 | font-weight: 500; 52 | } 53 | 54 | .amp { 55 | font-size: 110%; 56 | font-style: italic; 57 | font-weight: normal; 58 | font-family:"Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua",serif; 59 | } 60 | 61 | .caps { 62 | font-size: 0.92em; 63 | } 64 | 65 | #hd { 66 | padding: 20px 0; 67 | border-top: 10px solid #035E89; 68 | border-bottom: 1px solid #e5eff3; 69 | } 70 | 71 | #hd .container { 72 | position: relative; 73 | } 74 | 75 | #hd h1, 76 | #hd p { 77 | margin: 0; 78 | } 79 | 80 | #hd h1 { 81 | font-size: 40px; 82 | line-height: 44px; 83 | } 84 | 85 | #hd h1 a { 86 | color: inherit; 87 | font-weight: 500; 88 | } 89 | 90 | #hd .tagline { 91 | font-weight: 500; 92 | color: #666; 93 | } 94 | 95 | #hd nav { 96 | margin: 20px 0 0; 97 | } 98 | 99 | #hd nav ul { 100 | zoom: 1; 101 | } 102 | 103 | #hd nav ul li { 104 | margin: 20px 10px 0 0; 105 | display: inline; 106 | } 107 | 108 | #hd nav ul li a { 109 | margin: 0; 110 | } 111 | 112 | #hd nav ul li a b { 113 | display: none; 114 | } 115 | 116 | @media screen and (min-width:480px) { 117 | #hd nav ul li a b { 118 | display: inline; 119 | } 120 | } 121 | 122 | @media screen and (min-width:768px) { 123 | #hd nav { 124 | position: absolute; 125 | bottom: -2px; 126 | right: 0; 127 | margin: 0; 128 | } 129 | 130 | #hd nav ul li.follow { 131 | margin-right: 0; 132 | } 133 | } 134 | 135 | #main h2:first-child { 136 | margin-top: -12px; 137 | } 138 | 139 | #content { 140 | padding-top: 20px; 141 | padding-bottom: 20px; 142 | } 143 | 144 | 145 | #main footer { 146 | padding-top: 10px; 147 | margin-top: 10px; 148 | border-top: 1px solid #eee; 149 | } 150 | #main footer, 151 | #main footer p { 152 | font-size: 13px; 153 | } 154 | 155 | #main footer p, 156 | #main footer ol { 157 | margin-top: 0; 158 | margin-bottom: 0; 159 | } 160 | 161 | #main table { 162 | margin: 20px 0; 163 | font-size: 14px; 164 | } 165 | 166 | #main table th { 167 | text-align: left; 168 | } 169 | 170 | #main table td.num { 171 | text-align: right; 172 | } 173 | 174 | #main table td.icon { 175 | text-align: center; 176 | } 177 | 178 | #main table tbody tr:nth-child(1n) th, 179 | #main table tbody tr:nth-child(1n) td { 180 | border-color: #ccc; 181 | border-left: none; 182 | border-right: none; 183 | text-shadow: 0 -1px 1px white; 184 | background: #fafafa; 185 | } 186 | 187 | #main table tbody tr:nth-child(odd) th, 188 | #main table tbody tr:nth-child(odd) td { 189 | background: #fdfdfd; 190 | } 191 | 192 | #main table thead th, 193 | #main table thead td { 194 | background: #444; 195 | color: #fff; 196 | border: none; 197 | text-shadow: 0 -1px 1px black; 198 | } 199 | 200 | @media screen and (max-width:479px) { 201 | #main table td.icon, 202 | #main table thead th:nth-child(3), 203 | #main table tbody td:nth-child(3) { 204 | display: none; 205 | } 206 | } 207 | 208 | #sb { 209 | margin-bottom: 20px; 210 | } 211 | 212 | #sb, 213 | #sb a { 214 | color: #aaa; 215 | } 216 | 217 | #sb a:hover { 218 | color: #f00; 219 | } 220 | 221 | #sb ul { 222 | } 223 | 224 | #sb ul li { 225 | margin: 0 0 10px; 226 | } 227 | 228 | #sb ul ul { 229 | margin-left: 2em; 230 | margin-top: 10px; 231 | } 232 | 233 | #sb ul ul li { 234 | list-style: disc; 235 | } 236 | 237 | #ft { 238 | padding: 40px 0 20px; 239 | clear: both; 240 | font-size: 13px; 241 | color: #999; 242 | overflow: hidden; 243 | } 244 | 245 | #ft a { 246 | color: #999; 247 | } 248 | 249 | #ft p { 250 | font-size: 13px; 251 | } 252 | 253 | #ft ul { 254 | } 255 | 256 | #ft ul li { 257 | list-style: none; 258 | display: inline; 259 | margin: 0 10px 0 0; 260 | } 261 | 262 | @media screen and (min-width:768px) { 263 | #ft .one-fourth { 264 | text-align: right; 265 | } 266 | } -------------------------------------------------------------------------------- /css/smart-grid-flexbox.css: -------------------------------------------------------------------------------- 1 | /*! css-smart-grid 5.1.4 | MIT License | http://css.gd */ 2 | .container{max-width:940px;padding:0 1.06383%;margin:0 auto}.container,.row{zoom:1}.container:before,.container:after,.row:before,.row:after{content:"";display:table}.container:after,.row:after{clear:both}@media (min-width: 481px){html.flexbox .row{display:-moz-flex;display:-ms-flex;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex:1 1 auto;-moz-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-flex-flow:row nowrap;-moz-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-align-items:flex-start;-moz-align-items:flex-start;-ms-align-items:flex-start;flex-align:flex-start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;-ms-justify-content:flex-start;justify-content:flex-start;width:100%}}@media (min-width: 481px){.columns{float:left;margin:0 0 0 2.12766%;width:6.38298%}.columns:first-child{margin-left:0}html.flexbox .columns{float:none}.columns.two{width:14.89362%}.columns.three,.columns.one-fourth{width:23.40426%}.columns.four,.columns.one-third{width:31.91489%}.columns.five{width:40.42553%}.columns.six,.columns.one-half{width:48.93617%}.columns.seven{width:57.44681%}.columns.eight,.columns.two-thirds{width:65.95745%}.columns.nine,.columns.three-fourths{width:74.46808%}.columns.ten{width:82.97872%}.columns.eleven{width:91.48936%}.columns.twelve,.columns.full{width:100.0%}.columns.offset-one{margin-left:10.6383%}.columns.offset-one:first-child{margin-left:8.51064%}.columns.offset-two{margin-left:19.14894%}.columns.offset-two:first-child{margin-left:17.02128%}.columns.offset-three{margin-left:27.65957%}.columns.offset-three:first-child{margin-left:25.53191%}.columns.offset-four{margin-left:36.17021%}.columns.offset-four:first-child{margin-left:34.04255%}.columns.offset-five{margin-left:44.68085%}.columns.offset-five:first-child{margin-left:42.55319%}.columns.offset-six{margin-left:53.19149%}.columns.offset-six:first-child{margin-left:51.06383%}.columns.offset-seven{margin-left:61.70213%}.columns.offset-seven:first-child{margin-left:59.57447%}.columns.offset-eight{margin-left:70.21277%}.columns.offset-eight:first-child{margin-left:68.08511%}.columns.offset-nine{margin-left:78.7234%}.columns.offset-nine:first-child{margin-left:76.59574%}.columns.offset-ten{margin-left:87.23404%}.columns.offset-ten:first-child{margin-left:85.10638%}.columns.offset-eleven{margin-left:95.74468%}.columns.offset-eleven:first-child{margin-left:93.61702%}} 3 | /*# sourceMappingURL=smart-grid-flexbox.css.map */ 4 | -------------------------------------------------------------------------------- /css/smart-grid-flexbox.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAIA,UAAW,CCkBP,SAAS,CCZkB,KAAK,CDahC,OAAO,CAAE,UAAW,CACpB,MAAM,CAAE,MAAM,CDhBlB,eACK,CCmBD,IAAI,CAAE,CAAC,CACP,yDACQ,CACJ,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,KAAK,CAElB,2BAAQ,CACJ,KAAK,CAAE,IAAI,CA9BX,yBAAwC,CAD5C,iBAAe,CAEP,OAAO,CAAK,SAAS,CACrB,OAAO,CAAM,QAAQ,CACrB,OAAO,CAAM,WAAW,CACxB,OAAO,CAAE,YAAY,CACrB,OAAO,CAAU,IAAI,CEF9B,YAAwB,CFGQ,QAAS,CEHzC,SAAwB,CFGQ,QAAS,CEHzC,QAAwB,CFGQ,QAAS,CELzC,IAAY,CFKoB,QAAS,CEHzC,iBAAwB,CFIa,UAAW,CEJhD,cAAwB,CFIa,UAAW,CEJhD,aAAwB,CFIa,UAAW,CENhD,SAAY,CFMyB,UAAW,CEJhD,mBAAwB,CFKgB,UAAU,CELlD,gBAAwB,CFKgB,UAAU,CELlD,eAAwB,CFKgB,UAAU,CACzC,UAAU,CAAE,UAAU,CEN/B,uBAAwB,CFOoB,UAAU,CEPtD,oBAAwB,CFOoB,UAAU,CEPtD,mBAAwB,CFOoB,UAAU,CETtD,eAAY,CFSgC,UAAU,CAC7C,KAAK,CAAE,IAAI,EDGvB,yBAAwC,CIOpC,QAAS,CAvBT,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,cAAa,CACrB,KAAK,CFDmB,QAAU,CEElC,oBAAc,CACV,WAAW,CAAE,CAAC,CAGd,qBAAgB,CACZ,KAAK,CAAE,IAAI,CAsBX,YAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,kCAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,gCAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,aAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,8BAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,cAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,kCAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,oCAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,YAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,eAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,6BAAc,CAjBtB,KAAK,CAAE,MAAiD,CA0BhD,mBAAc,CAvBtB,WAAW,CAAE,QAAqD,CAClE,+BAAc,CACV,WAAW,CAAE,QAA+C,CAqBxD,mBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,+BAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,qBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,iCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,oBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,gCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,oBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,gCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,mBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,+BAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,qBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,iCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,qBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,iCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,oBAAc,CAvBtB,WAAW,CAAE,QAAqD,CAClE,gCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,mBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,+BAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,sBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,kCAAc,CACV,WAAW,CAAE,SAA+C", 4 | "sources": ["../sass/smart-grid-flexbox.scss","../sass/smart-grid-containers.scss","../sass/smart-grid-variables.scss","../sass/smart-grid-mixins.scss","../sass/smart-grid-columns.scss"], 5 | "names": [], 6 | "file": "smart-grid-flexbox.css" 7 | } 8 | -------------------------------------------------------------------------------- /css/smart-grid.css: -------------------------------------------------------------------------------- 1 | /*! css-smart-grid 5.1.4 | MIT License | http://css.gd */ 2 | .container{max-width:940px;padding:0 1.06383%;margin:0 auto}.container,.row{zoom:1}.container:before,.container:after,.row:before,.row:after{content:"";display:table}.container:after,.row:after{clear:both}@media (min-width: 481px){.columns{float:left;margin:0 0 0 2.12766%;width:6.38298%}.columns:first-child{margin-left:0}.columns.two{width:14.89362%}.columns.three,.columns.one-fourth{width:23.40426%}.columns.four,.columns.one-third{width:31.91489%}.columns.five{width:40.42553%}.columns.six,.columns.one-half{width:48.93617%}.columns.seven{width:57.44681%}.columns.eight,.columns.two-thirds{width:65.95745%}.columns.nine,.columns.three-fourths{width:74.46808%}.columns.ten{width:82.97872%}.columns.eleven{width:91.48936%}.columns.twelve,.columns.full{width:100.0%}.columns.offset-one{margin-left:10.6383%}.columns.offset-one:first-child{margin-left:8.51064%}.columns.offset-two{margin-left:19.14894%}.columns.offset-two:first-child{margin-left:17.02128%}.columns.offset-three{margin-left:27.65957%}.columns.offset-three:first-child{margin-left:25.53191%}.columns.offset-four{margin-left:36.17021%}.columns.offset-four:first-child{margin-left:34.04255%}.columns.offset-five{margin-left:44.68085%}.columns.offset-five:first-child{margin-left:42.55319%}.columns.offset-six{margin-left:53.19149%}.columns.offset-six:first-child{margin-left:51.06383%}.columns.offset-seven{margin-left:61.70213%}.columns.offset-seven:first-child{margin-left:59.57447%}.columns.offset-eight{margin-left:70.21277%}.columns.offset-eight:first-child{margin-left:68.08511%}.columns.offset-nine{margin-left:78.7234%}.columns.offset-nine:first-child{margin-left:76.59574%}.columns.offset-ten{margin-left:87.23404%}.columns.offset-ten:first-child{margin-left:85.10638%}.columns.offset-eleven{margin-left:95.74468%}.columns.offset-eleven:first-child{margin-left:93.61702%}} 3 | /*# sourceMappingURL=smart-grid.css.map */ 4 | -------------------------------------------------------------------------------- /css/smart-grid.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAKA,UAAW,CCiBP,SAAS,CCZkB,KAAK,CDahC,OAAO,CAAE,UAAW,CACpB,MAAM,CAAE,MAAM,CDflB,eACK,CCkBD,IAAI,CAAE,CAAC,CACP,yDACQ,CACJ,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,KAAK,CAElB,2BAAQ,CACJ,KAAK,CAAE,IAAI,CDfnB,yBAAwC,CGMpC,QAAS,CAvBT,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,cAAa,CACrB,KAAK,CDDmB,QAAU,CCElC,oBAAc,CACV,WAAW,CAAE,CAAC,CA0BV,YAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,kCAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,gCAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,aAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,8BAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,cAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,kCAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,oCAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,YAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,eAAc,CAjBtB,KAAK,CAAE,SAAiD,CAiBhD,6BAAc,CAjBtB,KAAK,CAAE,MAAiD,CA0BhD,mBAAc,CAvBtB,WAAW,CAAE,QAAqD,CAClE,+BAAc,CACV,WAAW,CAAE,QAA+C,CAqBxD,mBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,+BAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,qBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,iCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,oBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,gCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,oBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,gCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,mBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,+BAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,qBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,iCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,qBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,iCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,oBAAc,CAvBtB,WAAW,CAAE,QAAqD,CAClE,gCAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,mBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,+BAAc,CACV,WAAW,CAAE,SAA+C,CAqBxD,sBAAc,CAvBtB,WAAW,CAAE,SAAqD,CAClE,kCAAc,CACV,WAAW,CAAE,SAA+C", 4 | "sources": ["../sass/smart-grid.scss","../sass/smart-grid-containers.scss","../sass/smart-grid-variables.scss","../sass/smart-grid-columns.scss"], 5 | "names": [], 6 | "file": "smart-grid.css" 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-smart-grid", 3 | "devDependencies": { 4 | "grunt": "~0.4.5", 5 | "grunt-contrib-sass": "~0.7.3", 6 | "grunt-contrib-watch": "~0.6.1", 7 | "grunt-bump": "0.0.14" 8 | }, 9 | "version": "5.1.6", 10 | "description": "Lightweight, Responsive & Mobile First", 11 | "main": "Gruntfile.js", 12 | "scripts": { 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git://github.com/dryan/css-smart-grid.git" 18 | }, 19 | "author": "Daniel Ryan ", 20 | "license": "MIT License", 21 | "bugs": { 22 | "url": "https://github.com/dryan/css-smart-grid/issues" 23 | }, 24 | "homepage": "http://css.gd" 25 | } 26 | -------------------------------------------------------------------------------- /sass/smart-grid-columns.scss: -------------------------------------------------------------------------------- 1 | @import "smart-grid-variables"; 2 | 3 | @mixin column() { 4 | float: left; 5 | margin: 0 0 0 $gutter; 6 | width: $one-column; 7 | &:first-child { 8 | margin-left: 0; 9 | } 10 | @if $flexbox-support == true { 11 | html.flexbox & { 12 | float: none; 13 | } 14 | } 15 | } 16 | @mixin columns($count:1) { 17 | width: ($one-column * $count) + ($gutter * ($count - 1)); 18 | } 19 | @mixin offset($columns:1) { 20 | margin-left: ($one-column * $columns) + ($gutter * ($columns + 1)); 21 | &:first-child { 22 | margin-left: ($one-column * $columns) + ($gutter * $columns); 23 | } 24 | } 25 | 26 | @mixin column-set() { 27 | .columns { 28 | @include column; 29 | @each $i in $column-list { 30 | $selectors: (); 31 | @for $j from 2 to length($i) + 1 { 32 | $selectors: append($selectors, unquote("&.#{nth($i, $j)}"), comma); 33 | } 34 | #{$selectors} { 35 | @include columns(nth($i, 1)); 36 | } 37 | } 38 | @each $i in $offset-list { 39 | $selectors: (); 40 | @for $j from 2 to length($i) + 1 { 41 | $selectors: append($selectors, unquote("&.offset-#{nth($i, $j)}"), comma); 42 | } 43 | #{$selectors} { 44 | @include offset(nth($i, 1)); 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /sass/smart-grid-containers.scss: -------------------------------------------------------------------------------- 1 | @import "smart-grid-variables"; 2 | @import "smart-grid-mixins"; 3 | 4 | @mixin flexbox-row() { 5 | html.flexbox & { 6 | @media (min-width:$columns-break-point) { 7 | display: -moz-flex; 8 | display: -ms-flex; // one day, maybe 9 | display: -ms-flexbox; 10 | display: -webkit-flex; 11 | display: flex; 12 | @include prefixer(flex, 1 1 auto, webkit moz ms spec); 13 | @include prefixer(flex-flow, row nowrap, webkit moz ms spec); 14 | @include prefixer(align-items, flex-start, webkit moz ms); 15 | flex-align: flex-start; 16 | @include prefixer(justify-content, flex-start, webkit moz ms spec); 17 | width: 100%; 18 | } 19 | } 20 | } 21 | 22 | @mixin container() { 23 | max-width: $container-max-width; 24 | padding: 0 $gutter/2; 25 | margin: 0 auto; 26 | } 27 | 28 | @mixin clearfix() { 29 | zoom: 1; 30 | &:before, 31 | &:after { 32 | content: ""; 33 | display: table; 34 | } 35 | &:after { 36 | clear: both; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /sass/smart-grid-flexbox.scss: -------------------------------------------------------------------------------- 1 | @import "smart-grid-variables"; 2 | @import "smart-grid-containers"; 3 | @import "smart-grid-columns"; 4 | 5 | .container { 6 | @include container; 7 | } 8 | 9 | .container, 10 | .row { 11 | @include clearfix; 12 | } 13 | 14 | @if $flexbox-support == true { 15 | .row { 16 | @include flexbox-row; 17 | } 18 | } 19 | 20 | @media (min-width:$columns-break-point) { 21 | @include column-set; 22 | } 23 | 24 | // uncomment this section for IE support 25 | // html.oldie, 26 | // html.lt-ie9, 27 | // html.no-mq { 28 | // @include column-set; 29 | // } 30 | -------------------------------------------------------------------------------- /sass/smart-grid-mixins.scss: -------------------------------------------------------------------------------- 1 | @import "smart-grid-variables"; 2 | 3 | // lovingly borrowed from bourbon.io 4 | @mixin prefixer($property, $value, $prefixes) { 5 | @each $prefix in $prefixes { 6 | @if $prefix == spec { 7 | #{$property}: $value; 8 | } @else { 9 | -#{$prefix}-#{$property}: $value; 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /sass/smart-grid-variables.scss: -------------------------------------------------------------------------------- 1 | // 20px at 960px wide container, accounting for a 1/2 gutter width padding on the left and right of the container 2 | $gutter: percentage(20px/940px); 3 | 4 | // 60px at 960px wide container 5 | $one-column: 6.3829787%; 6 | 7 | // set this to the minimum width you want the columns to take effect at 8 | $columns-break-point: 481px !default; 9 | 10 | // set this to the maximum width you want .container to have 11 | $container-max-width: 940px !default; 12 | 13 | // set this to true to include support for CSS Flexbox (modern syntax). 14 | $flexbox-support: true !default; 15 | 16 | // a collection of the columns you want to build. the first parameter must be an integer of how many columns wide this instance is, followed by 1 or more class names to apply this width to. 17 | $column-list: (2, "two") (3, "three", "one-fourth") (4, "four", "one-third") (5, "five") (6, "six", "one-half") (7, "seven") (8, "eight", "two-thirds") (9, "nine", "three-fourths") (10, "ten") (11, "eleven") (12, "twelve", "full") !default; 18 | 19 | // a collection of the offsets you want to build. the first parameter must be an integer of how many columns wide this instance is offset, followed by 1 or more class names to apply this offset to. 20 | $offset-list: (1, "one") (2, "two") (3, "three") (4, "four") (5, "five") (6, "six") (7, "seven") (8, "eight") (9, "nine") (10, "ten") (11, "eleven") !default; 21 | -------------------------------------------------------------------------------- /sass/smart-grid.scss: -------------------------------------------------------------------------------- 1 | @import "smart-grid-variables"; 2 | $flexbox-support: false; 3 | @import "smart-grid-containers"; 4 | @import "smart-grid-columns"; 5 | 6 | .container { 7 | @include container; 8 | } 9 | 10 | .container, 11 | .row { 12 | @include clearfix; 13 | } 14 | 15 | @if $flexbox-support == true { 16 | .row { 17 | @include flexbox-row; 18 | } 19 | } 20 | 21 | @media (min-width:$columns-break-point) { 22 | @include column-set; 23 | } 24 | 25 | // uncomment this section for IE support 26 | // html.oldie, 27 | // html.lt-ie9, 28 | // html.no-mq { 29 | // @include column-set; 30 | // } 31 | --------------------------------------------------------------------------------