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
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

8
css/skeleton.css vendored
View File

@ -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; }

70
scss/_grid.scss
View File

@ -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,11 +203,11 @@ or wrap each row of columns in a <div class="row"> */
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */

3
scss/_mixins.scss
View File

@ -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) {