mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

remake the box-size grid, nuke fluid grid docs, fix up examples, clean up form styles

Browse Source
This commit is contained in:
Mark Otto
2012-08-28 13:33:06 -07:00
parent e27b1355b5
commit 0b122bc5c5
10 changed files with 238 additions and 1299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/forms.less
+6 -3
View File
@@ -297,9 +297,12 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS
// ----------------------
// Grid sizes
#grid > .input(@gridColumnWidth, @gridGutterWidth);
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"] {
height: 30px;
}
// Control row for multiple inputs per line
.controls-row {
.clearfix(); // Clear the float from controls
less/grid.less
+6 -4
View File
@@ -3,11 +3,13 @@
// --------------------------------------------------
// Fixed (940px)
#grid > .core(@gridColumnWidth, @gridGutterWidth);
// Set the container width, and override it for fixed navbars in media queries
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container { width: 940px; }
// Fluid (940px)
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
// Fixed (940px)
#grid > .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth);
// Reset utility classes due to specificity
[class*="span"].hide,
less/mixins.less
+11 -90
View File
@@ -556,7 +556,7 @@
// The Grid
#grid {
.core (@gridColumnWidth, @gridGutterWidth) {
.core (@gridColumnWidth, @gridGutterWidth, @gridRowWidth) {
.spanX (@index) when (@index > 0) {
(~".span@{index}") { .span(@index); }
@@ -571,112 +571,33 @@
.offsetX (0) {}
.offset (@columns) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
margin-left: percentage(@columns / @gridColumns);
}
.span (@columns) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
width: percentage(@columns / @gridColumns);
}
.row {
margin-left: @gridGutterWidth * -1;
margin-left: @gridGutterWidth / -2;
margin-right: @gridGutterWidth / -2;
.clearfix();
}
[class*="span"] {
float: left;
min-height: 1px; // prevent collapsing columns
margin-left: @gridGutterWidth;
min-height: 1px; // prevent column collapsing
padding-left: @gridGutterWidth / 2;
padding-right: @gridGutterWidth / 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
// Set the container width, and override it for fixed navbars in media queries
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container { .span(@gridColumns); }
// generate .spanX and .offsetX
.spanX (@gridColumns);
.offsetX (@gridColumns);
}
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.spanX (@index) when (@index > 0) {
(~".span@{index}") { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.offsetX (@index) when (@index > 0) {
(~'.offset@{index}') { .offset(@index); }
(~'.offset@{index}:first-child') { .offsetFirstChild(@index); }
.offsetX(@index - 1);
}
.offsetX (0) {}
.offset (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
}
.offsetFirstChild (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
}
.span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}
.row-fluid {
width: 100%;
.clearfix();
[class*="span"] {
.input-block-level();
float: left;
margin-left: @fluidGridGutterWidth;
*margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
}
[class*="span"]:first-child {
margin-left: 0;
}
// generate .spanX and .offsetX
.spanX (@gridColumns);
.offsetX (@gridColumns);
}
}
.input(@gridColumnWidth, @gridGutterWidth) {
.spanX (@index) when (@index > 0) {
(~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.span(@columns) {
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
}
input,
textarea,
.uneditable-input {
margin-left: 0; // override margin-left from core grid system
}
// Space grid-sized controls properly if multiple per line
.controls-row [class*="span"] + [class*="span"] {
margin-left: @gridGutterWidth;
}
// generate .spanX
.spanX (@gridColumns);
}
}
less/responsive-1200px-min.less
+8 -10
View File
@@ -5,14 +5,15 @@
@media (min-width: 1200px) {
// Set the container width, and override it for fixed navbars in media queries
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
}
// Fixed grid
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
// Fluid grid
#grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
// Input grid
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
// Thumbnails
.thumbnails {
@@ -21,8 +22,5 @@
.thumbnails > li {
margin-left: @gridGutterWidth1200;
}
.row-fluid .thumbnails {
margin-left: 0;
}
}
less/responsive-768px-979px.less
+1 -9
View File
@@ -6,14 +6,6 @@
@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
#grid > .core(@gridColumnWidth768, @gridGutterWidth768);
// Fluid grid
#grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
// Input grid
#grid > .input(@gridColumnWidth768, @gridGutterWidth768);
// No need to reset .thumbnails here since it's the same @gridGutterWidth
#grid > .core(@gridColumnWidth768, @gridGutterWidth768, @gridRowWidth768);
}
less/variables.less
-14
View File
@@ -263,17 +263,3 @@
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);