Skip to content
GitLab
Commit adc2c779 authored by Mark Otto's avatar Mark Otto
Browse files

grid vars updated

parent b8b266ca
21 merge requests!7033Fix backdrop undefined bug in modal,!8635ignore Gruntfile.js in jekyll,!8339Fix broken links to navbar component in docs examples,!7329Fix for issue #7328,!7219Fix for mini typo mistake in css.html,!7674Clear float on all when navbar is collapsed - v3,!7344Fixed .spanX selector (*= instead of ^=),!7346Fix compilation error,!7775added some tests for tooltip title setter,!8157Close Me: Docs "Customize and Download" button fix,!7509Proposed fix for allowing Collapse events ('show'/'hide') to be cancelled,!7964commit fixes #7792,!8656Added rel="stylesheet" to CDN-Examples,!8527Inner properties move 1,!8245Interactive color picker - Closed: request against wrong branch,!7865Patch 2,!7651Drop the sizzle dependency to allow smaller builds targeting mobile devices,!6853typeahead: do not store item data in an attribute,!6666Patch 1,!65463.0.0 wip - fixed the issue in which the test pid isn't killed if a test fails,!6503control markup changes added
Hide whitespace changes
Inline Side-by-side
Showing
with 52 additions and 52 deletions
+52 -52
docs/customize.html
+ 7
- 7
View file @ adc2c779
...@@ -249,19 +249,19 @@ ...@@ -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 -->
......
docs/templates/pages/customize.mustache
+ 7
- 7
View file @ adc2c779
...@@ -181,19 +181,19 @@ ...@@ -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 -->
......
less/forms.less
+ 1
- 1
View file @ adc2c779
...@@ -291,7 +291,7 @@ textarea[class*="span"], ...@@ -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
......
less/grid.less
+ 1
- 1
View file @ adc2c779
...@@ -9,7 +9,7 @@ ...@@ -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 {
......
less/layouts.less
+ 2
- 2
View file @ adc2c779
...@@ -10,7 +10,7 @@ ...@@ -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();
} }
\ No newline at end of file
less/mixins.less
+ 20
- 20
View file @ adc2c779
...@@ -319,7 +319,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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);
} }
......
less/navbar.less
+ 1
- 1
View file @ adc2c779
...@@ -173,7 +173,7 @@ ...@@ -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
......
less/responsive-1200px-min.less
+ 2
- 2
View file @ adc2c779
...@@ -11,7 +11,7 @@ ...@@ -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);
} }
less/responsive-768px-979px.less
+ 1
- 1
View file @ adc2c779
...@@ -6,6 +6,6 @@ ...@@ -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);
} }
less/variables.less
+ 10
- 10
View file @ adc2c779
...@@ -262,17 +262,17 @@ ...@@ -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));
Supports Markdown
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