From d35602d079a495e6ebacb63ca8c6cf7c1208edfa Mon Sep 17 00:00:00 2001 From: Mike Francis Date: Mon, 1 Jul 2013 22:42:22 +0100 Subject: [PATCH] New grids --- _/scss/_vars.scss | 6 +- _/scss/generic/_mixins.scss | 19 +- _/scss/objects/_nav.scss | 29 +-- _/scss/objects/_scaffolding.scss | 60 +++-- _/scss/style.scss | 4 +- header.php | 2 +- style.css | 363 +++++++++++++++++-------------- 7 files changed, 257 insertions(+), 226 deletions(-) diff --git a/_/scss/_vars.scss b/_/scss/_vars.scss index ebd2291..da0eb6b 100755 --- a/_/scss/_vars.scss +++ b/_/scss/_vars.scss @@ -21,9 +21,9 @@ $list-margin-left: 24; // Scaffolding -$column-gutter: 20; -$column-count: 12; -$container-max-width: 1200; +$container-max-width: 960; +$column-count: 12; +$column-gutter: 20; // Tables diff --git a/_/scss/generic/_mixins.scss b/_/scss/generic/_mixins.scss index f65d58f..9575c19 100755 --- a/_/scss/generic/_mixins.scss +++ b/_/scss/generic/_mixins.scss @@ -1,12 +1,15 @@ @mixin breakpoint($point) { - @if $point == desktop { - @media screen and (min-width: 1200px) { @content; } - } - @else if $point == tablet-landscape { - @media screen and (min-width: 1024px) { @content; } + @if $point == mobile { + @media screen and (max-width: 640px) { @content; } } @else if $point == tablet-portrait { - @media screen and (min-width: 768px) { @content; } + @media screen and (max-width: 768px) { @content; } + } + @else if $point == tablet-landscape { + @media screen and (max-width: 1024px) { @content; } + } + @else if $point == desktop { + @media screen and (max-width: 1200px) { @content; } } } @@ -17,10 +20,6 @@ border-radius: $radius; } -@mixin col-width ($span: 1) { - width: ((100 / $column-count) * $span) - ($column-gutter / $container-max-width) * 100%; -} - @mixin box-sizing ($box-model: 'border-box') { -webkit-box-sizing: $box-model; -moz-box-sizing: $box-model; diff --git a/_/scss/objects/_nav.scss b/_/scss/objects/_nav.scss index 67b02be..c3d25a3 100755 --- a/_/scss/objects/_nav.scss +++ b/_/scss/objects/_nav.scss @@ -3,34 +3,11 @@ margin-left: 0; } - .nav > li, .nav > li > a { + .nav > li { display: inline-block; *display: inline; } - -.nav-list { - border: solid 1px #ddd; - @include border-radius(); - @include box-shadow(); -} - .nav-list > li, .nav-list > li > a { - display: block; - } - - .nav-list > li { - border-bottom: solid 1px #ddd; - } - - .nav-list > li:last-child { - border-bottom: none; - } - - .nav-list > li > a { - padding: 10px; - @include transition(); - } - - .nav-list > li > a:hover { - background-color: #fafafa; + .nav > li > a { + display: block; } \ No newline at end of file diff --git a/_/scss/objects/_scaffolding.scss b/_/scss/objects/_scaffolding.scss index 9ea1e89..f1a3a77 100755 --- a/_/scss/objects/_scaffolding.scss +++ b/_/scss/objects/_scaffolding.scss @@ -1,29 +1,51 @@ .container { - padding: 0 ($column-gutter * 2) * 1px; - max-width: $container-max-width * 1px; - margin: 0 auto; - @extend .clearfix; + margin: 0 auto; + max-width: ($container-max-width - $column-gutter) * 1px; + padding: 0 20px; + @extend .clearfix; +} + +.container-fluid { + width: 100%; + @extend .clearfix; } .row { - @include breakpoint(tablet-portrait) { margin-left: -($column-gutter / $container-max-width) * 100%; } - @extend .clearfix; + margin-left: -($column-gutter / $container-max-width) * 100%; + _overflow: hidden; + @extend .clearfix; + @include breakpoint(mobile) { + margin-left: 0; + } } -.col { - display: block; - float: none; - width: auto; - @include breakpoint(tablet-portrait) { - float: left; - margin-left: ($column-gutter / $container-max-width) * 100%; - } +.column { + display: inline; + float: left; + margin-left: ($column-gutter / $container-max-width) * 100%; + vertical-align: top; + @include breakpoint(mobile) { + display: block; + float: none; + margin-left: 0; + width: auto !important; + } } @for $i from 1 through $column-count { - .col#{$i} { - @include breakpoint(tablet-portrait) { - @include col-width($i); - } - } + .column-span-#{$i} { + width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) * 1%; + *width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) - .02 * 1%; + } +} + +.row-no-gutters .column { + margin-left: 0; +} + +@for $i from 1 through $column-count { + .row-no-gutters .column-span-#{$i} { + width: ((100 / $column-count) * $i) * 1%; + *width: ((100 / $column-count) * $i) - .02 * 1%; + } } \ No newline at end of file diff --git a/_/scss/style.scss b/_/scss/style.scss index d81be57..e96211b 100755 --- a/_/scss/style.scss +++ b/_/scss/style.scss @@ -17,7 +17,7 @@ Author: Mike Francis // Objects +@import 'objects/forms'; @import 'objects/scaffolding'; @import 'objects/nav'; -@import 'objects/tables'; -@import 'objects/forms'; \ No newline at end of file +@import 'objects/tables'; \ No newline at end of file diff --git a/header.php b/header.php index e35d92b..d5b355f 100755 --- a/header.php +++ b/header.php @@ -2,7 +2,7 @@ > - + <?php wp_title( ' – ', true, 'right' ); bloginfo( 'name' ); ?> diff --git a/style.css b/style.css index 02f515e..5ac5e46 100644 --- a/style.css +++ b/style.css @@ -115,179 +115,17 @@ img.alignright { margin-right: auto; } -.clearfix, .container, .row, .controls { +.clearfix, .controls, .container, .container-fluid, .row { *zoom: 1; } -.clearfix:before, .container:before, .row:before, .controls:before, .clearfix:after, .container:after, .row:after, .controls:after { +.clearfix:before, .controls:before, .container:before, .container-fluid:before, .row:before, .clearfix:after, .controls:after, .container:after, .container-fluid:after, .row:after { content: " "; display: table; } -.clearfix:after, .container:after, .row:after, .controls:after { +.clearfix:after, .controls:after, .container:after, .container-fluid:after, .row:after { clear: both; } -.container { - padding: 0 40px; - max-width: 1200px; - margin: 0 auto; -} - -@media (min-width: 768px) { - .row { - margin-left: -1.66667%; - } -} - -.col { - display: block; - float: none; - width: auto; -} -@media (min-width: 768px) { - .col { - float: left; - margin-left: 1.66667%; - } -} - -@media (min-width: 768px) { - .col1 { - width: 6.66667%; - } -} - -@media (min-width: 768px) { - .col2 { - width: 15.0%; - } -} - -@media (min-width: 768px) { - .col3 { - width: 23.33333%; - } -} - -@media (min-width: 768px) { - .col4 { - width: 31.66667%; - } -} - -@media (min-width: 768px) { - .col5 { - width: 40.0%; - } -} - -@media (min-width: 768px) { - .col6 { - width: 48.33333%; - } -} - -@media (min-width: 768px) { - .col7 { - width: 56.66667%; - } -} - -@media (min-width: 768px) { - .col8 { - width: 65%; - } -} - -@media (min-width: 768px) { - .col9 { - width: 73.33333%; - } -} - -@media (min-width: 768px) { - .col10 { - width: 81.66667%; - } -} - -@media (min-width: 768px) { - .col11 { - width: 90%; - } -} - -@media (min-width: 768px) { - .col12 { - width: 98.33333%; - } -} - -.nav { - list-style: none; - margin-left: 0; -} - -.nav > li, .nav > li > a { - display: inline-block; - *display: inline; -} - -.nav-list { - border: solid 1px #dddddd; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -o-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); -} - -.nav-list > li, .nav-list > li > a { - display: block; -} - -.nav-list > li { - border-bottom: solid 1px #dddddd; -} - -.nav-list > li:last-child { - border-bottom: none; -} - -.nav-list > li > a { - padding: 10px; - -webkit-transition: all 0.2s ease-out; - -moz-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; -} - -.nav-list > li > a:hover { - background-color: #fafafa; -} - -.table { - width: 100%; - border-collapse: collapse; -} - -.table th, -.table td { - text-align: left; - vertical-align: top; - border-top: 1px solid #dddddd; - padding: 10.5px 10px; -} - -.table th { - font-weight: bold; - border-top: 0; -} - -.table thead th { - vertical-align: bottom; -} - input, select, textarea, button { display: inline-block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -343,3 +181,198 @@ input, select, textarea, button { background-image: -moz-linear-gradient(#eeeeee, white); background-image: -o-linear-gradient(#eeeeee, white); } + +.container { + margin: 0 auto; + max-width: 940px; + padding: 0 20px; +} + +.container-fluid { + width: 100%; +} + +.row { + margin-left: -2.08333%; + _overflow: hidden; +} +@media screen and (max-width: 640px) { + .row { + margin-left: 0; + } +} + +.column { + display: inline; + float: left; + margin-left: 2.08333%; + vertical-align: top; +} +@media screen and (max-width: 640px) { + .column { + display: block; + float: none; + margin-left: 0; + width: auto !important; + } +} + +.column-span-1 { + width: 6.25%; + *width: 6.23%; +} + +.column-span-2 { + width: 14.58333%; + *width: 14.56333%; +} + +.column-span-3 { + width: 22.91667%; + *width: 22.89667%; +} + +.column-span-4 { + width: 31.25%; + *width: 31.23%; +} + +.column-span-5 { + width: 39.58333%; + *width: 39.56333%; +} + +.column-span-6 { + width: 47.91667%; + *width: 47.89667%; +} + +.column-span-7 { + width: 56.25%; + *width: 56.23%; +} + +.column-span-8 { + width: 64.58333%; + *width: 64.56333%; +} + +.column-span-9 { + width: 72.91667%; + *width: 72.89667%; +} + +.column-span-10 { + width: 81.25%; + *width: 81.23%; +} + +.column-span-11 { + width: 89.58333%; + *width: 89.56333%; +} + +.column-span-12 { + width: 97.91667%; + *width: 97.89667%; +} + +.row-no-gutters .column { + margin-left: 0; +} + +.row-no-gutters .column-span-1 { + width: 8.33333%; + *width: 8.31333%; +} + +.row-no-gutters .column-span-2 { + width: 16.66667%; + *width: 16.64667%; +} + +.row-no-gutters .column-span-3 { + width: 25%; + *width: 24.98%; +} + +.row-no-gutters .column-span-4 { + width: 33.33333%; + *width: 33.31333%; +} + +.row-no-gutters .column-span-5 { + width: 41.66667%; + *width: 41.64667%; +} + +.row-no-gutters .column-span-6 { + width: 50%; + *width: 49.98%; +} + +.row-no-gutters .column-span-7 { + width: 58.33333%; + *width: 58.31333%; +} + +.row-no-gutters .column-span-8 { + width: 66.66667%; + *width: 66.64667%; +} + +.row-no-gutters .column-span-9 { + width: 75%; + *width: 74.98%; +} + +.row-no-gutters .column-span-10 { + width: 83.33333%; + *width: 83.31333%; +} + +.row-no-gutters .column-span-11 { + width: 91.66667%; + *width: 91.64667%; +} + +.row-no-gutters .column-span-12 { + width: 100%; + *width: 99.98%; +} + +.nav { + list-style: none; + margin-left: 0; +} + +.nav > li { + display: inline-block; + *display: inline; +} + +.nav > li > a { + display: block; +} + +.table { + width: 100%; + border-collapse: collapse; +} + +.table th, +.table td { + text-align: left; + vertical-align: top; + border-top: 1px solid #dddddd; + padding: 10.5px 10px; +} + +.table th { + font-weight: bold; + border-top: 0; +} + +.table thead th { + vertical-align: bottom; +}