Skip to content

B
bootstrap
Commit 01b32f47 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Simplify and bring back the grid mixin for generating spans and offsets

parent 7e46b6f6
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 146 deletions
docs/assets/css/bootstrap.css
View file @ 01b32f47
...@@ -731,71 +731,77 @@ pre code { ...@@ -731,71 +731,77 @@ pre code {
[class^="span"] { [class^="span"] {
float: left; float: left;
} }
.span1 { .span12 {
width: 8.3333333%; width: 100%;
} }
.span2 { .span11 {
width: 16.6666667%; width: 91.66666666666666%;
} }
.span3 { .span10 {
width: 25%; width: 83.33333333333334%;
} }
.span4 { .span9 {
width: 33.3333333%; width: 75%;
} }
.span5 { .span8 {
width: 41.666666667%; width: 66.66666666666666%;
}
.span7 {
width: 58.333333333333336%;
} }
.span6 { .span6 {
width: 50%; width: 50%;
} }
.span7 { .span5 {
width: 58.333333333%; width: 41.66666666666667%;
} }
.span8 { .span4 {
width: 66.666666667%; width: 33.33333333333333%;
} }
.span9 { .span3 {
width: 75%; width: 25%;
} }
.span10 { .span2 {
width: 83.333333333%; width: 16.666666666666664%;
} }
.span11 { .span1 {
width: 91.666666667%; width: 8.333333333333332%;
} }
.offset1 { .offset12 {
margin-left: 8.3333333%; margin-left: 100%;
} }
.offset2 { .offset11 {
margin-left: 16.6666667%; margin-left: 91.66666666666666%;
} }
.offset3 { .offset10 {
margin-left: 25%; margin-left: 83.33333333333334%;
} }
.offset4 { .offset9 {
margin-left: 33.3333333%; margin-left: 75%;
} }
.offset5 { .offset8 {
margin-left: 41.666666667%; margin-left: 66.66666666666666%;
}
.offset7 {
margin-left: 58.333333333333336%;
} }
.offset6 { .offset6 {
margin-left: 50%; margin-left: 50%;
} }
.offset7 { .offset5 {
margin-left: 58.333333333%; margin-left: 41.66666666666667%;
} }
.offset8 { .offset4 {
margin-left: 66.666666667%; margin-left: 33.33333333333333%;
} }
.offset9 { .offset3 {
margin-left: 75%; margin-left: 25%;
} }
.offset10 { .offset2 {
margin-left: 83.333333333%; margin-left: 16.666666666666664%;
} }
.offset11 { .offset1 {
margin-left: 91.666666667%; margin-left: 8.333333333333332%;
} }
} }
......
less/grid.less
View file @ 01b32f47
...@@ -10,14 +10,14 @@ ...@@ -10,14 +10,14 @@
// Mobile-first defaults // Mobile-first defaults
.row { .row {
margin-left: -10px; margin-left: @grid-gutter-width / -2;
margin-right: -10px; margin-right: @grid-gutter-width / -2;
.clear_float(); .clear_float();
} }
[class^="span"] { [class^="span"] {
min-height: 1px; min-height: 1px;
padding-left: 10px; padding-left: @grid-gutter-width / 2;
padding-right: 10px; padding-right: @grid-gutter-width / 2;
// Proper box-model (padding doesn't add to width) // Proper box-model (padding doesn't add to width)
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -26,38 +26,14 @@ ...@@ -26,38 +26,14 @@
// Responsive: Tablets and up // Responsive: Tablets and up
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.container { .container {
max-width: 728px; max-width: 728px;
} }
// Generate the grid columns and offsets
[class^="span"] { [class^="span"] {
float: left; float: left;
} }
.span1 { width: 8.3333333%; } #grid > .core(@grid-column-width, @grid-gutter-width);
.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 // Responsive: Desktops and up
...@@ -78,9 +54,6 @@ ...@@ -78,9 +54,6 @@
} }
} }
// Fixed (940px)
// #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
// Reset utility classes due to specificity // Reset utility classes due to specificity
[class*="span"].pull-right { [class*="span"].pull-right {
float: right; float: right;
......
less/mixins.less
View file @ 01b32f47
...@@ -431,20 +431,33 @@ ...@@ -431,20 +431,33 @@
// Make a Grid // Make a Grid
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
.makeRow() { // .makeRow() {
margin-left: @grid-gutter-width * -1; // margin-left: @grid-gutter-width * -1;
.clearfix(); // .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; float: left;
margin-left: (@grid-column-width * @offset) + (@grid-gutter-width * (@offset - 1)) + (@grid-gutter-width * 2); padding: @grid-gutter-width;
width: (@grid-column-width * @columns) + (@grid-gutter-width * (@columns - 1)); width: percentage(@columns / @grid-columns);
}
.make-column-offset(@columns) {
margin-left: percentage(@columns / @grid-columns);
} }
// The Grid // The Grid
#grid { #grid {
.core(@grid-column-width, @grid-gutter-width, @grid-row-width) { .core(@grid-column-width, @grid-gutter-width) {
.spanX(@index) when (@index > 0) { .spanX(@index) when (@index > 0) {
(~".span@{index}") { .span(@index); } (~".span@{index}") { .span(@index); }
...@@ -458,7 +471,6 @@ ...@@ -458,7 +471,6 @@
} }
.offsetX(0) {} .offsetX(0) {}
// Base styles // Base styles
.offset(@columns) { .offset(@columns) {
margin-left: percentage(@columns / @grid-columns); margin-left: percentage(@columns / @grid-columns);
...@@ -467,65 +479,10 @@ ...@@ -467,65 +479,10 @@
width: percentage(@columns / @grid-columns); 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 // Generate .spanX and .offsetX
.spanX(@grid-columns); .spanX(@grid-columns);
.offsetX(@grid-columns); .offsetX(@grid-columns);
} }
} }
less/variables.less
View file @ 01b32f47
...@@ -271,13 +271,3 @@ ...@@ -271,13 +271,3 @@
@grid-column-width: 60px; @grid-column-width: 60px;
@grid-gutter-width: 20px; @grid-gutter-width: 20px;
@grid-row-width: (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1)); @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));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment