From 48529ad01fa2a60bfc9179743dcb5379e8ff944f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:06:57 -0800 Subject: [PATCH] last minute addition of a simple fluid grid for our fluid examples; it needs work, so we're not documenting it now --- docs/assets/css/bootstrap-responsive.css | 101 +++++++++++- docs/assets/css/bootstrap.css | 76 +++++---- docs/scaffolding.html | 1 - docs/templates/pages/scaffolding.mustache | 1 - examples/fluid.html | 182 ++++++++++++---------- less/grid.less | 73 ++++++++- less/layouts.less | 30 +--- less/mixins.less | 21 +-- less/responsive.less | 93 ++++++++++- less/variables.less | 9 -- 10 files changed, 399 insertions(+), 188 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index ca03cecde8..44e0125c13 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -77,6 +77,9 @@ width: auto; padding: 0 20px; } + .row-fluid { + width: 100%; + } .row { margin-left: 0; } @@ -162,6 +165,50 @@ .offset11 { margin-left: 702px; } + .row-fluid { + width: 102.76243093919337%; + margin-left: -2.762430939%; + } + .row-fluid [class*="span"] { + float: left; + margin-left: 2.762430939%; + } + .row-fluid .span1 { + width: 5.6451612899588115%; + } + .row-fluid .span2 { + width: 13.978494622708812%; + } + .row-fluid .span3 { + width: 22.31182795545881%; + } + .row-fluid .span4 { + width: 30.64516128820881%; + } + .row-fluid .span5 { + width: 38.97849462095881%; + } + .row-fluid .span6 { + width: 47.311827953708814%; + } + .row-fluid .span7 { + width: 55.645161286458816%; + } + .row-fluid .span8 { + width: 63.97849461920882%; + } + .row-fluid .span9 { + width: 72.31182795195882%; + } + .row-fluid .span10 { + width: 80.64516128470882%; + } + .row-fluid .span11 { + width: 88.97849461745884%; + } + .row-fluid .span12 { + width: 97.31182795020881%; + } } @media (max-width: 940px) { body { @@ -169,7 +216,7 @@ } .navbar-fixed-top { position: static; - margin-bottom: 36px; + margin-bottom: 18px; } .navbar-inner { padding: 5px; @@ -264,6 +311,12 @@ } } @media (min-width: 1200px) { + .thumbnails { + margin-left: -30px; + } + .thumbnails > li { + margin-left: 30px; + } .container { width: 1170px; } @@ -342,10 +395,48 @@ .offset11 { margin-left: 1130px; } - .thumbnails { - margin-left: -30px; + .row-fluid { + width: 102.56143440326584%; + margin-left: -2.56%; } - .thumbnails > li { - margin-left: 30px; + .row-fluid [class*="span"] { + float: left; + margin-left: 2.56%; + } + .row-fluid .span1 { + width: 5.832601732615312%; + } + .row-fluid .span2 { + width: 14.16126839928198%; + } + .row-fluid .span3 { + width: 22.489935065948643%; + } + .row-fluid .span4 { + width: 30.818601732615313%; + } + .row-fluid .span5 { + width: 39.14726839928198%; + } + .row-fluid .span6 { + width: 47.47593506594863%; + } + .row-fluid .span7 { + width: 55.8046017326153%; + } + .row-fluid .span8 { + width: 64.13326839928197%; + } + .row-fluid .span9 { + width: 72.46193506594864%; + } + .row-fluid .span10 { + width: 80.7906017326153%; + } + .row-fluid .span11 { + width: 89.11926839928198%; + } + .row-fluid .span12 { + width: 97.44793506594864%; } } diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c96818a564..60383fba05 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -126,7 +126,7 @@ a:hover { margin-left: 20px; } .span1 { - width: 60px; + width: 59.99999999999999px; } .span2 { width: 140px; @@ -194,6 +194,50 @@ a:hover { .offset11 { margin-left: 900px; } +.row-fluid { + width: 102.12765957421277%; + margin-left: -2.127659574%; +} +.row-fluid [class*="span"] { + float: left; + margin-left: 2.127659574%; +} +.row-fluid .span1 { + width: 6.249999999619791%; +} +.row-fluid .span2 { + width: 14.58333333211979%; +} +.row-fluid .span3 { + width: 22.91666666461979%; +} +.row-fluid .span4 { + width: 31.24999999711979%; +} +.row-fluid .span5 { + width: 39.58333332961979%; +} +.row-fluid .span6 { + width: 47.91666666211979%; +} +.row-fluid .span7 { + width: 56.24999999461979%; +} +.row-fluid .span8 { + width: 64.58333332711977%; +} +.row-fluid .span9 { + width: 72.91666665961978%; +} +.row-fluid .span10 { + width: 81.24999999211977%; +} +.row-fluid .span11 { + width: 89.58333332461977%; +} +.row-fluid .span12 { + width: 97.91666665711978%; +} .container { width: 940px; margin-left: auto; @@ -207,42 +251,18 @@ a:hover { .container:after { clear: both; } -.fluid-container { - position: relative; - min-width: 940px; +.container-fluid { padding-left: 20px; padding-right: 20px; *zoom: 1; } -.fluid-container:before, .fluid-container:after { +.container-fluid:before, .container-fluid:after { display: table; content: ""; } -.fluid-container:after { +.container-fluid:after { clear: both; } -.fluid-sidebar { - width: 220px; - margin: 0 20px 18px; -} -.sidebar-left { - padding-left: 260px; -} -.sidebar-right { - padding-right: 260px; -} -.sidebar-left .fluid-sidebar { - float: left; - margin-left: -240px; -} -.sidebar-right .fluid-sidebar { - float: right; - margin-right: -240px; -} -.fluid-content { - float: left; - width: 100%; -} p { margin: 0 0 9px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 184b356083..b00f5630b5 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -124,7 +124,6 @@
12
-

The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.

diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index 6d5a66f8da..239d152652 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -52,7 +52,6 @@
12
-

{{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}

diff --git a/examples/fluid.html b/examples/fluid.html index ce2d3b6289..1cdfd6568f 100644 --- a/examples/fluid.html +++ b/examples/fluid.html @@ -16,8 +16,13 @@ + @@ -30,98 +35,107 @@
-
+
+ + + + + Project name - -

Logged in as username

+
+ +

Logged in as username

+
-
-
-
- -
-
-
- -
-

Hello, world!

-

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

-

Learn more »

-
- - -
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

+
+
+
+
+ +
+
+
+
+

Hello, world!

+

This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

+

Learn more »

-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

View details »

-
-
+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+
+
-
+
- -
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

-

View details »

-
-
-

Heading

-

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

-

View details »

-
-
+
+

© Company 2012

+
-
- -
-

© Company 2012

-
-
-
+
+ + + + + + + - \ No newline at end of file + diff --git a/less/grid.less b/less/grid.less index d5b5f487d1..4493d0b952 100644 --- a/less/grid.less +++ b/less/grid.less @@ -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); } +} diff --git a/less/layouts.less b/less/layouts.less index 14435c9d15..c8d358b24a 100644 --- a/less/layouts.less +++ b/less/layouts.less @@ -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%; -} +} \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 2bfcd053ee..2d0e2d4c08 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -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 diff --git a/less/responsive.less b/less/responsive.less index db2675e3db..107fa7dd77 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -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); } + } } diff --git a/less/variables.less b/less/variables.less index 4265d7ed31..c1e21978c3 100644 --- a/less/variables.less +++ b/less/variables.less @@ -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;