mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

last minute addition of a simple fluid grid for our fluid examples; it needs work, so we're not documenting it now

Browse Source
This commit is contained in:
Mark Otto
2012-01-29 13:06:57 -08:00
parent 059ff6bcbd
commit 48529ad01f
10 changed files with 399 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
less/grid.less
+69 -4
View File
@@ -1,14 +1,40 @@
// GRID SYSTEM
// -----------
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
// Default grid sizing
// -------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@gridTotalWidth: @gridRowWidth;
// Columns and offseting mixins
// ----------------------------
.columns(@columns: 1) {
//width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth);
}
.offset(@columns: 1) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
float: left;
margin-left: @gridGutterWidth;
}
// Grid rows and columns
// ---------------------
.row {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
// Find all .span# classes within .row and give them the necessary properties for grid columns
// (supported by all browsers back to IE7)
// Credit to @dhg for the idea
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
[class*="span"] {
.gridColumn();
}
@@ -39,3 +65,42 @@
.offset9 { .offset(9); }
.offset10 { .offset(10); }
.offset11 { .offset(11); }
// FLUID GRID SYSTEM
// -----------------
// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1.
.row-fluid {
@gridColumnWidth: 6.382978723%;
@gridGutterWidth: 2.127659574%;
width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
margin-left: 0 - @gridGutterWidth;
// Redeclare the mixins
.gridColumn() {
float: left;
margin-left: @gridGutterWidth;
}
[class*="span"] {
.gridColumn();
}
.fluidColumns(@columns: 1) {
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
}
// Redeclare the columns
.span1 { .fluidColumns(1); }
.span2 { .fluidColumns(2); }
.span3 { .fluidColumns(3); }
.span4 { .fluidColumns(4); }
.span5 { .fluidColumns(5); }
.span6 { .fluidColumns(6); }
.span7 { .fluidColumns(7); }
.span8 { .fluidColumns(8); }
.span9 { .fluidColumns(9); }
.span10 { .fluidColumns(10); }
.span11 { .fluidColumns(11); }
.span12 { .fluidColumns(12); }
}
less/layouts.less
+2 -28
View File
@@ -10,34 +10,8 @@
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
.fluid-container {
position: relative;
min-width: @siteWidth;
.container-fluid {
padding-left: @gridGutterWidth;
padding-right: @gridGutterWidth;
.clearfix();
}
// Sidebars (left and right options)
.fluid-sidebar {
width: @fluidSidebarWidth;
margin: 0 20px 18px;
}
.sidebar-left { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; }
.sidebar-right { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; }
// Float the sidebars accordingly
.sidebar-left .fluid-sidebar {
float: left;
margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1;
}
.sidebar-right .fluid-sidebar {
float: right;
margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1;
}
// The main content area
.fluid-content {
float: left;
width: 100%;
}
}
less/mixins.less
+1 -20
View File
@@ -133,31 +133,12 @@
// Site container
// -------------------------
.container-fixed() {
width: @siteWidth;
width: @gridTotalWidth;
margin-left: auto;
margin-right: auto;
.clearfix();
}
// Columns and offseting
// -------------------------
.columns(@columns: 1) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
.offset(@columns: 1) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
// Necessary grid styles for every column to make them appear next to each other horizontally
.gridColumn() {
float: left;
margin-left: @gridGutterWidth;
}
// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
.makeColumn(@columnSpan: 1) {
.gridColumn();
.columns(@columnSpan);
}
// CSS3 PROPERTIES
less/responsive.less
+85 -8
View File
@@ -115,6 +115,10 @@
width: auto;
padding: 0 20px;
}
// Fluid rows
.row-fluid {
width: 100%;
}
// Undo negative margin on rows
.row {
margin-left: 0;
@@ -182,6 +186,42 @@
.offset10 { .offset(10); }
.offset11 { .offset(11); }
// FLUID GRID
// ----------
.row-fluid {
@gridColumnWidth: 5.801104972%;
@gridGutterWidth: 2.762430939%;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@gridTotalWidth: @gridRowWidth;
width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
margin-left: 0 - @gridGutterWidth;
// Redeclare the mixins
.gridColumn() {
float: left;
margin-left: @gridGutterWidth;
}
[class*="span"] {
.gridColumn();
}
.fluidColumns(@columns: 1) {
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
}
// Redeclare the columns
.span1 { .fluidColumns(1); }
.span2 { .fluidColumns(2); }
.span3 { .fluidColumns(3); }
.span4 { .fluidColumns(4); }
.span5 { .fluidColumns(5); }
.span6 { .fluidColumns(6); }
.span7 { .fluidColumns(7); }
.span8 { .fluidColumns(8); }
.span9 { .fluidColumns(9); }
.span10 { .fluidColumns(10); }
.span11 { .fluidColumns(11); }
.span12 { .fluidColumns(12); }
}
}
@@ -198,7 +238,7 @@
// Unfix the navbar
.navbar-fixed-top {
position: static;
margin-bottom: @baseLineHeight * 2;
margin-bottom: @baseLineHeight;
}
.navbar-inner {
padding: 5px;
@@ -314,6 +354,14 @@
@gridGutterWidth: 30px;
@siteWidth: 1170px;
// Thumbnails
.thumbnails {
margin-left: @gridGutterWidth * -1;
}
.thumbnails > li {
margin-left: @gridGutterWidth;
}
// Bring grid mixins to recalculate widths
.columns(@columns: 1) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
@@ -358,12 +406,41 @@
.offset10 { .offset(10); }
.offset11 { .offset(11); }
// Thumbnails
.thumbnails {
margin-left: @gridGutterWidth * -1;
}
.thumbnails > li {
margin-left: @gridGutterWidth;
}
// FLUID GRID
// ----------
.row-fluid {
@gridColumnWidth: 5.982%;
@gridGutterWidth: 2.56%;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@gridTotalWidth: @gridRowWidth;
width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
margin-left: 0 - @gridGutterWidth;
// Redeclare the mixins
.gridColumn() {
float: left;
margin-left: @gridGutterWidth;
}
[class*="span"] {
.gridColumn();
}
.fluidColumns(@columns: 1) {
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
}
// Redeclare the columns
.span1 { .fluidColumns(1); }
.span2 { .fluidColumns(2); }
.span3 { .fluidColumns(3); }
.span4 { .fluidColumns(4); }
.span5 { .fluidColumns(5); }
.span6 { .fluidColumns(6); }
.span7 { .fluidColumns(7); }
.span8 { .fluidColumns(8); }
.span9 { .fluidColumns(9); }
.span10 { .fluidColumns(10); }
.span11 { .fluidColumns(11); }
.span12 { .fluidColumns(12); }
}
}
less/variables.less
-9
View File
@@ -30,15 +30,6 @@
@pink: #c3325f;
@purple: #7a43b6;
// Grid system
// Modify the grid styles in mixins.less
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Fluid width sidebar
@fluidSidebarWidth: 220px;
// Typography
@baseFontSize: 13px;
@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;