kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

grid vars updated

Browse source
This commit is contained in:
Mark Otto 2012-11-30 15:43:07 -08:00
parent b8b266ca7c
commit adc2c779a0
10 changed files with 52 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
docs/customize.html
View file

@ -249,19 +249,19 @@
<input type="text" class="span3" placeholder="darken(@link-color, 15%)"> <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
<h3>Grid system</h3> <h3>Grid system</h3>
<label>@gridColumns</label> <label>@grid-columns</label>
<input type="text" class="span3" placeholder="12"> <input type="text" class="span3" placeholder="12">
<label>@gridColumnWidth</label> <label>@grid-column-width</label>
<input type="text" class="span3" placeholder="60px"> <input type="text" class="span3" placeholder="60px">
<label>@gridGutterWidth</label> <label>@grid-gutter-width</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" class="span3" placeholder="20px">
<label>@gridColumnWidth1200</label> <label>@grid-column-width-1200</label>
<input type="text" class="span3" placeholder="70px"> <input type="text" class="span3" placeholder="70px">
<label>@gridGutterWidth1200</label> <label>@grid-gutter-width-1200</label>
<input type="text" class="span3" placeholder="30px"> <input type="text" class="span3" placeholder="30px">
<label>@gridColumnWidth768</label> <label>@grid-column-width-768</label>
<input type="text" class="span3" placeholder="42px"> <input type="text" class="span3" placeholder="42px">
<label>@gridGutterWidth768</label> <label>@grid-gutter-width-768</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" class="span3" placeholder="20px">
</div><!-- /span --> </div><!-- /span -->

14
docs/templates/pages/customize.mustache vendored
View file

@ -181,19 +181,19 @@
<input type="text" class="span3" placeholder="darken(@link-color, 15%)"> <input type="text" class="span3" placeholder="darken(@link-color, 15%)">
<h3>{{_i}}Grid system{{/i}}</h3> <h3>{{_i}}Grid system{{/i}}</h3>
<label>@gridColumns</label> <label>@grid-columns</label>
<input type="text" class="span3" placeholder="12"> <input type="text" class="span3" placeholder="12">
<label>@gridColumnWidth</label> <label>@grid-column-width</label>
<input type="text" class="span3" placeholder="60px"> <input type="text" class="span3" placeholder="60px">
<label>@gridGutterWidth</label> <label>@grid-gutter-width</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" class="span3" placeholder="20px">
<label>@gridColumnWidth1200</label> <label>@grid-column-width-1200</label>
<input type="text" class="span3" placeholder="70px"> <input type="text" class="span3" placeholder="70px">
<label>@gridGutterWidth1200</label> <label>@grid-gutter-width-1200</label>
<input type="text" class="span3" placeholder="30px"> <input type="text" class="span3" placeholder="30px">
<label>@gridColumnWidth768</label> <label>@grid-column-width-768</label>
<input type="text" class="span3" placeholder="42px"> <input type="text" class="span3" placeholder="42px">
<label>@gridGutterWidth768</label> <label>@grid-gutter-width-768</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" class="span3" placeholder="20px">
</div><!-- /span --> </div><!-- /span -->

2
less/forms.less
View file

@ -291,7 +291,7 @@ textarea[class*="span"],
} }
.controls-row { .controls-row {
#grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth); #grid > .input(@grid-column-width, @grid-gutter-width, @grid-row-width);
} }
// Ensure input-prepend/append never wraps // Ensure input-prepend/append never wraps

2
less/grid.less
View file

@ -9,7 +9,7 @@
} }
// Fixed (940px) // Fixed (940px)
#grid > .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth); #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"].hide { [class*="span"].hide {

4
less/layouts.less
View file

@ -10,7 +10,7 @@
// Fluid layouts (left aligned, with sidebar, min- & max-width content) // Fluid layouts (left aligned, with sidebar, min- & max-width content)
.container-fluid { .container-fluid {
padding-right: @gridGutterWidth; padding-right: @grid-gutter-width;
padding-left: @gridGutterWidth; padding-left: @grid-gutter-width;
.clearfix(); .clearfix();
} }

40
less/mixins.less
View file

@ -319,7 +319,7 @@
} }
// CSS3 Content Columns // CSS3 Content Columns
.content-columns(@columnCount, @columnGap: @gridGutterWidth) { .content-columns(@columnCount, @columnGap: @grid-gutter-width) {
-webkit-column-count: @columnCount; -webkit-column-count: @columnCount;
-moz-column-count: @columnCount; -moz-column-count: @columnCount;
column-count: @columnCount; column-count: @columnCount;
@ -474,19 +474,19 @@
// 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: @gridGutterWidth * -1; margin-left: @grid-gutter-width * -1;
.clearfix(); .clearfix();
} }
.makeColumn(@columns: 1, @offset: 0) { .makeColumn(@columns: 1, @offset: 0) {
float: left; float: left;
margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); margin-left: (@grid-column-width * @offset) + (@grid-gutter-width * (@offset - 1)) + (@grid-gutter-width * 2);
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); width: (@grid-column-width * @columns) + (@grid-gutter-width * (@columns - 1));
} }
// The Grid // The Grid
#grid { #grid {
.core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) { .core(@grid-column-width, @grid-gutter-width, @grid-row-width) {
.spanX(@index) when (@index > 0) { .spanX(@index) when (@index > 0) {
(~".span@{index}") { .span(@index); } (~".span@{index}") { .span(@index); }
@ -503,16 +503,16 @@
// Base styles // Base styles
.offset(@columns) { .offset(@columns) {
margin-left: percentage(@columns / @gridColumns); margin-left: percentage(@columns / @grid-columns);
} }
.span(@columns) { .span(@columns) {
width: percentage(@columns / @gridColumns); width: percentage(@columns / @grid-columns);
} }
.row { .row {
// Negative indent the columns so text lines up // Negative indent the columns so text lines up
margin-left: @gridGutterWidth / -2; margin-left: @grid-gutter-width / -2;
margin-right: @gridGutterWidth / -2; margin-right: @grid-gutter-width / -2;
// Clear the floated columns // Clear the floated columns
.clearfix(); .clearfix();
} }
@ -520,8 +520,8 @@
[class*="span"] { [class*="span"] {
float: left; // Collapse whitespace float: left; // Collapse whitespace
min-height: 1px; // Prevent empty columns from collapsing min-height: 1px; // Prevent empty columns from collapsing
padding-left: @gridGutterWidth / 2; padding-left: @grid-gutter-width / 2;
padding-right: @gridGutterWidth / 2; padding-right: @grid-gutter-width / 2;
// Proper box-model (padding doesnt' add to width) // Proper box-model (padding doesnt' add to width)
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -529,13 +529,13 @@
} }
// Generate .spanX and .offsetX // Generate .spanX and .offsetX
.spanX(@gridColumns); .spanX(@grid-columns);
.offsetX(@gridColumns); .offsetX(@grid-columns);
} }
.input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) { .input(@grid-column-width, @grid-gutter-width, @grid-row-width) {
.spanX(@index) when (@index > 0) { .spanX(@index) when (@index > 0) {
(~"input.span@{index}, textarea.span@{index}, select.span@{index}, .uneditable-input.span@{index}") { .span(@index); } (~"input.span@{index}, textarea.span@{index}, select.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
@ -552,20 +552,20 @@
.span(@columns) { .span(@columns) {
// TODO: Figure out how to add this back behind a class // 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. // 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 / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth); //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. // Part 2: That subtracted width then gets split in half and added to the left and right margins.
// margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth); // margin-left: percentage((@grid-gutter-width / 2) / @grid-row-width);
// margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth); // margin-right: percentage((@grid-gutter-width / 2) / @grid-row-width);
} }
.offset(@columns) { .offset(@columns) {
// Take the normal offset margin and add an extra gutter's worth. // Take the normal offset margin and add an extra gutter's worth.
margin-left: percentage(@columns / @gridColumns) + percentage((@gridGutterWidth / 2) / @gridRowWidth); margin-left: percentage(@columns / @grid-columns) + percentage((@grid-gutter-width / 2) / @grid-row-width);
} }
// Generate .spanX and .offsetX // Generate .spanX and .offsetX
.spanX(@gridColumns); .spanX(@grid-columns);
.offsetX(@gridColumns); .offsetX(@grid-columns);
} }

2
less/navbar.less
View file

@ -173,7 +173,7 @@
.navbar-static-top .container, .navbar-static-top .container,
.navbar-fixed-top .container, .navbar-fixed-top .container,
.navbar-fixed-bottom .container { .navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns); #grid > .core > .span(@grid-columns);
} }
// Fixed to top // Fixed to top

4
less/responsive-1200px-min.less
View file

@ -11,7 +11,7 @@
} }
// Fixed grid // Fixed grid
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200); #grid > .core(@grid-column-width-1200, @grid-gutter-width-1200, @grid-row-width-1200);
// #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200); // #grid > .input(@grid-column-width-1200, @grid-gutter-width-1200, @grid-row-width-1200);
} }

2
less/responsive-768px-979px.less
View file

@ -6,6 +6,6 @@
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
// Fixed grid // Fixed grid
#grid > .core(@gridColumnWidth768, @gridGutterWidth768, @gridRowWidth768); #grid > .core(@grid-column-width-768, @grid-gutter-width-768, @grid-row-width-768);
} }

20
less/variables.less
View file

@ -262,17 +262,17 @@
// -------------------------------------------------- // --------------------------------------------------
// Default 940px grid // Default 940px grid
@gridColumns: 12; @grid-columns: 12;
@gridColumnWidth: 60px; @grid-column-width: 60px;
@gridGutterWidth: 20px; @grid-gutter-width: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); @grid-row-width: (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1));
// 1200px min // 1200px min
@gridColumnWidth1200: 70px; @grid-column-width-1200: 70px;
@gridGutterWidth1200: 30px; @grid-gutter-width-1200: 30px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); @grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1));
// 768px-979px // 768px-979px
@gridColumnWidth768: 42px; @grid-column-width-768: 42px;
@gridGutterWidth768: 20px; @grid-gutter-width-768: 20px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); @grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));