2012-06-29 06:46:45 +02:00
|
|
|
//
|
|
|
|
// Grid system
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
|
2012-08-28 22:33:06 +02:00
|
|
|
// Set the container width, and override it for fixed navbars in media queries
|
2012-11-30 21:42:37 +01:00
|
|
|
.container {
|
2012-12-01 01:18:40 +01:00
|
|
|
.container-fixed();
|
2012-11-30 21:42:37 +01:00
|
|
|
}
|
2012-01-29 22:06:57 +01:00
|
|
|
|
2013-01-16 02:55:14 +01:00
|
|
|
// Mobile-first defaults
|
|
|
|
.row {
|
|
|
|
margin-left: -10px;
|
|
|
|
margin-right: -10px;
|
|
|
|
.clear_float();
|
|
|
|
}
|
|
|
|
[class^="span"] {
|
2013-01-16 22:11:45 +01:00
|
|
|
min-height: 1px;
|
2013-01-16 02:55:14 +01:00
|
|
|
padding-left: 10px;
|
|
|
|
padding-right: 10px;
|
|
|
|
// Proper box-model (padding doesn't add to width)
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
2013-01-17 09:42:31 +01:00
|
|
|
// Responsive: Tablets and up
|
|
|
|
@media screen and (min-width: 768px) {
|
|
|
|
|
2013-01-17 09:58:34 +01:00
|
|
|
.container {
|
|
|
|
max-width: 728px;
|
|
|
|
}
|
|
|
|
|
2013-01-17 09:42:31 +01:00
|
|
|
[class^="span"] {
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
.span1 { width: 8.3333333%; }
|
|
|
|
.span2 { width: 16.6666667%; }
|
|
|
|
.span3 { width: 25%; }
|
|
|
|
.span4 { width: 33.3333333%; }
|
|
|
|
.span5 { width: 41.666666667%; }
|
|
|
|
.span6 { width: 50%; }
|
|
|
|
.span7 { width: 58.333333333%; }
|
|
|
|
.span8 { width: 66.666666667%; }
|
|
|
|
.span9 { width: 75%; }
|
|
|
|
.span10 { width: 83.333333333%; }
|
|
|
|
.span11 { width: 91.666666667%; }
|
|
|
|
|
|
|
|
.offset1 { margin-left: 8.3333333%; }
|
|
|
|
.offset2 { margin-left: 16.6666667%; }
|
|
|
|
.offset3 { margin-left: 25%; }
|
|
|
|
.offset4 { margin-left: 33.3333333%; }
|
|
|
|
.offset5 { margin-left: 41.666666667%; }
|
|
|
|
.offset6 { margin-left: 50%; }
|
|
|
|
.offset7 { margin-left: 58.333333333%; }
|
|
|
|
.offset8 { margin-left: 66.666666667%; }
|
|
|
|
.offset9 { margin-left: 75%; }
|
|
|
|
.offset10 { margin-left: 83.333333333%; }
|
|
|
|
.offset11 { margin-left: 91.666666667%; }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// Responsive: Desktops and up
|
|
|
|
@media screen and (min-width: 992px) {
|
|
|
|
.container {
|
|
|
|
max-width: 940px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Responsive: Large desktops and up
|
|
|
|
@media screen and (min-width: 1200px) {
|
|
|
|
.container {
|
|
|
|
max-width: 1170px;
|
|
|
|
}
|
|
|
|
[class^="span"] {
|
|
|
|
padding-left: 15px;
|
|
|
|
padding-right: 15px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2012-08-28 22:33:06 +02:00
|
|
|
// Fixed (940px)
|
2013-01-16 02:55:14 +01:00
|
|
|
// #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
|
2012-07-30 01:51:24 +02:00
|
|
|
|
|
|
|
// Reset utility classes due to specificity
|
2012-09-26 07:20:24 +02:00
|
|
|
[class*="span"].pull-right {
|
2012-07-30 01:51:24 +02:00
|
|
|
float: right;
|
|
|
|
}
|