Box sizing on columns. thanks @hellotoby

This commit is contained in:
Nick Pack 2013-04-23 21:04:48 +01:00
parent 2fa65efd5f
commit 5de7739b70
4 changed files with 48 additions and 38 deletions

View File

@ -1,4 +1,5 @@
Copyright (c) 2013 Nick Pack 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 Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation obtaining a copy of this software and associated documentation

8
css/skeleton.css vendored
View File

@ -77,7 +77,13 @@ body {
float: left; float: left;
display: inline; display: inline;
margin-left: 10px; 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 { .row {
margin-bottom: 20px; } margin-bottom: 20px; }

View File

@ -3,7 +3,7 @@
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column, .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; } .row { margin-bottom: 20px; }
/* Nested Column Classes */ /* Nested Column Classes */
@ -86,21 +86,21 @@
.container .two-thirds.column { width: 492px; } .container .two-thirds.column { width: 492px; }
/* Offsets */ /* Offsets */
.container .offset-by-one { padding-left: 48px; } .container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; } .container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; } .container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; } .container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; } .container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; } .container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; } .container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 384px; } .container .offset-by-eight { padding-left: 384px; }
.container .offset-by-nine { padding-left: 432px; } .container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; } .container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; } .container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; } .container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; } .container .offset-by-fifteen { padding-left: 720px; }
} }
@ -135,21 +135,21 @@
.container .two-thirds.column { width: 300px; } .container .two-thirds.column { width: 300px; }
/* Offsets */ /* Offsets */
.container .offset-by-one, .container .offset-by-one,
.container .offset-by-two, .container .offset-by-two,
.container .offset-by-three, .container .offset-by-three,
.container .offset-by-four, .container .offset-by-four,
.container .offset-by-five, .container .offset-by-five,
.container .offset-by-six, .container .offset-by-six,
.container .offset-by-seven, .container .offset-by-seven,
.container .offset-by-eight, .container .offset-by-eight,
.container .offset-by-nine, .container .offset-by-nine,
.container .offset-by-ten, .container .offset-by-ten,
.container .offset-by-eleven, .container .offset-by-eleven,
.container .offset-by-twelve, .container .offset-by-twelve,
.container .offset-by-thirteen, .container .offset-by-thirteen,
.container .offset-by-fourteen, .container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; } .container .offset-by-fifteen { padding-left: 0; }
} }
@ -203,12 +203,12 @@ or wrap each row of columns in a <div class="row"> */
visibility: hidden; visibility: hidden;
width: 0; width: 0;
height: 0; } height: 0; }
.row:after, .row:after,
.clearfix:after { .clearfix:after {
clear: both; } clear: both; }
.row, .row,
.clearfix { .clearfix {
zoom: 1; } zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */ /* You can also use a <br class="clear" /> to clear columns */
.clear { .clear {

View File

@ -83,6 +83,9 @@
box-sizing: $boxsize; box-sizing: $boxsize;
-webkit-box-sizing: $boxsize; -webkit-box-sizing: $boxsize;
-moz-box-sizing: $boxsize; -moz-box-sizing: $boxsize;
-ms-box-sizing: $boxsize;
-o-box-sizing: $boxsize;
-khtml-box-sizing: $boxsize;
} }
@mixin horizontal-gradient($startColour, $endColour) { @mixin horizontal-gradient($startColour, $endColour) {