BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Box sizing on columns. thanks @hellotoby

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
LICENSE-MIT
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; }

74
scss/_grid.scss
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 {

3
scss/_mixins.scss
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) {