diff --git a/LICENSE-MIT b/LICENSE-MIT index 475a53a..962aae8 100644 --- a/LICENSE-MIT +++ b/LICENSE-MIT @@ -1,4 +1,5 @@ Copyright (c) 2013 Nick Pack +Based on the original skeleton project which is Copyright 2011 Dave Gamache Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation diff --git a/css/skeleton.css b/css/skeleton.css index d31addf..ff2d9ab 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -77,7 +77,13 @@ body { float: left; display: inline; margin-left: 10px; - margin-right: 10px; } + margin-right: 10px; + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + -khtml-box-sizing: border-box; } .row { margin-bottom: 20px; } diff --git a/scss/_grid.scss b/scss/_grid.scss index 9196afb..b42031d 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -3,7 +3,7 @@ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .container .column, -.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } +.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; @include box-sizing(border-box); } .row { margin-bottom: 20px; } /* Nested Column Classes */ @@ -86,21 +86,21 @@ .container .two-thirds.column { width: 492px; } /* Offsets */ - .container .offset-by-one { padding-left: 48px; } - .container .offset-by-two { padding-left: 96px; } - .container .offset-by-three { padding-left: 144px; } - .container .offset-by-four { padding-left: 192px; } - .container .offset-by-five { padding-left: 240px; } - .container .offset-by-six { padding-left: 288px; } - .container .offset-by-seven { padding-left: 336px; } - .container .offset-by-eight { padding-left: 384px; } - .container .offset-by-nine { padding-left: 432px; } - .container .offset-by-ten { padding-left: 480px; } - .container .offset-by-eleven { padding-left: 528px; } - .container .offset-by-twelve { padding-left: 576px; } - .container .offset-by-thirteen { padding-left: 624px; } - .container .offset-by-fourteen { padding-left: 672px; } - .container .offset-by-fifteen { padding-left: 720px; } +.container .offset-by-one { padding-left: 48px; } +.container .offset-by-two { padding-left: 96px; } +.container .offset-by-three { padding-left: 144px; } +.container .offset-by-four { padding-left: 192px; } +.container .offset-by-five { padding-left: 240px; } +.container .offset-by-six { padding-left: 288px; } +.container .offset-by-seven { padding-left: 336px; } +.container .offset-by-eight { padding-left: 384px; } +.container .offset-by-nine { padding-left: 432px; } +.container .offset-by-ten { padding-left: 480px; } +.container .offset-by-eleven { padding-left: 528px; } +.container .offset-by-twelve { padding-left: 576px; } +.container .offset-by-thirteen { padding-left: 624px; } +.container .offset-by-fourteen { padding-left: 672px; } +.container .offset-by-fifteen { padding-left: 720px; } } @@ -135,21 +135,21 @@ .container .two-thirds.column { width: 300px; } /* Offsets */ - .container .offset-by-one, - .container .offset-by-two, - .container .offset-by-three, - .container .offset-by-four, - .container .offset-by-five, - .container .offset-by-six, - .container .offset-by-seven, - .container .offset-by-eight, - .container .offset-by-nine, - .container .offset-by-ten, - .container .offset-by-eleven, - .container .offset-by-twelve, - .container .offset-by-thirteen, - .container .offset-by-fourteen, - .container .offset-by-fifteen { padding-left: 0; } +.container .offset-by-one, +.container .offset-by-two, +.container .offset-by-three, +.container .offset-by-four, +.container .offset-by-five, +.container .offset-by-six, +.container .offset-by-seven, +.container .offset-by-eight, +.container .offset-by-nine, +.container .offset-by-ten, +.container .offset-by-eleven, +.container .offset-by-twelve, +.container .offset-by-thirteen, +.container .offset-by-fourteen, +.container .offset-by-fifteen { padding-left: 0; } } @@ -203,12 +203,12 @@ or wrap each row of columns in a
*/ visibility: hidden; width: 0; height: 0; } -.row:after, -.clearfix:after { - clear: both; } -.row, -.clearfix { - zoom: 1; } + .row:after, + .clearfix:after { + clear: both; } + .row, + .clearfix { + zoom: 1; } /* You can also use a
to clear columns */ .clear { diff --git a/scss/_mixins.scss b/scss/_mixins.scss index ee86dd7..d25f9a0 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -83,6 +83,9 @@ box-sizing: $boxsize; -webkit-box-sizing: $boxsize; -moz-box-sizing: $boxsize; + -ms-box-sizing: $boxsize; + -o-box-sizing: $boxsize; + -khtml-box-sizing: $boxsize; } @mixin horizontal-gradient($startColour, $endColour) {