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

create vars for responsive grid values, fixed and fluid, and document them in the customizer

parent 59153205
8 merge requests!4427Use variable for desktop media query,!4258Aria,!4248Amended mentions of 'javascript' to the correct 'JavaScript',!4235Patch 1,!4232Fixing the modal z-index issue + make modal stacking possible,!42132.1.0 wip,!4165Patch 2,!39192.1.0 wip
Hide whitespace changes
Inline Side-by-side
Showing
with 71 additions and 13 deletions
+71 -13
docs/assets/css/bootstrap-responsive.css
+ 6
- 2
View file @ 160fe7ca
...@@ -215,7 +215,9 @@ ...@@ -215,7 +215,9 @@
float: left; float: left;
margin-left: 20px; margin-left: 20px;
} }
.container { .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 724px; width: 724px;
} }
.span12 { .span12 {
...@@ -545,7 +547,9 @@ ...@@ -545,7 +547,9 @@
float: left; float: left;
margin-left: 30px; margin-left: 30px;
} }
.container { .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px; width: 1170px;
} }
.span12 { .span12 {
......
docs/assets/css/bootstrap.css
+ 3
- 1
View file @ 160fe7ca
...@@ -194,7 +194,9 @@ a:hover { ...@@ -194,7 +194,9 @@ a:hover {
margin-left: 20px; margin-left: 20px;
} }
.container { .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px; width: 940px;
} }
......
docs/download.html
+ 16
- 0
View file @ 160fe7ca
...@@ -276,11 +276,27 @@ ...@@ -276,11 +276,27 @@
<input type="text" class="span3" placeholder="60px"> <input type="text" class="span3" placeholder="60px">
<label>@gridGutterWidth</label> <label>@gridGutterWidth</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" class="span3" placeholder="20px">
<label>@gridColumnWidth1200</label>
<input type="text" class="span3" placeholder="70px">
<label>@gridGutterWidth1200</label>
<input type="text" class="span3" placeholder="30px">
<label>@gridColumnWidth768</label>
<input type="text" class="span3" placeholder="42px">
<label>@gridGutterWidth768</label>
<input type="text" class="span3" placeholder="20px">
<h3>Fluid grid system</h3> <h3>Fluid grid system</h3>
<label>@fluidGridColumnWidth</label> <label>@fluidGridColumnWidth</label>
<input type="text" class="span3" placeholder="6.382978723%"> <input type="text" class="span3" placeholder="6.382978723%">
<label>@fluidGridGutterWidth</label> <label>@fluidGridGutterWidth</label>
<input type="text" class="span3" placeholder="2.127659574%"> <input type="text" class="span3" placeholder="2.127659574%">
<label>@fluidGridColumnWidth1200</label>
<input type="text" class="span3" placeholder="5.982905983%">
<label>@fluidGridGutterWidth1200</label>
<input type="text" class="span3" placeholder="2.564102564%">
<label>@fluidGridColumnWidth768</label>
<input type="text" class="span3" placeholder="5.801104972%">
<label>@fluidGridGutterWidth768</label>
<input type="text" class="span3" placeholder="2.762430939%">
<h3>Typography</h3> <h3>Typography</h3>
<label>@sansFontFamily</label> <label>@sansFontFamily</label>
......
docs/templates/pages/download.mustache
+ 16
- 0
View file @ 160fe7ca
...@@ -199,11 +199,27 @@ ...@@ -199,11 +199,27 @@
<input type="text" class="span3" placeholder="60px"> <input type="text" class="span3" placeholder="60px">
<label>@gridGutterWidth</label> <label>@gridGutterWidth</label>
<input type="text" class="span3" placeholder="20px"> <input type="text" class="span3" placeholder="20px">
<label>@gridColumnWidth1200</label>
<input type="text" class="span3" placeholder="70px">
<label>@gridGutterWidth1200</label>
<input type="text" class="span3" placeholder="30px">
<label>@gridColumnWidth768</label>
<input type="text" class="span3" placeholder="42px">
<label>@gridGutterWidth768</label>
<input type="text" class="span3" placeholder="20px">
<h3>{{_i}}Fluid grid system{{/i}}</h3> <h3>{{_i}}Fluid grid system{{/i}}</h3>
<label>@fluidGridColumnWidth</label> <label>@fluidGridColumnWidth</label>
<input type="text" class="span3" placeholder="6.382978723%"> <input type="text" class="span3" placeholder="6.382978723%">
<label>@fluidGridGutterWidth</label> <label>@fluidGridGutterWidth</label>
<input type="text" class="span3" placeholder="2.127659574%"> <input type="text" class="span3" placeholder="2.127659574%">
<label>@fluidGridColumnWidth1200</label>
<input type="text" class="span3" placeholder="5.982905983%">
<label>@fluidGridGutterWidth1200</label>
<input type="text" class="span3" placeholder="2.564102564%">
<label>@fluidGridColumnWidth768</label>
<input type="text" class="span3" placeholder="5.801104972%">
<label>@fluidGridGutterWidth768</label>
<input type="text" class="span3" placeholder="2.762430939%">
<h3>{{_i}}Typography{{/i}}</h3> <h3>{{_i}}Typography{{/i}}</h3>
<label>@sansFontFamily</label> <label>@sansFontFamily</label>
......
less/mixins.less
+ 4
- 2
View file @ 160fe7ca
...@@ -618,7 +618,9 @@ ...@@ -618,7 +618,9 @@
} }
// Set the container width, and override it for fixed navbars in media queries // Set the container width, and override it for fixed navbars in media queries
.container { .span(@gridColumns); } .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container { .span(@gridColumns); }
// generate .spanX and .offsetX // generate .spanX and .offsetX
.spanX (@gridColumns); .spanX (@gridColumns);
...@@ -645,7 +647,7 @@ ...@@ -645,7 +647,7 @@
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); 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%); *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
} }
.offsetFirstChild (@columns) { .offsetFirstChild (@columns) {
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
......
less/responsive-1200px-min.less
+ 5
- 5
View file @ 160fe7ca
...@@ -4,20 +4,20 @@ ...@@ -4,20 +4,20 @@
@media (min-width: 1200px) { @media (min-width: 1200px) {
// Fixed grid // Fixed grid
#grid > .core(70px, 30px); #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
// Fluid grid // Fluid grid
#grid > .fluid(5.982905983%, 2.564102564%); #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
// Input grid // Input grid
#grid > .input(70px, 30px); #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
// Thumbnails // Thumbnails
.thumbnails { .thumbnails {
margin-left: -30px; margin-left: -@gridGutterWidth1200;
} }
.thumbnails > li { .thumbnails > li {
margin-left: 30px; margin-left: @gridGutterWidth1200;
} }
.row-fluid .thumbnails { .row-fluid .thumbnails {
margin-left: 0; margin-left: 0;
......
less/responsive-768px-979px.less
+ 3
- 3
View file @ 160fe7ca
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) and (max-width: 979px) {
// Fixed grid // Fixed grid
#grid > .core(42px, 20px); #grid > .core(@gridColumnWidth768, @gridGutterWidth768);
// Fluid grid // Fluid grid
#grid > .fluid(5.801104972%, 2.762430939%); #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
// Input grid // Input grid
#grid > .input(42px, 20px); #grid > .input(@gridColumnWidth768, @gridGutterWidth768);
// No need to reset .thumbnails here since it's the same @gridGutterWidth // No need to reset .thumbnails here since it's the same @gridGutterWidth
......
less/variables.less
+ 18
- 0
View file @ 160fe7ca
...@@ -198,6 +198,7 @@ ...@@ -198,6 +198,7 @@
// GRID // GRID
// -------------------------------------------------- // --------------------------------------------------
// Default 940px grid // Default 940px grid
// ------------------------- // -------------------------
@gridColumns: 12; @gridColumns: 12;
...@@ -205,7 +206,24 @@ ...@@ -205,7 +206,24 @@
@gridGutterWidth: 20px; @gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
// Fluid grid // Fluid grid
// ------------------------- // -------------------------
@fluidGridColumnWidth: 6.382978723%; @fluidGridColumnWidth: 6.382978723%;
@fluidGridGutterWidth: 2.127659574%; @fluidGridGutterWidth: 2.127659574%;
// 1200px min
@fluidGridColumnWidth1200: 5.982905983%;
@fluidGridGutterWidth1200: 2.564102564%;
// 768px-979px
@fluidGridColumnWidth768: 5.801104972%;
@fluidGridGutterWidth768: 2.762430939%;
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