grid vars updated
This commit is contained in:
parent
b8b266ca7c
commit
adc2c779a0
|
@ -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 -->
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
|
@ -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);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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));
|
||||||
|
|
Loading…
Reference in New Issue