Bones/scss/_grid.scss

115 lines
2.3 KiB
SCSS
Raw Normal View History

2013-04-23 16:29:51 -04:00
.container {
position: relative;
margin: 0 auto;
padding: 0;
}
2013-04-23 16:29:51 -04:00
.column, .columns {
float: left;
display: inline;
margin-left: $gutter/2;
margin-right: $gutter/2;
&.alpha { margin-left: 0; }
&.omega { margin-right: 0; }
}
2013-04-23 16:29:51 -04:00
.row { margin-bottom: $gutter; }
2013-04-23 16:29:51 -04:00
@include grid($desktop-container-width, $column-count, $gutter);
2013-04-23 16:29:51 -04:00
//-----------------------------------------------------------------------
// #Tablet
@media only screen and (max-width: 959px) {
@include grid($tablet-container-width, $column-count, $gutter);
2013-04-23 16:29:51 -04:00
.container { width: $tablet-container-width; }
2013-04-23 16:29:51 -04:00
.column, .columns {
&.alpha { margin-right: 10px; }
&.omega { margin-left: 10px; } }
2013-04-23 16:29:51 -04:00
.alpha.omega {
margin-right: 0;
margin-left: 0; }
}
2013-04-23 16:29:51 -04:00
//--------------------------------------------------------------------
// #Mobile
@media only screen and (max-width: 767px) {
.container {
width: $mobile-container-width;
.column, .columns {
margin: 0;
&.one,
&.two,
&.three,
&.four,
&.five,
&.six,
&.seven,
&.eight,
&.nine,
&.ten,
&.eleven,
&.twelve,
&.thirteen,
&.fourteen,
&.fifteen,
&.sixteen,
&.one-third,
&.two-thirds { width: $mobile-column-width; }
}
.offset-by-one,
.offset-by-two,
.offset-by-three,
.offset-by-four,
.offset-by-five,
.offset-by-six,
.offset-by-seven,
.offset-by-eight,
.offset-by-nine,
.offset-by-ten,
.offset-by-eleven,
.offset-by-twelve,
.offset-by-thirteen,
.offset-by-fourteen,
.offset-by-fifteen { padding-left: 0; }
}
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}