github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-02-04 19:15:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mark Otto
2012-06-20 23:46:51 -07:00
parent 59153205b3
commit 160fe7ca59
8 changed files with 71 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
less/mixins.less
View File

@@ -618,7 +618,9 @@
}
// 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
.spanX (@gridColumns);
@@ -645,7 +647,7 @@
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%);

10
less/responsive-1200px-min.less
View File

@@ -4,20 +4,20 @@
@media (min-width: 1200px) {
// Fixed grid
#grid > .core(70px, 30px);
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
// Fluid grid
#grid > .fluid(5.982905983%, 2.564102564%);
#grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
// Input grid
#grid > .input(70px, 30px);
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
// Thumbnails
.thumbnails {
margin-left: -30px;
margin-left: -@gridGutterWidth1200;
}
.thumbnails > li {
margin-left: 30px;
margin-left: @gridGutterWidth1200;
}
.row-fluid .thumbnails {
margin-left: 0;

6
less/responsive-768px-979px.less
View File

@@ -4,13 +4,13 @@
@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
#grid > .core(42px, 20px);
#grid > .core(@gridColumnWidth768, @gridGutterWidth768);
// Fluid grid
#grid > .fluid(5.801104972%, 2.762430939%);
#grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
// Input grid
#grid > .input(42px, 20px);
#grid > .input(@gridColumnWidth768, @gridGutterWidth768);
// No need to reset .thumbnails here since it's the same @gridGutterWidth

18
less/variables.less
View File

@@ -198,6 +198,7 @@
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;
@@ -205,7 +206,24 @@
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 20px;
// Fluid grid
// -------------------------
@fluidGridColumnWidth: 6.382978723%;
@fluidGridGutterWidth: 2.127659574%;
// 1200px min
@fluidGridColumnWidth1200: 5.982905983%;
@fluidGridGutterWidth1200: 2.564102564%;
// 768px-979px
@fluidGridColumnWidth768: 5.801104972%;
@fluidGridGutterWidth768: 2.762430939%;