Simplify and bring back the grid mixin for generating spans and offsets
This commit is contained in:
Mark Otto
parent
7e46b6f636
commit
01b32f472d
|
|
@ -731,71 +731,77 @@ pre code {
|
|||
[class^="span"] {
|
||||
float: left;
|
||||
}
|
||||
.span1 {
|
||||
width: 8.3333333%;
|
||||
.span12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span2 {
|
||||
width: 16.6666667%;
|
||||
.span11 {
|
||||
width: 91.66666666666666%;
|
||||
}
|
||||
.span3 {
|
||||
width: 25%;
|
||||
}
|
||||
.span4 {
|
||||
width: 33.3333333%;
|
||||
}
|
||||
.span5 {
|
||||
width: 41.666666667%;
|
||||
}
|
||||
.span6 {
|
||||
width: 50%;
|
||||
}
|
||||
.span7 {
|
||||
width: 58.333333333%;
|
||||
}
|
||||
.span8 {
|
||||
width: 66.666666667%;
|
||||
.span10 {
|
||||
width: 83.33333333333334%;
|
||||
}
|
||||
.span9 {
|
||||
width: 75%;
|
||||
}
|
||||
.span10 {
|
||||
width: 83.333333333%;
|
||||
.span8 {
|
||||
width: 66.66666666666666%;
|
||||
}
|
||||
.span11 {
|
||||
width: 91.666666667%;
|
||||
.span7 {
|
||||
width: 58.333333333333336%;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 8.3333333%;
|
||||
.span6 {
|
||||
width: 50%;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 16.6666667%;
|
||||
.span5 {
|
||||
width: 41.66666666666667%;
|
||||
}
|
||||
.offset3 {
|
||||
margin-left: 25%;
|
||||
.span4 {
|
||||
width: 33.33333333333333%;
|
||||
}
|
||||
.offset4 {
|
||||
margin-left: 33.3333333%;
|
||||
.span3 {
|
||||
width: 25%;
|
||||
}
|
||||
.offset5 {
|
||||
margin-left: 41.666666667%;
|
||||
.span2 {
|
||||
width: 16.666666666666664%;
|
||||
}
|
||||
.offset6 {
|
||||
margin-left: 50%;
|
||||
.span1 {
|
||||
width: 8.333333333333332%;
|
||||
}
|
||||
.offset7 {
|
||||
margin-left: 58.333333333%;
|
||||
.offset12 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
.offset8 {
|
||||
margin-left: 66.666666667%;
|
||||
.offset11 {
|
||||
margin-left: 91.66666666666666%;
|
||||
}
|
||||
.offset10 {
|
||||
margin-left: 83.33333333333334%;
|
||||
}
|
||||
.offset9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset10 {
|
||||
margin-left: 83.333333333%;
|
||||
.offset8 {
|
||||
margin-left: 66.66666666666666%;
|
||||
}
|
||||
.offset11 {
|
||||
margin-left: 91.666666667%;
|
||||
.offset7 {
|
||||
margin-left: 58.333333333333336%;
|
||||
}
|
||||
.offset6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset5 {
|
||||
margin-left: 41.66666666666667%;
|
||||
}
|
||||
.offset4 {
|
||||
margin-left: 33.33333333333333%;
|
||||
}
|
||||
.offset3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 16.666666666666664%;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 8.333333333333332%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
|
||||
// Mobile-first defaults
|
||||
.row {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
margin-left: @grid-gutter-width / -2;
|
||||
margin-right: @grid-gutter-width / -2;
|
||||
.clear_float();
|
||||
}
|
||||
[class^="span"] {
|
||||
min-height: 1px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-left: @grid-gutter-width / 2;
|
||||
padding-right: @grid-gutter-width / 2;
|
||||
// Proper box-model (padding doesn't add to width)
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
|
|
@ -26,38 +26,14 @@
|
|||
|
||||
// Responsive: Tablets and up
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
.container {
|
||||
max-width: 728px;
|
||||
}
|
||||
|
||||
// Generate the grid columns and offsets
|
||||
[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%; }
|
||||
|
||||
#grid > .core(@grid-column-width, @grid-gutter-width);
|
||||
}
|
||||
|
||||
// Responsive: Desktops and up
|
||||
|
|
@ -78,9 +54,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Fixed (940px)
|
||||
// #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
|
||||
|
||||
// Reset utility classes due to specificity
|
||||
[class*="span"].pull-right {
|
||||
float: right;
|
||||
|
|
|
|||
|
|
@ -431,20 +431,33 @@
|
|||
|
||||
// Make a Grid
|
||||
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
||||
.makeRow() {
|
||||
margin-left: @grid-gutter-width * -1;
|
||||
.clearfix();
|
||||
// .makeRow() {
|
||||
// margin-left: @grid-gutter-width * -1;
|
||||
// .clearfix();
|
||||
// }
|
||||
// .makeColumn(@columns: 1, @offset: 0) {
|
||||
// float: left;
|
||||
// margin-left: (@grid-column-width * @offset) + (@grid-gutter-width * (@offset - 1)) + (@grid-gutter-width * 2);
|
||||
// width: (@grid-column-width * @columns) + (@grid-gutter-width * (@columns - 1));
|
||||
// }
|
||||
|
||||
.make-row() {
|
||||
|
||||
}
|
||||
.makeColumn(@columns: 1, @offset: 0) {
|
||||
.make-column(@columns) {
|
||||
float: left;
|
||||
margin-left: (@grid-column-width * @offset) + (@grid-gutter-width * (@offset - 1)) + (@grid-gutter-width * 2);
|
||||
width: (@grid-column-width * @columns) + (@grid-gutter-width * (@columns - 1));
|
||||
padding: @grid-gutter-width;
|
||||
width: percentage(@columns / @grid-columns);
|
||||
}
|
||||
.make-column-offset(@columns) {
|
||||
margin-left: percentage(@columns / @grid-columns);
|
||||
}
|
||||
|
||||
|
||||
// The Grid
|
||||
#grid {
|
||||
|
||||
.core(@grid-column-width, @grid-gutter-width, @grid-row-width) {
|
||||
.core(@grid-column-width, @grid-gutter-width) {
|
||||
|
||||
.spanX(@index) when (@index > 0) {
|
||||
(~".span@{index}") { .span(@index); }
|
||||
|
|
@ -458,7 +471,6 @@
|
|||
}
|
||||
.offsetX(0) {}
|
||||
|
||||
|
||||
// Base styles
|
||||
.offset(@columns) {
|
||||
margin-left: percentage(@columns / @grid-columns);
|
||||
|
|
@ -467,65 +479,10 @@
|
|||
width: percentage(@columns / @grid-columns);
|
||||
}
|
||||
|
||||
.row {
|
||||
// Negative indent the columns so text lines up
|
||||
margin-left: @grid-gutter-width / -2;
|
||||
margin-right: @grid-gutter-width / -2;
|
||||
// Clear the floated columns
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
[class*="span"] {
|
||||
float: left; // Collapse whitespace
|
||||
min-height: 1px; // Prevent empty columns from collapsing
|
||||
padding-left: @grid-gutter-width / 2;
|
||||
padding-right: @grid-gutter-width / 2;
|
||||
// Proper box-model (padding doesnt' add to width)
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Generate .spanX and .offsetX
|
||||
.spanX(@grid-columns);
|
||||
.offsetX(@grid-columns);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.input(@grid-column-width, @grid-gutter-width, @grid-row-width) {
|
||||
|
||||
.spanX(@index) when (@index > 0) {
|
||||
(~"input.span@{index}, textarea.span@{index}, select.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
|
||||
.spanX(@index - 1);
|
||||
}
|
||||
.spanX(0) {}
|
||||
|
||||
.offsetX(@index) when (@index > 0) {
|
||||
(~"input.offset@{index}, textarea.offset@{index}, select.offset@{index}, uneditable-input.offset@{index}") { .offset(@index); }
|
||||
.offsetX(@index - 1);
|
||||
}
|
||||
.offsetX(0) {}
|
||||
|
||||
.span(@columns) {
|
||||
// TODO: Figure out how to add this back behind a class
|
||||
// Part 1: Since inputs require padding *and* margin, we subtract the grid gutter width, as a percent of the row, from the default column width.
|
||||
//width: percentage(@columns / @grid-columns) - percentage(@grid-gutter-width / @grid-row-width);
|
||||
// Part 2: That subtracted width then gets split in half and added to the left and right margins.
|
||||
// margin-left: percentage((@grid-gutter-width / 2) / @grid-row-width);
|
||||
// margin-right: percentage((@grid-gutter-width / 2) / @grid-row-width);
|
||||
}
|
||||
|
||||
.offset(@columns) {
|
||||
// Take the normal offset margin and add an extra gutter's worth.
|
||||
margin-left: percentage(@columns / @grid-columns) + percentage((@grid-gutter-width / 2) / @grid-row-width);
|
||||
}
|
||||
|
||||
// Generate .spanX and .offsetX
|
||||
.spanX(@grid-columns);
|
||||
.offsetX(@grid-columns);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -271,13 +271,3 @@
|
|||
@grid-column-width: 60px;
|
||||
@grid-gutter-width: 20px;
|
||||
@grid-row-width: (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1));
|
||||
|
||||
// 1200px min
|
||||
@grid-column-width-1200: 70px;
|
||||
@grid-gutter-width-1200: 30px;
|
||||
@grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1));
|
||||
|
||||
// 768px-979px
|
||||
@grid-column-width-768: 42px;
|
||||
@grid-gutter-width-768: 20px;
|
||||
@grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));
|
||||
|
|
|
|||
Loading…
Reference in New Issue