├── .editorconfig ├── .gitattributes ├── .gitignore ├── CHANGELOG.md ├── README.md ├── _config.yml ├── _layouts └── default.html ├── _plugins └── generator_scss.rb ├── _site ├── index.html ├── sass │ ├── config.rb │ ├── grid.scss │ └── style.scss ├── styles │ ├── grid.css │ ├── normalize.css │ └── style.css └── todo.md ├── index.html ├── sass ├── config.rb ├── grid.scss └── style.scss ├── styles ├── grid.css ├── normalize.css └── style.css └── todo.md /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # PROJECT FOLDERS & FILES 2 | 3 | *.sublime-project 4 | *.sublime-workspace 5 | 6 | 7 | # Ignore hidden folders # 8 | # This takes care of .tmp, .sass-cache, and many others # 9 | .*/ 10 | 11 | # Ignore OS generated files # 12 | .DS_Store* 13 | ehthumbs.db 14 | Icon? 15 | Thumbs.db 16 | 17 | # Always-ignore files and folders # 18 | *.diff 19 | *.err 20 | *.log 21 | *.orig 22 | *.rej 23 | *.swn 24 | *.swo 25 | *.swp 26 | ._* 27 | *~ 28 | 29 | # Ignore packages # 30 | *.7z 31 | *.dmg 32 | *.gz 33 | *.iso 34 | *.jar 35 | *.rar 36 | *.tar 37 | *.zip -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Warning 2 | 3 | > While a simple and easy-to-use for its time, this framework may not longer reflect modern best practices. -- [Brajeshwar](//brajeshwar.me/) 4 | 5 | ## Grid 6 | 7 | A simple & semantic responsive grid system. 8 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | name : Grid 2 | source : . 3 | destination : ./_site 4 | plugins : ./_plugins 5 | layouts : ./_layouts 6 | include : ['.htaccess'] 7 | exclude : ['*.sublime-workspace', 8 | '*.sublime-project', 9 | '.DS_Store', 10 | 'README.md', 11 | 'TODO.md', 12 | 'CHANGELOG.md' 13 | ] 14 | 15 | keep_files : ['.git'] 16 | 17 | future : true 18 | show_drafts : nil 19 | limit_posts : 0 20 | 21 | permalink : pretty 22 | relative_permalinks : true 23 | paginate_path : 'page:num' 24 | 25 | markdown : maruku 26 | markdown_ext : markdown,mkd,mkdn,md -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ page.title }} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Grid

17 |
18 |
19 | 20 |
21 | 22 | {{ content }} 23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /_plugins/generator_scss.rb: -------------------------------------------------------------------------------- 1 | # 2 | # Jekyll Generator for SCSS 3 | # 4 | # (File paths in this description relative to jekyll project root directory) 5 | # Place this file in ./_plugins 6 | # Place .scss files in ./_scss 7 | # Compiles .scss files in ./_scss to .css files in whatever directory you indicated in your config 8 | # Config file placed in ./_sass/config.rb 9 | # 10 | 11 | require 'sass' 12 | require 'pathname' 13 | require 'compass' 14 | require 'compass/exec' 15 | 16 | module Jekyll 17 | 18 | class CompassGenerator < Generator 19 | safe true 20 | 21 | def generate(site) 22 | Dir.chdir File.expand_path('../sass', File.dirname(__FILE__)) do 23 | Compass::Exec::SubCommandUI.new(%w(compile)).run! 24 | end 25 | end 26 | 27 | end 28 | 29 | end -------------------------------------------------------------------------------- /_site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Grid 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Grid

17 |
18 |
19 | 20 |
21 | 22 |
23 |
1
24 |
1
25 |
1
26 |
1
27 |
1
28 |
1
29 |
1
30 |
1
31 |
1
32 |
1
33 |
1
34 |
1
35 |
36 | 37 |
38 |
1
39 |
11
40 |
41 | 42 |
43 |
2
44 |
10
45 |
46 | 47 |
48 |
6
49 |
6
50 |
51 | 52 |
53 | 54 |

Nested Grid

55 | 56 |
57 |
8 58 |
59 |
8 Nested 60 |
61 |
8 Nested Again
62 |
4
63 |
64 |
65 |
4
66 |
67 |
68 |
4
69 |
70 | 71 |

Offsets

72 | 73 |
74 |
1
75 |
11
76 |
77 |
78 |
1
79 |
10, offset 1
80 |
81 |
82 |
1
83 |
9, offset 2
84 |
85 |
86 |
1
87 |
8, offset 3
88 |
89 | 90 |

Centered

91 | 92 |
93 |
3 centered
94 |
95 |
96 |
6 centered
97 |
98 |
99 |
9 centered
100 |
101 |
102 |
11 centered
103 |
104 | 105 |

Source Ordering

106 | 107 |
108 |
2
109 |
10, last
110 |
111 |
112 |
3
113 |
9, last
114 |
115 |
116 |
4
117 |
8, last
118 |
119 |
120 |
5
121 |
5, last
122 |
123 |
124 |
6
125 |
6, last
126 |
127 | 128 |
129 | 130 | 131 | -------------------------------------------------------------------------------- /_site/sass/config.rb: -------------------------------------------------------------------------------- 1 | # COMPASS 2 | # ---------------------------------------------- 3 | # Configuration 4 | # http://compass-style.org/help/tutorials/configuration-reference/ 5 | # 6 | # ---------------------------------------------- 7 | # PRODUCTION 8 | # $ compass compile -e production -s compressed --no-line-comments --force --trace --time 9 | # ---------------------------------------------- 10 | # 11 | 12 | # Can be :stand_alone or :rails. Defaults to :stand_alone 13 | project_type = :stand_alone 14 | 15 | # paths 16 | http_path = "/" 17 | sass_dir = "./" 18 | css_dir = "../styles" 19 | fonts_dir = "../fonts" 20 | images_dir = "../images" 21 | javascripts_dir = "../scripts" 22 | 23 | # output option: nested, expanded, compact, compressed 24 | output_style = :expanded 25 | 26 | # The environment mode. 27 | # Defaults to :production, can also be :development 28 | # Use :development to see line numbers, file names, etc 29 | environment = :production 30 | 31 | # Enable/Disable line comments 32 | line_comments = false 33 | 34 | # Enable relative paths to assets via compass helper functions. 35 | relative_assets = true 36 | 37 | # disable the asset cache buster 38 | asset_cache_buster :none -------------------------------------------------------------------------------- /_site/sass/grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | * ---------------------------------------------- * 4 | * Grid 5 | * http://brajeshwar.github.io/grid/ 6 | * 7 | * Brajeshwar 8 | * http://brajeshwar.me 9 | * ---------------------------------------------- * 10 | */ 11 | 12 | 13 | // legacy support 14 | $legacy-support-for-mozilla : false; 15 | $legacy-support-for-webkit : false; 16 | 17 | // experimental support 18 | $experimental-support-for-mozilla : true; 19 | $experimental-support-for-webkit : true; 20 | $experimental-support-for-opera : false; 21 | $experimental-support-for-microsoft : false; 22 | $experimental-support-for-khtml : false; 23 | $experimental-support-for-pie : false; 24 | 25 | // set the initial em-base 26 | $em-base: 16px !default; 27 | 28 | // ---------------------------------------------- // 29 | 30 | // strips the unit of measure 31 | @function strip-unit($num) { 32 | @return $num / ($num * 0 + 1); 33 | } 34 | 35 | // pixel to em calculation 36 | // em-calc(#); 37 | // enter the number, no need to mention the unit. 38 | @function convert-to-em($value, $base-value: $em-base) { 39 | $value: strip-unit($value) / strip-unit($base-value) * 1em; 40 | @if $value == 0em { 41 | $value: 0; 42 | } 43 | // Turn 0em into 0 44 | @return $value; 45 | } 46 | 47 | @function em-calc($values, $base-value: $em-base) { 48 | $max: length($values); 49 | @if $max == 1 { 50 | @return convert-to-em(nth($values, 1), $base-value); 51 | } 52 | $emValues: (); 53 | @for $i from 1 through $max { 54 | $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value)); 55 | } 56 | @return $emValues; 57 | } 58 | 59 | // grid calculation 60 | @function gridCalc($colNumber, $totalColumns) { 61 | @return percentage($colNumber / $totalColumns); 62 | } 63 | 64 | // ---------------------------------------------- // 65 | // GRID CONFIG 66 | // write the default classes? 67 | $split-classes: true !default; 68 | 69 | // namespaces 70 | // what would you like the default grid classes to be 71 | $name-row: "row" !default; 72 | $name-column: "column" !default; 73 | $name-small: "small" !default; 74 | $name-medium: "medium" !default; 75 | $name-large: "large" !default; 76 | 77 | 78 | $row-width: em-calc(1140) !default; 79 | $column-gutter: em-calc(24) !default; 80 | $total-columns: 12 !default; 81 | 82 | $text-direction: ltr !default; 83 | $default-float: left !default; 84 | $opposite-direction: right !default; 85 | 86 | @if $text-direction == ltr { 87 | $default-float: left; 88 | $opposite-direction: right; 89 | } @else { 90 | $default-float: right; 91 | $opposite-direction: left; 92 | } 93 | 94 | $small-screen: 768px !default; 95 | $medium-screen: 1024px !default; 96 | $large-screen: 1440px !default; 97 | 98 | $screen: "only screen" !default; 99 | $small: "only screen and (min-width: #{$small-screen})" !default; 100 | $medium: "only screen and (min-width: #{$medium-screen})" !default; 101 | $large: "only screen and (min-width: #{$large-screen})" !default; 102 | $landscape: "only screen and (orientation: landscape)" !default; 103 | $portrait: "only screen and (orientation: portrait)" !default; 104 | 105 | // ---------------------------------------------- // 106 | // MIXINS 107 | 108 | // clearfix 109 | @mixin clearfix { 110 | &:after { 111 | content: ""; 112 | display: table; 113 | clear: both; 114 | } 115 | } 116 | 117 | // box-sizing 118 | // 119 | // Apply a natural box layout model to all elements 120 | // Supported in Chrome, IE8+, Opera, Safari 5.1+ 121 | // 122 | // IE8 does not support box-sizing: border-box; 123 | // with min-width/max-width and min-height/max-height. 124 | // 125 | // For IE6/7 you can optionally use the box-sizing polyfill 126 | // https://github.com/Schepp/box-sizing-polyfill 127 | // 128 | // @include box-sizing(border-box); 129 | @mixin box-sizing($type: border-box) { 130 | // firefox 131 | @if $experimental-support-for-mozilla { 132 | -moz-box-sizing: $type; 133 | } 134 | // old iOS<=4 and Android<=2.3 135 | @if $experimental-support-for-webkit { 136 | -webkit-box-sizing: $type; 137 | } 138 | box-sizing: $type; 139 | } 140 | 141 | // default, nested, and collapsed rows 142 | @mixin grid-row($behavior: false) { 143 | // use @include grid-row(nest); to include a nested row 144 | @if $behavior == nest { 145 | margin-#{$default-float}: -($column-gutter / 2); 146 | margin-#{$opposite-direction}: -($column-gutter / 2); 147 | max-width: none; 148 | width: auto; 149 | } 150 | @else if $behavior == collapse { 151 | margin-#{$default-float}: 0; 152 | margin-#{$opposite-direction}: 0; 153 | max-width: $row-width; 154 | width: 100%; 155 | } 156 | @else if $behavior == nest-collapse { 157 | margin-#{$default-float}: 0; 158 | margin-#{$opposite-direction}: 0; 159 | max-width: none; 160 | width: auto; 161 | } 162 | @else { 163 | margin-#{$default-float}: auto; 164 | margin-#{$opposite-direction}: auto; 165 | margin-top: 0; 166 | margin-bottom: 0; 167 | max-width: $row-width; 168 | width: 100%; 169 | } 170 | @include clearfix; 171 | } 172 | 173 | // create columns 174 | // @include these inside a media query to control small, medium & large grids 175 | @mixin grid-column($columns: false, $last-column: false, $center: false, $offset: false, $push: false, $pull: false, $collapse: false, $float: true, $include-position-relative: false) { 176 | // if collapsed, get rid of gutter padding 177 | @if $collapse { 178 | padding-left: 0; 179 | padding-right: 0; 180 | } 181 | @else if $collapse == false { 182 | padding-left: $column-gutter / 2; 183 | padding-right: $column-gutter / 2; 184 | } 185 | // if a column number is given, calculate width 186 | @if $columns { 187 | width: gridCalc($columns, $total-columns); 188 | // If last column, float naturally instead of to the right 189 | @if $last-column { 190 | float: $opposite-direction; 191 | } 192 | } 193 | // if offset, calculate appropriate margins 194 | @if $offset { 195 | margin-#{$default-float}: gridCalc($offset, $total-columns); 196 | } 197 | // source ordering, adds left/right depending on which you use. 198 | @if $push { 199 | #{$default-float}: gridCalc($push, $total-columns); 200 | #{$opposite-direction}: auto; 201 | } 202 | @if $pull { 203 | #{$opposite-direction}: gridCalc($pull, $total-columns); 204 | #{$default-float}: auto; 205 | } 206 | // if centered, get rid of float and add appropriate margins 207 | @if $center { 208 | margin-#{$default-float}: auto; 209 | margin-#{$opposite-direction}: auto; 210 | float: none !important; 211 | } 212 | @if $float { 213 | @if $float == left or $float == true { 214 | float: $default-float; 215 | } 216 | @else if $float == right { 217 | float: $opposite-direction; 218 | } 219 | @else { 220 | float: none; 221 | } 222 | } 223 | // this helps us not need to repeat "position:relative" everywehere 224 | @if $include-position-relative { 225 | position: relative; 226 | } 227 | } 228 | 229 | // ---------------------------------------------- // 230 | 231 | // right and left "auto" for grid 232 | %right-auto { 233 | #{$opposite-direction}: auto; 234 | } 235 | 236 | %left-auto { 237 | #{$default-float}: auto; 238 | } 239 | 240 | 241 | // build the grid classes 242 | // if it is set so in the CONFIG 243 | // this can be disabled and 244 | // set semantic classes instead of the generic span, row and column classes. 245 | @if $split-classes != false { 246 | 247 | *, 248 | *:after, 249 | *:before { 250 | @include box-sizing(border-box); 251 | } 252 | 253 | /* Grid HTML Classes */ 254 | .#{$name-row} { 255 | @include grid-row; 256 | &.collapse { 257 | .#{$name-column}, 258 | .#{$name-column}s { 259 | @include grid-column($collapse: true); 260 | } 261 | } 262 | .#{$name-row} { 263 | @include grid-row($behavior: nest); 264 | &.collapse { 265 | @include grid-row($behavior: nest-collapse); 266 | } 267 | } 268 | } 269 | .#{$name-column}, 270 | .#{$name-column}s { 271 | @include grid-column($columns: $total-columns, $include_position_relative: true); 272 | } 273 | @media only screen { 274 | @for $i from 1 through $total-columns { 275 | .#{$name-small}#{-$i} { 276 | @include grid-column($collapse: null, $columns: $i, $float: false); 277 | } 278 | } 279 | @for $i from 0 through $total-columns - 2 { 280 | .#{$name-small}-offset-#{$i} { 281 | @include grid-column($collapse: null, $float: false, $offset: $i); 282 | } 283 | } 284 | [class*="column"] + [class*="column"]:last-child { 285 | float: $opposite-direction; 286 | } 287 | [class*="column"] + [class*="column"].end { 288 | float: $default-float; 289 | } 290 | .#{$name-column}.#{$name-small}-centered, 291 | .#{$name-column}s.#{$name-small}-centered { 292 | @include grid-column($center: true, $collapse: null, $float: false); 293 | } 294 | } 295 | @media only screen and (min-width: $small-screen) { 296 | @for $i from 1 through $total-columns { 297 | .#{$name-medium}#{-$i} { 298 | @include grid-column($collapse: null, $columns: $i, $float: false); 299 | } 300 | } 301 | @for $i from 0 through $total-columns - 1 { 302 | .#{$name-medium}-offset-#{$i} { 303 | @include grid-column($collapse: null, $float: false, $offset: $i); 304 | } 305 | } 306 | @for $i from 1 through $total-columns - 1 { 307 | .#{$name-medium}-push#{-$i} { 308 | @include grid-column($collapse: null, $float: false, $push: $i); 309 | } 310 | .#{$name-medium}-pull#{-$i} { 311 | @include grid-column($collapse: null, $float: false, $pull: $i); 312 | } 313 | } 314 | .#{$name-column}.#{$name-medium}-centered, 315 | .#{$name-column}s.#{$name-medium}-centered { 316 | @include grid-column($center: true, $collapse: null, $float: false); 317 | } 318 | .#{$name-column}.#{$name-medium}-uncentered, 319 | .#{$name-column}s.#{$name-medium}-uncentered { 320 | margin-#{$default-float}: 0; 321 | margin-#{$opposite-direction}: 0; 322 | float: $default-float !important; 323 | } 324 | } 325 | @media only screen and (min-width: $medium-screen) { 326 | @for $i from 1 through $total-columns { 327 | .#{$name-large}#{-$i} { 328 | @include grid-column($collapse: null, $columns: $i, $float: false); 329 | } 330 | } 331 | @for $i from 0 through $total-columns - 1 { 332 | .#{$name-large}-offset-#{$i} { 333 | @include grid-column($collapse: null, $float: false, $offset: $i); 334 | } 335 | } 336 | @for $i from 1 through $total-columns - 1 { 337 | .#{$name-large}-push#{-$i} { 338 | @include grid-column($collapse: null, $float: false, $push: $i); 339 | } 340 | .#{$name-large}-pull#{-$i} { 341 | @include grid-column($collapse: null, $float: false, $pull: $i); 342 | } 343 | } 344 | .#{$name-column}.#{$name-large}-centered, 345 | .#{$name-column}s.#{$name-large}-centered { 346 | @include grid-column($center: true, $collapse: null, $float: false); 347 | } 348 | .#{$name-column}.#{$name-large}-uncentered, 349 | .#{$name-column}s.#{$name-large}-uncentered { 350 | margin-#{$default-float}: 0; 351 | margin-#{$opposite-direction}: 0; 352 | float: $default-float !important; 353 | } 354 | } 355 | } -------------------------------------------------------------------------------- /_site/sass/style.scss: -------------------------------------------------------------------------------- 1 | @import "compass"; 2 | 3 | $white: #fff !default; 4 | $black: #000 !default; 5 | 6 | $color-background: $white !default; 7 | $color-body: #3a3a3a !default; 8 | $color-border: #aaa !default; 9 | 10 | .column, 11 | .columns { 12 | background: #eee; 13 | border-right: 1px solid $color-border; 14 | border-bottom: 1px solid $color-border; 15 | padding: 1em; 16 | 17 | &:first-child { 18 | border-left: 1px solid $color-border; 19 | } 20 | } 21 | 22 | body { 23 | margin: 0 auto; 24 | background: $color-background; 25 | color: $color-body; 26 | } 27 | 28 | hr { 29 | border-top: 1px solid $color-border; 30 | border-bottom: 0; 31 | border-right: 0; 32 | border-left: 0; 33 | clear: both; 34 | height: 1px; 35 | margin: rhythm() 0; 36 | min-height: 0; 37 | } 38 | 39 | header { 40 | background: darken($color-background, 5%); 41 | border-bottom: 1px solid #ccc; 42 | padding: 0.25em 0; 43 | margin-bottom: 2em; 44 | } 45 | 46 | .env { 47 | max-width: 1140px; 48 | margin: 0 auto; 49 | } -------------------------------------------------------------------------------- /_site/styles/grid.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * ---------------------------------------------- * 3 | * Grid 4 | * http://brajeshwar.github.io/grid/ 5 | * https://github.com/brajeshwar/grid 6 | * 7 | * Brajeshwar 8 | * http://brajeshwar.me 9 | * ---------------------------------------------- * 10 | */ 11 | *, 12 | *:after, 13 | *:before { 14 | -moz-box-sizing: border-box; 15 | -webkit-box-sizing: border-box; 16 | box-sizing: border-box; 17 | } 18 | 19 | /* Grid HTML Classes */ 20 | .row { 21 | margin-left: auto; 22 | margin-right: auto; 23 | margin-top: 0; 24 | margin-bottom: 0; 25 | max-width: 71.25em; 26 | width: 100%; 27 | } 28 | .row:after { 29 | content: ""; 30 | display: table; 31 | clear: both; 32 | } 33 | .row.collapse .column, 34 | .row.collapse .columns { 35 | padding-left: 0; 36 | padding-right: 0; 37 | float: left; 38 | } 39 | .row .row { 40 | margin-left: -0.75em; 41 | margin-right: -0.75em; 42 | max-width: none; 43 | width: auto; 44 | } 45 | .row .row:after { 46 | content: ""; 47 | display: table; 48 | clear: both; 49 | } 50 | .row .row.collapse { 51 | margin-left: 0; 52 | margin-right: 0; 53 | max-width: none; 54 | width: auto; 55 | } 56 | .row .row.collapse:after { 57 | content: ""; 58 | display: table; 59 | clear: both; 60 | } 61 | 62 | .column, 63 | .columns { 64 | padding-left: 0.75em; 65 | padding-right: 0.75em; 66 | width: 100%; 67 | float: left; 68 | position: relative; 69 | } 70 | 71 | @media only screen { 72 | .small-1 { 73 | width: 8.33333%; 74 | } 75 | 76 | .small-2 { 77 | width: 16.66667%; 78 | } 79 | 80 | .small-3 { 81 | width: 25%; 82 | } 83 | 84 | .small-4 { 85 | width: 33.33333%; 86 | } 87 | 88 | .small-5 { 89 | width: 41.66667%; 90 | } 91 | 92 | .small-6 { 93 | width: 50%; 94 | } 95 | 96 | .small-7 { 97 | width: 58.33333%; 98 | } 99 | 100 | .small-8 { 101 | width: 66.66667%; 102 | } 103 | 104 | .small-9 { 105 | width: 75%; 106 | } 107 | 108 | .small-10 { 109 | width: 83.33333%; 110 | } 111 | 112 | .small-11 { 113 | width: 91.66667%; 114 | } 115 | 116 | .small-12 { 117 | width: 100%; 118 | } 119 | 120 | .small-offset-0 { 121 | margin-left: 0%; 122 | } 123 | 124 | .small-offset-1 { 125 | margin-left: 8.33333%; 126 | } 127 | 128 | .small-offset-2 { 129 | margin-left: 16.66667%; 130 | } 131 | 132 | .small-offset-3 { 133 | margin-left: 25%; 134 | } 135 | 136 | .small-offset-4 { 137 | margin-left: 33.33333%; 138 | } 139 | 140 | .small-offset-5 { 141 | margin-left: 41.66667%; 142 | } 143 | 144 | .small-offset-6 { 145 | margin-left: 50%; 146 | } 147 | 148 | .small-offset-7 { 149 | margin-left: 58.33333%; 150 | } 151 | 152 | .small-offset-8 { 153 | margin-left: 66.66667%; 154 | } 155 | 156 | .small-offset-9 { 157 | margin-left: 75%; 158 | } 159 | 160 | .small-offset-10 { 161 | margin-left: 83.33333%; 162 | } 163 | 164 | [class*="column"] + [class*="column"]:last-child { 165 | float: right; 166 | } 167 | 168 | [class*="column"] + [class*="column"].end { 169 | float: left; 170 | } 171 | 172 | .column.small-centered, 173 | .columns.small-centered { 174 | margin-left: auto; 175 | margin-right: auto; 176 | float: none !important; 177 | } 178 | } 179 | @media only screen and (min-width: 768px) { 180 | .medium-1 { 181 | width: 8.33333%; 182 | } 183 | 184 | .medium-2 { 185 | width: 16.66667%; 186 | } 187 | 188 | .medium-3 { 189 | width: 25%; 190 | } 191 | 192 | .medium-4 { 193 | width: 33.33333%; 194 | } 195 | 196 | .medium-5 { 197 | width: 41.66667%; 198 | } 199 | 200 | .medium-6 { 201 | width: 50%; 202 | } 203 | 204 | .medium-7 { 205 | width: 58.33333%; 206 | } 207 | 208 | .medium-8 { 209 | width: 66.66667%; 210 | } 211 | 212 | .medium-9 { 213 | width: 75%; 214 | } 215 | 216 | .medium-10 { 217 | width: 83.33333%; 218 | } 219 | 220 | .medium-11 { 221 | width: 91.66667%; 222 | } 223 | 224 | .medium-12 { 225 | width: 100%; 226 | } 227 | 228 | .medium-offset-0 { 229 | margin-left: 0%; 230 | } 231 | 232 | .medium-offset-1 { 233 | margin-left: 8.33333%; 234 | } 235 | 236 | .medium-offset-2 { 237 | margin-left: 16.66667%; 238 | } 239 | 240 | .medium-offset-3 { 241 | margin-left: 25%; 242 | } 243 | 244 | .medium-offset-4 { 245 | margin-left: 33.33333%; 246 | } 247 | 248 | .medium-offset-5 { 249 | margin-left: 41.66667%; 250 | } 251 | 252 | .medium-offset-6 { 253 | margin-left: 50%; 254 | } 255 | 256 | .medium-offset-7 { 257 | margin-left: 58.33333%; 258 | } 259 | 260 | .medium-offset-8 { 261 | margin-left: 66.66667%; 262 | } 263 | 264 | .medium-offset-9 { 265 | margin-left: 75%; 266 | } 267 | 268 | .medium-offset-10 { 269 | margin-left: 83.33333%; 270 | } 271 | 272 | .medium-offset-11 { 273 | margin-left: 91.66667%; 274 | } 275 | 276 | .medium-push-1 { 277 | left: 8.33333%; 278 | right: auto; 279 | } 280 | 281 | .medium-pull-1 { 282 | right: 8.33333%; 283 | left: auto; 284 | } 285 | 286 | .medium-push-2 { 287 | left: 16.66667%; 288 | right: auto; 289 | } 290 | 291 | .medium-pull-2 { 292 | right: 16.66667%; 293 | left: auto; 294 | } 295 | 296 | .medium-push-3 { 297 | left: 25%; 298 | right: auto; 299 | } 300 | 301 | .medium-pull-3 { 302 | right: 25%; 303 | left: auto; 304 | } 305 | 306 | .medium-push-4 { 307 | left: 33.33333%; 308 | right: auto; 309 | } 310 | 311 | .medium-pull-4 { 312 | right: 33.33333%; 313 | left: auto; 314 | } 315 | 316 | .medium-push-5 { 317 | left: 41.66667%; 318 | right: auto; 319 | } 320 | 321 | .medium-pull-5 { 322 | right: 41.66667%; 323 | left: auto; 324 | } 325 | 326 | .medium-push-6 { 327 | left: 50%; 328 | right: auto; 329 | } 330 | 331 | .medium-pull-6 { 332 | right: 50%; 333 | left: auto; 334 | } 335 | 336 | .medium-push-7 { 337 | left: 58.33333%; 338 | right: auto; 339 | } 340 | 341 | .medium-pull-7 { 342 | right: 58.33333%; 343 | left: auto; 344 | } 345 | 346 | .medium-push-8 { 347 | left: 66.66667%; 348 | right: auto; 349 | } 350 | 351 | .medium-pull-8 { 352 | right: 66.66667%; 353 | left: auto; 354 | } 355 | 356 | .medium-push-9 { 357 | left: 75%; 358 | right: auto; 359 | } 360 | 361 | .medium-pull-9 { 362 | right: 75%; 363 | left: auto; 364 | } 365 | 366 | .medium-push-10 { 367 | left: 83.33333%; 368 | right: auto; 369 | } 370 | 371 | .medium-pull-10 { 372 | right: 83.33333%; 373 | left: auto; 374 | } 375 | 376 | .medium-push-11 { 377 | left: 91.66667%; 378 | right: auto; 379 | } 380 | 381 | .medium-pull-11 { 382 | right: 91.66667%; 383 | left: auto; 384 | } 385 | 386 | .column.medium-centered, 387 | .columns.medium-centered { 388 | margin-left: auto; 389 | margin-right: auto; 390 | float: none !important; 391 | } 392 | 393 | .column.medium-uncentered, 394 | .columns.medium-uncentered { 395 | margin-left: 0; 396 | margin-right: 0; 397 | float: left !important; 398 | } 399 | } 400 | @media only screen and (min-width: 1024px) { 401 | .large-1 { 402 | width: 8.33333%; 403 | } 404 | 405 | .large-2 { 406 | width: 16.66667%; 407 | } 408 | 409 | .large-3 { 410 | width: 25%; 411 | } 412 | 413 | .large-4 { 414 | width: 33.33333%; 415 | } 416 | 417 | .large-5 { 418 | width: 41.66667%; 419 | } 420 | 421 | .large-6 { 422 | width: 50%; 423 | } 424 | 425 | .large-7 { 426 | width: 58.33333%; 427 | } 428 | 429 | .large-8 { 430 | width: 66.66667%; 431 | } 432 | 433 | .large-9 { 434 | width: 75%; 435 | } 436 | 437 | .large-10 { 438 | width: 83.33333%; 439 | } 440 | 441 | .large-11 { 442 | width: 91.66667%; 443 | } 444 | 445 | .large-12 { 446 | width: 100%; 447 | } 448 | 449 | .large-offset-0 { 450 | margin-left: 0%; 451 | } 452 | 453 | .large-offset-1 { 454 | margin-left: 8.33333%; 455 | } 456 | 457 | .large-offset-2 { 458 | margin-left: 16.66667%; 459 | } 460 | 461 | .large-offset-3 { 462 | margin-left: 25%; 463 | } 464 | 465 | .large-offset-4 { 466 | margin-left: 33.33333%; 467 | } 468 | 469 | .large-offset-5 { 470 | margin-left: 41.66667%; 471 | } 472 | 473 | .large-offset-6 { 474 | margin-left: 50%; 475 | } 476 | 477 | .large-offset-7 { 478 | margin-left: 58.33333%; 479 | } 480 | 481 | .large-offset-8 { 482 | margin-left: 66.66667%; 483 | } 484 | 485 | .large-offset-9 { 486 | margin-left: 75%; 487 | } 488 | 489 | .large-offset-10 { 490 | margin-left: 83.33333%; 491 | } 492 | 493 | .large-offset-11 { 494 | margin-left: 91.66667%; 495 | } 496 | 497 | .large-push-1 { 498 | left: 8.33333%; 499 | right: auto; 500 | } 501 | 502 | .large-pull-1 { 503 | right: 8.33333%; 504 | left: auto; 505 | } 506 | 507 | .large-push-2 { 508 | left: 16.66667%; 509 | right: auto; 510 | } 511 | 512 | .large-pull-2 { 513 | right: 16.66667%; 514 | left: auto; 515 | } 516 | 517 | .large-push-3 { 518 | left: 25%; 519 | right: auto; 520 | } 521 | 522 | .large-pull-3 { 523 | right: 25%; 524 | left: auto; 525 | } 526 | 527 | .large-push-4 { 528 | left: 33.33333%; 529 | right: auto; 530 | } 531 | 532 | .large-pull-4 { 533 | right: 33.33333%; 534 | left: auto; 535 | } 536 | 537 | .large-push-5 { 538 | left: 41.66667%; 539 | right: auto; 540 | } 541 | 542 | .large-pull-5 { 543 | right: 41.66667%; 544 | left: auto; 545 | } 546 | 547 | .large-push-6 { 548 | left: 50%; 549 | right: auto; 550 | } 551 | 552 | .large-pull-6 { 553 | right: 50%; 554 | left: auto; 555 | } 556 | 557 | .large-push-7 { 558 | left: 58.33333%; 559 | right: auto; 560 | } 561 | 562 | .large-pull-7 { 563 | right: 58.33333%; 564 | left: auto; 565 | } 566 | 567 | .large-push-8 { 568 | left: 66.66667%; 569 | right: auto; 570 | } 571 | 572 | .large-pull-8 { 573 | right: 66.66667%; 574 | left: auto; 575 | } 576 | 577 | .large-push-9 { 578 | left: 75%; 579 | right: auto; 580 | } 581 | 582 | .large-pull-9 { 583 | right: 75%; 584 | left: auto; 585 | } 586 | 587 | .large-push-10 { 588 | left: 83.33333%; 589 | right: auto; 590 | } 591 | 592 | .large-pull-10 { 593 | right: 83.33333%; 594 | left: auto; 595 | } 596 | 597 | .large-push-11 { 598 | left: 91.66667%; 599 | right: auto; 600 | } 601 | 602 | .large-pull-11 { 603 | right: 91.66667%; 604 | left: auto; 605 | } 606 | 607 | .column.large-centered, 608 | .columns.large-centered { 609 | margin-left: auto; 610 | margin-right: auto; 611 | float: none !important; 612 | } 613 | 614 | .column.large-uncentered, 615 | .columns.large-uncentered { 616 | margin-left: 0; 617 | margin-right: 0; 618 | float: left !important; 619 | } 620 | } 621 | -------------------------------------------------------------------------------- /_site/styles/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.3 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address `[hidden]` styling not present in IE 8/9. 48 | * Hide the `template` element in IE, Safari, and Firefox < 22. 49 | */ 50 | 51 | [hidden], 52 | template { 53 | display: none; 54 | } 55 | 56 | /* ========================================================================== 57 | Base 58 | ========================================================================== */ 59 | 60 | /** 61 | * 1. Set default font family to sans-serif. 62 | * 2. Prevent iOS text size adjust after orientation change, without disabling 63 | * user zoom. 64 | */ 65 | 66 | html { 67 | font-family: sans-serif; /* 1 */ 68 | -ms-text-size-adjust: 100%; /* 2 */ 69 | -webkit-text-size-adjust: 100%; /* 2 */ 70 | } 71 | 72 | /** 73 | * Remove default margin. 74 | */ 75 | 76 | body { 77 | margin: 0; 78 | } 79 | 80 | /* ========================================================================== 81 | Links 82 | ========================================================================== */ 83 | 84 | /** 85 | * Remove the gray background color from active links in IE 10. 86 | */ 87 | 88 | a { 89 | background: transparent; 90 | } 91 | 92 | /** 93 | * Address `outline` inconsistency between Chrome and other browsers. 94 | */ 95 | 96 | a:focus { 97 | outline: thin dotted; 98 | } 99 | 100 | /** 101 | * Improve readability when focused and also mouse hovered in all browsers. 102 | */ 103 | 104 | a:active, 105 | a:hover { 106 | outline: 0; 107 | } 108 | 109 | /* ========================================================================== 110 | Typography 111 | ========================================================================== */ 112 | 113 | /** 114 | * Address variable `h1` font-size and margin within `section` and `article` 115 | * contexts in Firefox 4+, Safari 5, and Chrome. 116 | */ 117 | 118 | h1 { 119 | font-size: 2em; 120 | margin: 0.67em 0; 121 | } 122 | 123 | /** 124 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 125 | */ 126 | 127 | abbr[title] { 128 | border-bottom: 1px dotted; 129 | } 130 | 131 | /** 132 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 133 | */ 134 | 135 | b, 136 | strong { 137 | font-weight: bold; 138 | } 139 | 140 | /** 141 | * Address styling not present in Safari 5 and Chrome. 142 | */ 143 | 144 | dfn { 145 | font-style: italic; 146 | } 147 | 148 | /** 149 | * Address differences between Firefox and other browsers. 150 | */ 151 | 152 | hr { 153 | -moz-box-sizing: content-box; 154 | box-sizing: content-box; 155 | height: 0; 156 | } 157 | 158 | /** 159 | * Address styling not present in IE 8/9. 160 | */ 161 | 162 | mark { 163 | background: #ff0; 164 | color: #000; 165 | } 166 | 167 | /** 168 | * Correct font family set oddly in Safari 5 and Chrome. 169 | */ 170 | 171 | code, 172 | kbd, 173 | pre, 174 | samp { 175 | font-family: monospace, serif; 176 | font-size: 1em; 177 | } 178 | 179 | /** 180 | * Improve readability of pre-formatted text in all browsers. 181 | */ 182 | 183 | pre { 184 | white-space: pre-wrap; 185 | } 186 | 187 | /** 188 | * Set consistent quote types. 189 | */ 190 | 191 | q { 192 | quotes: "\201C" "\201D" "\2018" "\2019"; 193 | } 194 | 195 | /** 196 | * Address inconsistent and variable font size in all browsers. 197 | */ 198 | 199 | small { 200 | font-size: 80%; 201 | } 202 | 203 | /** 204 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 205 | */ 206 | 207 | sub, 208 | sup { 209 | font-size: 75%; 210 | line-height: 0; 211 | position: relative; 212 | vertical-align: baseline; 213 | } 214 | 215 | sup { 216 | top: -0.5em; 217 | } 218 | 219 | sub { 220 | bottom: -0.25em; 221 | } 222 | 223 | /* ========================================================================== 224 | Embedded content 225 | ========================================================================== */ 226 | 227 | /** 228 | * Remove border when inside `a` element in IE 8/9. 229 | */ 230 | 231 | img { 232 | border: 0; 233 | } 234 | 235 | /** 236 | * Correct overflow displayed oddly in IE 9. 237 | */ 238 | 239 | svg:not(:root) { 240 | overflow: hidden; 241 | } 242 | 243 | /* ========================================================================== 244 | Figures 245 | ========================================================================== */ 246 | 247 | /** 248 | * Address margin not present in IE 8/9 and Safari 5. 249 | */ 250 | 251 | figure { 252 | margin: 0; 253 | } 254 | 255 | /* ========================================================================== 256 | Forms 257 | ========================================================================== */ 258 | 259 | /** 260 | * Define consistent border, margin, and padding. 261 | */ 262 | 263 | fieldset { 264 | border: 1px solid #c0c0c0; 265 | margin: 0 2px; 266 | padding: 0.35em 0.625em 0.75em; 267 | } 268 | 269 | /** 270 | * 1. Correct `color` not being inherited in IE 8/9. 271 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 272 | */ 273 | 274 | legend { 275 | border: 0; /* 1 */ 276 | padding: 0; /* 2 */ 277 | } 278 | 279 | /** 280 | * 1. Correct font family not being inherited in all browsers. 281 | * 2. Correct font size not being inherited in all browsers. 282 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 283 | */ 284 | 285 | button, 286 | input, 287 | select, 288 | textarea { 289 | font-family: inherit; /* 1 */ 290 | font-size: 100%; /* 2 */ 291 | margin: 0; /* 3 */ 292 | } 293 | 294 | /** 295 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 296 | * the UA stylesheet. 297 | */ 298 | 299 | button, 300 | input { 301 | line-height: normal; 302 | } 303 | 304 | /** 305 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 306 | * All other form control elements do not inherit `text-transform` values. 307 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 308 | * Correct `select` style inheritance in Firefox 4+ and Opera. 309 | */ 310 | 311 | button, 312 | select { 313 | text-transform: none; 314 | } 315 | 316 | /** 317 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 318 | * and `video` controls. 319 | * 2. Correct inability to style clickable `input` types in iOS. 320 | * 3. Improve usability and consistency of cursor style between image-type 321 | * `input` and others. 322 | */ 323 | 324 | button, 325 | html input[type="button"], /* 1 */ 326 | input[type="reset"], 327 | input[type="submit"] { 328 | -webkit-appearance: button; /* 2 */ 329 | cursor: pointer; /* 3 */ 330 | } 331 | 332 | /** 333 | * Re-set default cursor for disabled elements. 334 | */ 335 | 336 | button[disabled], 337 | html input[disabled] { 338 | cursor: default; 339 | } 340 | 341 | /** 342 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 343 | * 2. Remove excess padding in IE 8/9/10. 344 | */ 345 | 346 | input[type="checkbox"], 347 | input[type="radio"] { 348 | box-sizing: border-box; /* 1 */ 349 | padding: 0; /* 2 */ 350 | } 351 | 352 | /** 353 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 354 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 355 | * (include `-moz` to future-proof). 356 | */ 357 | 358 | input[type="search"] { 359 | -webkit-appearance: textfield; /* 1 */ 360 | -moz-box-sizing: content-box; 361 | -webkit-box-sizing: content-box; /* 2 */ 362 | box-sizing: content-box; 363 | } 364 | 365 | /** 366 | * Remove inner padding and search cancel button in Safari 5 and Chrome 367 | * on OS X. 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Remove inner padding and border in Firefox 4+. 377 | */ 378 | 379 | button::-moz-focus-inner, 380 | input::-moz-focus-inner { 381 | border: 0; 382 | padding: 0; 383 | } 384 | 385 | /** 386 | * 1. Remove default vertical scrollbar in IE 8/9. 387 | * 2. Improve readability and alignment in all browsers. 388 | */ 389 | 390 | textarea { 391 | overflow: auto; /* 1 */ 392 | vertical-align: top; /* 2 */ 393 | } 394 | 395 | /* ========================================================================== 396 | Tables 397 | ========================================================================== */ 398 | 399 | /** 400 | * Remove most spacing between table cells. 401 | */ 402 | 403 | table { 404 | border-collapse: collapse; 405 | border-spacing: 0; 406 | } 407 | -------------------------------------------------------------------------------- /_site/styles/style.css: -------------------------------------------------------------------------------- 1 | .column, 2 | .columns { 3 | background: #eee; 4 | border-right: 1px solid #aaaaaa; 5 | border-bottom: 1px solid #aaaaaa; 6 | padding: 1em; 7 | } 8 | .column:first-child, 9 | .columns:first-child { 10 | border-left: 1px solid #aaaaaa; 11 | } 12 | 13 | body { 14 | margin: 0 auto; 15 | background: white; 16 | color: #3a3a3a; 17 | } 18 | 19 | hr { 20 | border-top: 1px solid #aaaaaa; 21 | border-bottom: 0; 22 | border-right: 0; 23 | border-left: 0; 24 | clear: both; 25 | height: 1px; 26 | margin: 1.5em 0; 27 | min-height: 0; 28 | } 29 | 30 | header { 31 | background: #f2f2f2; 32 | border-bottom: 1px solid #ccc; 33 | padding: 0.25em 0; 34 | margin-bottom: 2em; 35 | } 36 | 37 | .env { 38 | max-width: 1140px; 39 | margin: 0 auto; 40 | } 41 | -------------------------------------------------------------------------------- /_site/todo.md: -------------------------------------------------------------------------------- 1 | # TODO 2 | 3 | * Responsive, Mobile-First. 4 | * A LESS version of grid. -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Grid 4 | --- 5 | 6 |
7 |
1
8 |
1
9 |
1
10 |
1
11 |
1
12 |
1
13 |
1
14 |
1
15 |
1
16 |
1
17 |
1
18 |
1
19 |
20 | 21 |
22 |
1
23 |
11
24 |
25 | 26 |
27 |
2
28 |
10
29 |
30 | 31 |
32 |
6
33 |
6
34 |
35 | 36 |
37 | 38 |

Nested Grid

39 | 40 |
41 |
8 42 |
43 |
8 Nested 44 |
45 |
8 Nested Again
46 |
4
47 |
48 |
49 |
4
50 |
51 |
52 |
4
53 |
54 | 55 |

Offsets

56 | 57 |
58 |
1
59 |
11
60 |
61 |
62 |
1
63 |
10, offset 1
64 |
65 |
66 |
1
67 |
9, offset 2
68 |
69 |
70 |
1
71 |
8, offset 3
72 |
73 | 74 |

Centered

75 | 76 |
77 |
3 centered
78 |
79 |
80 |
6 centered
81 |
82 |
83 |
9 centered
84 |
85 |
86 |
11 centered
87 |
88 | 89 |

Source Ordering

90 | 91 |
92 |
2
93 |
10, last
94 |
95 |
96 |
3
97 |
9, last
98 |
99 |
100 |
4
101 |
8, last
102 |
103 |
104 |
5
105 |
5, last
106 |
107 |
108 |
6
109 |
6, last
110 |
-------------------------------------------------------------------------------- /sass/config.rb: -------------------------------------------------------------------------------- 1 | # COMPASS 2 | # ---------------------------------------------- 3 | # Configuration 4 | # http://compass-style.org/help/tutorials/configuration-reference/ 5 | # 6 | # ---------------------------------------------- 7 | # PRODUCTION 8 | # $ compass compile -e production -s compressed --no-line-comments --force --trace --time 9 | # ---------------------------------------------- 10 | # 11 | 12 | # Can be :stand_alone or :rails. Defaults to :stand_alone 13 | project_type = :stand_alone 14 | 15 | # paths 16 | http_path = "/" 17 | sass_dir = "./" 18 | css_dir = "../styles" 19 | fonts_dir = "../fonts" 20 | images_dir = "../images" 21 | javascripts_dir = "../scripts" 22 | 23 | # output option: nested, expanded, compact, compressed 24 | output_style = :expanded 25 | 26 | # The environment mode. 27 | # Defaults to :production, can also be :development 28 | # Use :development to see line numbers, file names, etc 29 | environment = :production 30 | 31 | # Enable/Disable line comments 32 | line_comments = false 33 | 34 | # Enable relative paths to assets via compass helper functions. 35 | relative_assets = true 36 | 37 | # disable the asset cache buster 38 | asset_cache_buster :none -------------------------------------------------------------------------------- /sass/grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | * ---------------------------------------------- * 4 | * Grid 5 | * http://brajeshwar.github.io/grid/ 6 | * 7 | * Brajeshwar 8 | * http://brajeshwar.me 9 | * ---------------------------------------------- * 10 | */ 11 | 12 | 13 | // legacy support 14 | $legacy-support-for-mozilla : false; 15 | $legacy-support-for-webkit : false; 16 | 17 | // experimental support 18 | $experimental-support-for-mozilla : true; 19 | $experimental-support-for-webkit : true; 20 | $experimental-support-for-opera : false; 21 | $experimental-support-for-microsoft : false; 22 | $experimental-support-for-khtml : false; 23 | $experimental-support-for-pie : false; 24 | 25 | // set the initial em-base 26 | $em-base: 16px !default; 27 | 28 | // ---------------------------------------------- // 29 | 30 | // strips the unit of measure 31 | @function strip-unit($num) { 32 | @return $num / ($num * 0 + 1); 33 | } 34 | 35 | // pixel to em calculation 36 | // em-calc(#); 37 | // enter the number, no need to mention the unit. 38 | @function convert-to-em($value, $base-value: $em-base) { 39 | $value: strip-unit($value) / strip-unit($base-value) * 1em; 40 | @if $value == 0em { 41 | $value: 0; 42 | } 43 | // Turn 0em into 0 44 | @return $value; 45 | } 46 | 47 | @function em-calc($values, $base-value: $em-base) { 48 | $max: length($values); 49 | @if $max == 1 { 50 | @return convert-to-em(nth($values, 1), $base-value); 51 | } 52 | $emValues: (); 53 | @for $i from 1 through $max { 54 | $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value)); 55 | } 56 | @return $emValues; 57 | } 58 | 59 | // grid calculation 60 | @function gridCalc($colNumber, $totalColumns) { 61 | @return percentage($colNumber / $totalColumns); 62 | } 63 | 64 | // ---------------------------------------------- // 65 | // GRID CONFIG 66 | // write the default classes? 67 | $split-classes: true !default; 68 | 69 | // namespaces 70 | // what would you like the default grid classes to be 71 | $name-row: "row" !default; 72 | $name-column: "column" !default; 73 | $name-small: "small" !default; 74 | $name-medium: "medium" !default; 75 | $name-large: "large" !default; 76 | 77 | 78 | $row-width: em-calc(1140) !default; 79 | $column-gutter: em-calc(24) !default; 80 | $total-columns: 12 !default; 81 | 82 | $text-direction: ltr !default; 83 | $default-float: left !default; 84 | $opposite-direction: right !default; 85 | 86 | @if $text-direction == ltr { 87 | $default-float: left; 88 | $opposite-direction: right; 89 | } @else { 90 | $default-float: right; 91 | $opposite-direction: left; 92 | } 93 | 94 | $small-screen: 768px !default; 95 | $medium-screen: 1024px !default; 96 | $large-screen: 1440px !default; 97 | 98 | $screen: "only screen" !default; 99 | $small: "only screen and (min-width: #{$small-screen})" !default; 100 | $medium: "only screen and (min-width: #{$medium-screen})" !default; 101 | $large: "only screen and (min-width: #{$large-screen})" !default; 102 | $landscape: "only screen and (orientation: landscape)" !default; 103 | $portrait: "only screen and (orientation: portrait)" !default; 104 | 105 | // ---------------------------------------------- // 106 | // MIXINS 107 | 108 | // clearfix 109 | @mixin clearfix { 110 | &:after { 111 | content: ""; 112 | display: table; 113 | clear: both; 114 | } 115 | } 116 | 117 | // box-sizing 118 | // 119 | // Apply a natural box layout model to all elements 120 | // Supported in Chrome, IE8+, Opera, Safari 5.1+ 121 | // 122 | // IE8 does not support box-sizing: border-box; 123 | // with min-width/max-width and min-height/max-height. 124 | // 125 | // For IE6/7 you can optionally use the box-sizing polyfill 126 | // https://github.com/Schepp/box-sizing-polyfill 127 | // 128 | // @include box-sizing(border-box); 129 | @mixin box-sizing($type: border-box) { 130 | // firefox 131 | @if $experimental-support-for-mozilla { 132 | -moz-box-sizing: $type; 133 | } 134 | // old iOS<=4 and Android<=2.3 135 | @if $experimental-support-for-webkit { 136 | -webkit-box-sizing: $type; 137 | } 138 | box-sizing: $type; 139 | } 140 | 141 | // default, nested, and collapsed rows 142 | @mixin grid-row($behavior: false) { 143 | // use @include grid-row(nest); to include a nested row 144 | @if $behavior == nest { 145 | margin-#{$default-float}: -($column-gutter / 2); 146 | margin-#{$opposite-direction}: -($column-gutter / 2); 147 | max-width: none; 148 | width: auto; 149 | } 150 | @else if $behavior == collapse { 151 | margin-#{$default-float}: 0; 152 | margin-#{$opposite-direction}: 0; 153 | max-width: $row-width; 154 | width: 100%; 155 | } 156 | @else if $behavior == nest-collapse { 157 | margin-#{$default-float}: 0; 158 | margin-#{$opposite-direction}: 0; 159 | max-width: none; 160 | width: auto; 161 | } 162 | @else { 163 | margin-#{$default-float}: auto; 164 | margin-#{$opposite-direction}: auto; 165 | margin-top: 0; 166 | margin-bottom: 0; 167 | max-width: $row-width; 168 | width: 100%; 169 | } 170 | @include clearfix; 171 | } 172 | 173 | // create columns 174 | // @include these inside a media query to control small, medium & large grids 175 | @mixin grid-column($columns: false, $last-column: false, $center: false, $offset: false, $push: false, $pull: false, $collapse: false, $float: true, $include-position-relative: false) { 176 | // if collapsed, get rid of gutter padding 177 | @if $collapse { 178 | padding-left: 0; 179 | padding-right: 0; 180 | } 181 | @else if $collapse == false { 182 | padding-left: $column-gutter / 2; 183 | padding-right: $column-gutter / 2; 184 | } 185 | // if a column number is given, calculate width 186 | @if $columns { 187 | width: gridCalc($columns, $total-columns); 188 | // If last column, float naturally instead of to the right 189 | @if $last-column { 190 | float: $opposite-direction; 191 | } 192 | } 193 | // if offset, calculate appropriate margins 194 | @if $offset { 195 | margin-#{$default-float}: gridCalc($offset, $total-columns); 196 | } 197 | // source ordering, adds left/right depending on which you use. 198 | @if $push { 199 | #{$default-float}: gridCalc($push, $total-columns); 200 | #{$opposite-direction}: auto; 201 | } 202 | @if $pull { 203 | #{$opposite-direction}: gridCalc($pull, $total-columns); 204 | #{$default-float}: auto; 205 | } 206 | // if centered, get rid of float and add appropriate margins 207 | @if $center { 208 | margin-#{$default-float}: auto; 209 | margin-#{$opposite-direction}: auto; 210 | float: none !important; 211 | } 212 | @if $float { 213 | @if $float == left or $float == true { 214 | float: $default-float; 215 | } 216 | @else if $float == right { 217 | float: $opposite-direction; 218 | } 219 | @else { 220 | float: none; 221 | } 222 | } 223 | // this helps us not need to repeat "position:relative" everywehere 224 | @if $include-position-relative { 225 | position: relative; 226 | } 227 | } 228 | 229 | // ---------------------------------------------- // 230 | 231 | // right and left "auto" for grid 232 | %right-auto { 233 | #{$opposite-direction}: auto; 234 | } 235 | 236 | %left-auto { 237 | #{$default-float}: auto; 238 | } 239 | 240 | 241 | // build the grid classes 242 | // if it is set so in the CONFIG 243 | // this can be disabled and 244 | // set semantic classes instead of the generic span, row and column classes. 245 | @if $split-classes != false { 246 | 247 | *, 248 | *:after, 249 | *:before { 250 | @include box-sizing(border-box); 251 | } 252 | 253 | /* Grid HTML Classes */ 254 | .#{$name-row} { 255 | @include grid-row; 256 | &.collapse { 257 | .#{$name-column}, 258 | .#{$name-column}s { 259 | @include grid-column($collapse: true); 260 | } 261 | } 262 | .#{$name-row} { 263 | @include grid-row($behavior: nest); 264 | &.collapse { 265 | @include grid-row($behavior: nest-collapse); 266 | } 267 | } 268 | } 269 | .#{$name-column}, 270 | .#{$name-column}s { 271 | @include grid-column($columns: $total-columns, $include_position_relative: true); 272 | } 273 | @media only screen { 274 | @for $i from 1 through $total-columns { 275 | .#{$name-small}#{-$i} { 276 | @include grid-column($collapse: null, $columns: $i, $float: false); 277 | } 278 | } 279 | @for $i from 0 through $total-columns - 2 { 280 | .#{$name-small}-offset-#{$i} { 281 | @include grid-column($collapse: null, $float: false, $offset: $i); 282 | } 283 | } 284 | [class*="column"] + [class*="column"]:last-child { 285 | float: $opposite-direction; 286 | } 287 | [class*="column"] + [class*="column"].end { 288 | float: $default-float; 289 | } 290 | .#{$name-column}.#{$name-small}-centered, 291 | .#{$name-column}s.#{$name-small}-centered { 292 | @include grid-column($center: true, $collapse: null, $float: false); 293 | } 294 | } 295 | @media only screen and (min-width: $small-screen) { 296 | @for $i from 1 through $total-columns { 297 | .#{$name-medium}#{-$i} { 298 | @include grid-column($collapse: null, $columns: $i, $float: false); 299 | } 300 | } 301 | @for $i from 0 through $total-columns - 1 { 302 | .#{$name-medium}-offset-#{$i} { 303 | @include grid-column($collapse: null, $float: false, $offset: $i); 304 | } 305 | } 306 | @for $i from 1 through $total-columns - 1 { 307 | .#{$name-medium}-push#{-$i} { 308 | @include grid-column($collapse: null, $float: false, $push: $i); 309 | } 310 | .#{$name-medium}-pull#{-$i} { 311 | @include grid-column($collapse: null, $float: false, $pull: $i); 312 | } 313 | } 314 | .#{$name-column}.#{$name-medium}-centered, 315 | .#{$name-column}s.#{$name-medium}-centered { 316 | @include grid-column($center: true, $collapse: null, $float: false); 317 | } 318 | .#{$name-column}.#{$name-medium}-uncentered, 319 | .#{$name-column}s.#{$name-medium}-uncentered { 320 | margin-#{$default-float}: 0; 321 | margin-#{$opposite-direction}: 0; 322 | float: $default-float !important; 323 | } 324 | } 325 | @media only screen and (min-width: $medium-screen) { 326 | @for $i from 1 through $total-columns { 327 | .#{$name-large}#{-$i} { 328 | @include grid-column($collapse: null, $columns: $i, $float: false); 329 | } 330 | } 331 | @for $i from 0 through $total-columns - 1 { 332 | .#{$name-large}-offset-#{$i} { 333 | @include grid-column($collapse: null, $float: false, $offset: $i); 334 | } 335 | } 336 | @for $i from 1 through $total-columns - 1 { 337 | .#{$name-large}-push#{-$i} { 338 | @include grid-column($collapse: null, $float: false, $push: $i); 339 | } 340 | .#{$name-large}-pull#{-$i} { 341 | @include grid-column($collapse: null, $float: false, $pull: $i); 342 | } 343 | } 344 | .#{$name-column}.#{$name-large}-centered, 345 | .#{$name-column}s.#{$name-large}-centered { 346 | @include grid-column($center: true, $collapse: null, $float: false); 347 | } 348 | .#{$name-column}.#{$name-large}-uncentered, 349 | .#{$name-column}s.#{$name-large}-uncentered { 350 | margin-#{$default-float}: 0; 351 | margin-#{$opposite-direction}: 0; 352 | float: $default-float !important; 353 | } 354 | } 355 | } -------------------------------------------------------------------------------- /sass/style.scss: -------------------------------------------------------------------------------- 1 | @import "compass"; 2 | 3 | $white: #fff !default; 4 | $black: #000 !default; 5 | 6 | $color-background: $white !default; 7 | $color-body: #3a3a3a !default; 8 | $color-border: #aaa !default; 9 | 10 | .column, 11 | .columns { 12 | background: #eee; 13 | border-right: 1px solid $color-border; 14 | border-bottom: 1px solid $color-border; 15 | padding: 1em; 16 | 17 | &:first-child { 18 | border-left: 1px solid $color-border; 19 | } 20 | } 21 | 22 | body { 23 | margin: 0 auto; 24 | background: $color-background; 25 | color: $color-body; 26 | } 27 | 28 | hr { 29 | border-top: 1px solid $color-border; 30 | border-bottom: 0; 31 | border-right: 0; 32 | border-left: 0; 33 | clear: both; 34 | height: 1px; 35 | margin: rhythm() 0; 36 | min-height: 0; 37 | } 38 | 39 | header { 40 | background: darken($color-background, 5%); 41 | border-bottom: 1px solid #ccc; 42 | padding: 0.25em 0; 43 | margin-bottom: 2em; 44 | } 45 | 46 | .env { 47 | max-width: 1140px; 48 | margin: 0 auto; 49 | } -------------------------------------------------------------------------------- /styles/grid.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * ---------------------------------------------- * 3 | * Grid 4 | * http://brajeshwar.github.io/grid/ 5 | * https://github.com/brajeshwar/grid 6 | * 7 | * Brajeshwar 8 | * http://brajeshwar.me 9 | * ---------------------------------------------- * 10 | */ 11 | *, 12 | *:after, 13 | *:before { 14 | -moz-box-sizing: border-box; 15 | -webkit-box-sizing: border-box; 16 | box-sizing: border-box; 17 | } 18 | 19 | /* Grid HTML Classes */ 20 | .row { 21 | margin-left: auto; 22 | margin-right: auto; 23 | margin-top: 0; 24 | margin-bottom: 0; 25 | max-width: 71.25em; 26 | width: 100%; 27 | } 28 | .row:after { 29 | content: ""; 30 | display: table; 31 | clear: both; 32 | } 33 | .row.collapse .column, 34 | .row.collapse .columns { 35 | padding-left: 0; 36 | padding-right: 0; 37 | float: left; 38 | } 39 | .row .row { 40 | margin-left: -0.75em; 41 | margin-right: -0.75em; 42 | max-width: none; 43 | width: auto; 44 | } 45 | .row .row:after { 46 | content: ""; 47 | display: table; 48 | clear: both; 49 | } 50 | .row .row.collapse { 51 | margin-left: 0; 52 | margin-right: 0; 53 | max-width: none; 54 | width: auto; 55 | } 56 | .row .row.collapse:after { 57 | content: ""; 58 | display: table; 59 | clear: both; 60 | } 61 | 62 | .column, 63 | .columns { 64 | padding-left: 0.75em; 65 | padding-right: 0.75em; 66 | width: 100%; 67 | float: left; 68 | position: relative; 69 | } 70 | 71 | @media only screen { 72 | .small-1 { 73 | width: 8.33333%; 74 | } 75 | 76 | .small-2 { 77 | width: 16.66667%; 78 | } 79 | 80 | .small-3 { 81 | width: 25%; 82 | } 83 | 84 | .small-4 { 85 | width: 33.33333%; 86 | } 87 | 88 | .small-5 { 89 | width: 41.66667%; 90 | } 91 | 92 | .small-6 { 93 | width: 50%; 94 | } 95 | 96 | .small-7 { 97 | width: 58.33333%; 98 | } 99 | 100 | .small-8 { 101 | width: 66.66667%; 102 | } 103 | 104 | .small-9 { 105 | width: 75%; 106 | } 107 | 108 | .small-10 { 109 | width: 83.33333%; 110 | } 111 | 112 | .small-11 { 113 | width: 91.66667%; 114 | } 115 | 116 | .small-12 { 117 | width: 100%; 118 | } 119 | 120 | .small-offset-0 { 121 | margin-left: 0%; 122 | } 123 | 124 | .small-offset-1 { 125 | margin-left: 8.33333%; 126 | } 127 | 128 | .small-offset-2 { 129 | margin-left: 16.66667%; 130 | } 131 | 132 | .small-offset-3 { 133 | margin-left: 25%; 134 | } 135 | 136 | .small-offset-4 { 137 | margin-left: 33.33333%; 138 | } 139 | 140 | .small-offset-5 { 141 | margin-left: 41.66667%; 142 | } 143 | 144 | .small-offset-6 { 145 | margin-left: 50%; 146 | } 147 | 148 | .small-offset-7 { 149 | margin-left: 58.33333%; 150 | } 151 | 152 | .small-offset-8 { 153 | margin-left: 66.66667%; 154 | } 155 | 156 | .small-offset-9 { 157 | margin-left: 75%; 158 | } 159 | 160 | .small-offset-10 { 161 | margin-left: 83.33333%; 162 | } 163 | 164 | [class*="column"] + [class*="column"]:last-child { 165 | float: right; 166 | } 167 | 168 | [class*="column"] + [class*="column"].end { 169 | float: left; 170 | } 171 | 172 | .column.small-centered, 173 | .columns.small-centered { 174 | margin-left: auto; 175 | margin-right: auto; 176 | float: none !important; 177 | } 178 | } 179 | @media only screen and (min-width: 768px) { 180 | .medium-1 { 181 | width: 8.33333%; 182 | } 183 | 184 | .medium-2 { 185 | width: 16.66667%; 186 | } 187 | 188 | .medium-3 { 189 | width: 25%; 190 | } 191 | 192 | .medium-4 { 193 | width: 33.33333%; 194 | } 195 | 196 | .medium-5 { 197 | width: 41.66667%; 198 | } 199 | 200 | .medium-6 { 201 | width: 50%; 202 | } 203 | 204 | .medium-7 { 205 | width: 58.33333%; 206 | } 207 | 208 | .medium-8 { 209 | width: 66.66667%; 210 | } 211 | 212 | .medium-9 { 213 | width: 75%; 214 | } 215 | 216 | .medium-10 { 217 | width: 83.33333%; 218 | } 219 | 220 | .medium-11 { 221 | width: 91.66667%; 222 | } 223 | 224 | .medium-12 { 225 | width: 100%; 226 | } 227 | 228 | .medium-offset-0 { 229 | margin-left: 0%; 230 | } 231 | 232 | .medium-offset-1 { 233 | margin-left: 8.33333%; 234 | } 235 | 236 | .medium-offset-2 { 237 | margin-left: 16.66667%; 238 | } 239 | 240 | .medium-offset-3 { 241 | margin-left: 25%; 242 | } 243 | 244 | .medium-offset-4 { 245 | margin-left: 33.33333%; 246 | } 247 | 248 | .medium-offset-5 { 249 | margin-left: 41.66667%; 250 | } 251 | 252 | .medium-offset-6 { 253 | margin-left: 50%; 254 | } 255 | 256 | .medium-offset-7 { 257 | margin-left: 58.33333%; 258 | } 259 | 260 | .medium-offset-8 { 261 | margin-left: 66.66667%; 262 | } 263 | 264 | .medium-offset-9 { 265 | margin-left: 75%; 266 | } 267 | 268 | .medium-offset-10 { 269 | margin-left: 83.33333%; 270 | } 271 | 272 | .medium-offset-11 { 273 | margin-left: 91.66667%; 274 | } 275 | 276 | .medium-push-1 { 277 | left: 8.33333%; 278 | right: auto; 279 | } 280 | 281 | .medium-pull-1 { 282 | right: 8.33333%; 283 | left: auto; 284 | } 285 | 286 | .medium-push-2 { 287 | left: 16.66667%; 288 | right: auto; 289 | } 290 | 291 | .medium-pull-2 { 292 | right: 16.66667%; 293 | left: auto; 294 | } 295 | 296 | .medium-push-3 { 297 | left: 25%; 298 | right: auto; 299 | } 300 | 301 | .medium-pull-3 { 302 | right: 25%; 303 | left: auto; 304 | } 305 | 306 | .medium-push-4 { 307 | left: 33.33333%; 308 | right: auto; 309 | } 310 | 311 | .medium-pull-4 { 312 | right: 33.33333%; 313 | left: auto; 314 | } 315 | 316 | .medium-push-5 { 317 | left: 41.66667%; 318 | right: auto; 319 | } 320 | 321 | .medium-pull-5 { 322 | right: 41.66667%; 323 | left: auto; 324 | } 325 | 326 | .medium-push-6 { 327 | left: 50%; 328 | right: auto; 329 | } 330 | 331 | .medium-pull-6 { 332 | right: 50%; 333 | left: auto; 334 | } 335 | 336 | .medium-push-7 { 337 | left: 58.33333%; 338 | right: auto; 339 | } 340 | 341 | .medium-pull-7 { 342 | right: 58.33333%; 343 | left: auto; 344 | } 345 | 346 | .medium-push-8 { 347 | left: 66.66667%; 348 | right: auto; 349 | } 350 | 351 | .medium-pull-8 { 352 | right: 66.66667%; 353 | left: auto; 354 | } 355 | 356 | .medium-push-9 { 357 | left: 75%; 358 | right: auto; 359 | } 360 | 361 | .medium-pull-9 { 362 | right: 75%; 363 | left: auto; 364 | } 365 | 366 | .medium-push-10 { 367 | left: 83.33333%; 368 | right: auto; 369 | } 370 | 371 | .medium-pull-10 { 372 | right: 83.33333%; 373 | left: auto; 374 | } 375 | 376 | .medium-push-11 { 377 | left: 91.66667%; 378 | right: auto; 379 | } 380 | 381 | .medium-pull-11 { 382 | right: 91.66667%; 383 | left: auto; 384 | } 385 | 386 | .column.medium-centered, 387 | .columns.medium-centered { 388 | margin-left: auto; 389 | margin-right: auto; 390 | float: none !important; 391 | } 392 | 393 | .column.medium-uncentered, 394 | .columns.medium-uncentered { 395 | margin-left: 0; 396 | margin-right: 0; 397 | float: left !important; 398 | } 399 | } 400 | @media only screen and (min-width: 1024px) { 401 | .large-1 { 402 | width: 8.33333%; 403 | } 404 | 405 | .large-2 { 406 | width: 16.66667%; 407 | } 408 | 409 | .large-3 { 410 | width: 25%; 411 | } 412 | 413 | .large-4 { 414 | width: 33.33333%; 415 | } 416 | 417 | .large-5 { 418 | width: 41.66667%; 419 | } 420 | 421 | .large-6 { 422 | width: 50%; 423 | } 424 | 425 | .large-7 { 426 | width: 58.33333%; 427 | } 428 | 429 | .large-8 { 430 | width: 66.66667%; 431 | } 432 | 433 | .large-9 { 434 | width: 75%; 435 | } 436 | 437 | .large-10 { 438 | width: 83.33333%; 439 | } 440 | 441 | .large-11 { 442 | width: 91.66667%; 443 | } 444 | 445 | .large-12 { 446 | width: 100%; 447 | } 448 | 449 | .large-offset-0 { 450 | margin-left: 0%; 451 | } 452 | 453 | .large-offset-1 { 454 | margin-left: 8.33333%; 455 | } 456 | 457 | .large-offset-2 { 458 | margin-left: 16.66667%; 459 | } 460 | 461 | .large-offset-3 { 462 | margin-left: 25%; 463 | } 464 | 465 | .large-offset-4 { 466 | margin-left: 33.33333%; 467 | } 468 | 469 | .large-offset-5 { 470 | margin-left: 41.66667%; 471 | } 472 | 473 | .large-offset-6 { 474 | margin-left: 50%; 475 | } 476 | 477 | .large-offset-7 { 478 | margin-left: 58.33333%; 479 | } 480 | 481 | .large-offset-8 { 482 | margin-left: 66.66667%; 483 | } 484 | 485 | .large-offset-9 { 486 | margin-left: 75%; 487 | } 488 | 489 | .large-offset-10 { 490 | margin-left: 83.33333%; 491 | } 492 | 493 | .large-offset-11 { 494 | margin-left: 91.66667%; 495 | } 496 | 497 | .large-push-1 { 498 | left: 8.33333%; 499 | right: auto; 500 | } 501 | 502 | .large-pull-1 { 503 | right: 8.33333%; 504 | left: auto; 505 | } 506 | 507 | .large-push-2 { 508 | left: 16.66667%; 509 | right: auto; 510 | } 511 | 512 | .large-pull-2 { 513 | right: 16.66667%; 514 | left: auto; 515 | } 516 | 517 | .large-push-3 { 518 | left: 25%; 519 | right: auto; 520 | } 521 | 522 | .large-pull-3 { 523 | right: 25%; 524 | left: auto; 525 | } 526 | 527 | .large-push-4 { 528 | left: 33.33333%; 529 | right: auto; 530 | } 531 | 532 | .large-pull-4 { 533 | right: 33.33333%; 534 | left: auto; 535 | } 536 | 537 | .large-push-5 { 538 | left: 41.66667%; 539 | right: auto; 540 | } 541 | 542 | .large-pull-5 { 543 | right: 41.66667%; 544 | left: auto; 545 | } 546 | 547 | .large-push-6 { 548 | left: 50%; 549 | right: auto; 550 | } 551 | 552 | .large-pull-6 { 553 | right: 50%; 554 | left: auto; 555 | } 556 | 557 | .large-push-7 { 558 | left: 58.33333%; 559 | right: auto; 560 | } 561 | 562 | .large-pull-7 { 563 | right: 58.33333%; 564 | left: auto; 565 | } 566 | 567 | .large-push-8 { 568 | left: 66.66667%; 569 | right: auto; 570 | } 571 | 572 | .large-pull-8 { 573 | right: 66.66667%; 574 | left: auto; 575 | } 576 | 577 | .large-push-9 { 578 | left: 75%; 579 | right: auto; 580 | } 581 | 582 | .large-pull-9 { 583 | right: 75%; 584 | left: auto; 585 | } 586 | 587 | .large-push-10 { 588 | left: 83.33333%; 589 | right: auto; 590 | } 591 | 592 | .large-pull-10 { 593 | right: 83.33333%; 594 | left: auto; 595 | } 596 | 597 | .large-push-11 { 598 | left: 91.66667%; 599 | right: auto; 600 | } 601 | 602 | .large-pull-11 { 603 | right: 91.66667%; 604 | left: auto; 605 | } 606 | 607 | .column.large-centered, 608 | .columns.large-centered { 609 | margin-left: auto; 610 | margin-right: auto; 611 | float: none !important; 612 | } 613 | 614 | .column.large-uncentered, 615 | .columns.large-uncentered { 616 | margin-left: 0; 617 | margin-right: 0; 618 | float: left !important; 619 | } 620 | } 621 | -------------------------------------------------------------------------------- /styles/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.3 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address `[hidden]` styling not present in IE 8/9. 48 | * Hide the `template` element in IE, Safari, and Firefox < 22. 49 | */ 50 | 51 | [hidden], 52 | template { 53 | display: none; 54 | } 55 | 56 | /* ========================================================================== 57 | Base 58 | ========================================================================== */ 59 | 60 | /** 61 | * 1. Set default font family to sans-serif. 62 | * 2. Prevent iOS text size adjust after orientation change, without disabling 63 | * user zoom. 64 | */ 65 | 66 | html { 67 | font-family: sans-serif; /* 1 */ 68 | -ms-text-size-adjust: 100%; /* 2 */ 69 | -webkit-text-size-adjust: 100%; /* 2 */ 70 | } 71 | 72 | /** 73 | * Remove default margin. 74 | */ 75 | 76 | body { 77 | margin: 0; 78 | } 79 | 80 | /* ========================================================================== 81 | Links 82 | ========================================================================== */ 83 | 84 | /** 85 | * Remove the gray background color from active links in IE 10. 86 | */ 87 | 88 | a { 89 | background: transparent; 90 | } 91 | 92 | /** 93 | * Address `outline` inconsistency between Chrome and other browsers. 94 | */ 95 | 96 | a:focus { 97 | outline: thin dotted; 98 | } 99 | 100 | /** 101 | * Improve readability when focused and also mouse hovered in all browsers. 102 | */ 103 | 104 | a:active, 105 | a:hover { 106 | outline: 0; 107 | } 108 | 109 | /* ========================================================================== 110 | Typography 111 | ========================================================================== */ 112 | 113 | /** 114 | * Address variable `h1` font-size and margin within `section` and `article` 115 | * contexts in Firefox 4+, Safari 5, and Chrome. 116 | */ 117 | 118 | h1 { 119 | font-size: 2em; 120 | margin: 0.67em 0; 121 | } 122 | 123 | /** 124 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 125 | */ 126 | 127 | abbr[title] { 128 | border-bottom: 1px dotted; 129 | } 130 | 131 | /** 132 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 133 | */ 134 | 135 | b, 136 | strong { 137 | font-weight: bold; 138 | } 139 | 140 | /** 141 | * Address styling not present in Safari 5 and Chrome. 142 | */ 143 | 144 | dfn { 145 | font-style: italic; 146 | } 147 | 148 | /** 149 | * Address differences between Firefox and other browsers. 150 | */ 151 | 152 | hr { 153 | -moz-box-sizing: content-box; 154 | box-sizing: content-box; 155 | height: 0; 156 | } 157 | 158 | /** 159 | * Address styling not present in IE 8/9. 160 | */ 161 | 162 | mark { 163 | background: #ff0; 164 | color: #000; 165 | } 166 | 167 | /** 168 | * Correct font family set oddly in Safari 5 and Chrome. 169 | */ 170 | 171 | code, 172 | kbd, 173 | pre, 174 | samp { 175 | font-family: monospace, serif; 176 | font-size: 1em; 177 | } 178 | 179 | /** 180 | * Improve readability of pre-formatted text in all browsers. 181 | */ 182 | 183 | pre { 184 | white-space: pre-wrap; 185 | } 186 | 187 | /** 188 | * Set consistent quote types. 189 | */ 190 | 191 | q { 192 | quotes: "\201C" "\201D" "\2018" "\2019"; 193 | } 194 | 195 | /** 196 | * Address inconsistent and variable font size in all browsers. 197 | */ 198 | 199 | small { 200 | font-size: 80%; 201 | } 202 | 203 | /** 204 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 205 | */ 206 | 207 | sub, 208 | sup { 209 | font-size: 75%; 210 | line-height: 0; 211 | position: relative; 212 | vertical-align: baseline; 213 | } 214 | 215 | sup { 216 | top: -0.5em; 217 | } 218 | 219 | sub { 220 | bottom: -0.25em; 221 | } 222 | 223 | /* ========================================================================== 224 | Embedded content 225 | ========================================================================== */ 226 | 227 | /** 228 | * Remove border when inside `a` element in IE 8/9. 229 | */ 230 | 231 | img { 232 | border: 0; 233 | } 234 | 235 | /** 236 | * Correct overflow displayed oddly in IE 9. 237 | */ 238 | 239 | svg:not(:root) { 240 | overflow: hidden; 241 | } 242 | 243 | /* ========================================================================== 244 | Figures 245 | ========================================================================== */ 246 | 247 | /** 248 | * Address margin not present in IE 8/9 and Safari 5. 249 | */ 250 | 251 | figure { 252 | margin: 0; 253 | } 254 | 255 | /* ========================================================================== 256 | Forms 257 | ========================================================================== */ 258 | 259 | /** 260 | * Define consistent border, margin, and padding. 261 | */ 262 | 263 | fieldset { 264 | border: 1px solid #c0c0c0; 265 | margin: 0 2px; 266 | padding: 0.35em 0.625em 0.75em; 267 | } 268 | 269 | /** 270 | * 1. Correct `color` not being inherited in IE 8/9. 271 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 272 | */ 273 | 274 | legend { 275 | border: 0; /* 1 */ 276 | padding: 0; /* 2 */ 277 | } 278 | 279 | /** 280 | * 1. Correct font family not being inherited in all browsers. 281 | * 2. Correct font size not being inherited in all browsers. 282 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 283 | */ 284 | 285 | button, 286 | input, 287 | select, 288 | textarea { 289 | font-family: inherit; /* 1 */ 290 | font-size: 100%; /* 2 */ 291 | margin: 0; /* 3 */ 292 | } 293 | 294 | /** 295 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 296 | * the UA stylesheet. 297 | */ 298 | 299 | button, 300 | input { 301 | line-height: normal; 302 | } 303 | 304 | /** 305 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 306 | * All other form control elements do not inherit `text-transform` values. 307 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 308 | * Correct `select` style inheritance in Firefox 4+ and Opera. 309 | */ 310 | 311 | button, 312 | select { 313 | text-transform: none; 314 | } 315 | 316 | /** 317 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 318 | * and `video` controls. 319 | * 2. Correct inability to style clickable `input` types in iOS. 320 | * 3. Improve usability and consistency of cursor style between image-type 321 | * `input` and others. 322 | */ 323 | 324 | button, 325 | html input[type="button"], /* 1 */ 326 | input[type="reset"], 327 | input[type="submit"] { 328 | -webkit-appearance: button; /* 2 */ 329 | cursor: pointer; /* 3 */ 330 | } 331 | 332 | /** 333 | * Re-set default cursor for disabled elements. 334 | */ 335 | 336 | button[disabled], 337 | html input[disabled] { 338 | cursor: default; 339 | } 340 | 341 | /** 342 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 343 | * 2. Remove excess padding in IE 8/9/10. 344 | */ 345 | 346 | input[type="checkbox"], 347 | input[type="radio"] { 348 | box-sizing: border-box; /* 1 */ 349 | padding: 0; /* 2 */ 350 | } 351 | 352 | /** 353 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 354 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 355 | * (include `-moz` to future-proof). 356 | */ 357 | 358 | input[type="search"] { 359 | -webkit-appearance: textfield; /* 1 */ 360 | -moz-box-sizing: content-box; 361 | -webkit-box-sizing: content-box; /* 2 */ 362 | box-sizing: content-box; 363 | } 364 | 365 | /** 366 | * Remove inner padding and search cancel button in Safari 5 and Chrome 367 | * on OS X. 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Remove inner padding and border in Firefox 4+. 377 | */ 378 | 379 | button::-moz-focus-inner, 380 | input::-moz-focus-inner { 381 | border: 0; 382 | padding: 0; 383 | } 384 | 385 | /** 386 | * 1. Remove default vertical scrollbar in IE 8/9. 387 | * 2. Improve readability and alignment in all browsers. 388 | */ 389 | 390 | textarea { 391 | overflow: auto; /* 1 */ 392 | vertical-align: top; /* 2 */ 393 | } 394 | 395 | /* ========================================================================== 396 | Tables 397 | ========================================================================== */ 398 | 399 | /** 400 | * Remove most spacing between table cells. 401 | */ 402 | 403 | table { 404 | border-collapse: collapse; 405 | border-spacing: 0; 406 | } 407 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | .column, 2 | .columns { 3 | background: #eee; 4 | border-right: 1px solid #aaaaaa; 5 | border-bottom: 1px solid #aaaaaa; 6 | padding: 1em; 7 | } 8 | .column:first-child, 9 | .columns:first-child { 10 | border-left: 1px solid #aaaaaa; 11 | } 12 | 13 | body { 14 | margin: 0 auto; 15 | background: white; 16 | color: #3a3a3a; 17 | } 18 | 19 | hr { 20 | border-top: 1px solid #aaaaaa; 21 | border-bottom: 0; 22 | border-right: 0; 23 | border-left: 0; 24 | clear: both; 25 | height: 1px; 26 | margin: 1.5em 0; 27 | min-height: 0; 28 | } 29 | 30 | header { 31 | background: #f2f2f2; 32 | border-bottom: 1px solid #ccc; 33 | padding: 0.25em 0; 34 | margin-bottom: 2em; 35 | } 36 | 37 | .env { 38 | max-width: 1140px; 39 | margin: 0 auto; 40 | } 41 | -------------------------------------------------------------------------------- /todo.md: -------------------------------------------------------------------------------- 1 | # TODO 2 | 3 | * Responsive, Mobile-First. 4 | * A LESS version of grid. --------------------------------------------------------------------------------