From 687d4a3eebf15fe9235ece784a541c1fad5852b0 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 17 Jan 2013 00:42:31 -0800
Subject: [PATCH] Move grid/container styles to grid.less; update docs; add
offsetting back
---
docs/assets/css/bootstrap.css | 157 +++++++++++++++++-------------
docs/assets/css/docs.css | 3 +
docs/css.html | 11 ++-
docs/templates/pages/css.mustache | 11 ++-
less/bootstrap.less | 46 ---------
less/grid.less | 50 ++++++++++
less/scaffolding.less | 6 +-
7 files changed, 163 insertions(+), 121 deletions(-)
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 345064d4fc..6f9d92ecce 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -204,16 +204,14 @@ table {
html {
font-size: 62.5%;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media screen and (max-device-width: 480px) {
html {
- -webkit-text-size-adjust: none;
- -ms-text-size-adjust: none;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
}
}
@@ -726,6 +724,94 @@ pre code {
box-sizing: border-box;
}
+@media screen and (min-width: 768px) {
+ [class^="span"] {
+ float: left;
+ }
+ .span1 {
+ width: 8.3333333%;
+ }
+ .span2 {
+ width: 16.6666667%;
+ }
+ .span3 {
+ width: 25%;
+ }
+ .span4 {
+ width: 33.3333333%;
+ }
+ .span5 {
+ width: 41.666666667%;
+ }
+ .span6 {
+ width: 50%;
+ }
+ .span7 {
+ width: 58.333333333%;
+ }
+ .span8 {
+ width: 66.666666667%;
+ }
+ .span9 {
+ width: 75%;
+ }
+ .span10 {
+ width: 83.333333333%;
+ }
+ .span11 {
+ width: 91.666666667%;
+ }
+ .offset1 {
+ margin-left: 8.3333333%;
+ }
+ .offset2 {
+ margin-left: 16.6666667%;
+ }
+ .offset3 {
+ margin-left: 25%;
+ }
+ .offset4 {
+ margin-left: 33.3333333%;
+ }
+ .offset5 {
+ margin-left: 41.666666667%;
+ }
+ .offset6 {
+ margin-left: 50%;
+ }
+ .offset7 {
+ margin-left: 58.333333333%;
+ }
+ .offset8 {
+ margin-left: 66.666666667%;
+ }
+ .offset9 {
+ margin-left: 75%;
+ }
+ .offset10 {
+ margin-left: 83.333333333%;
+ }
+ .offset11 {
+ margin-left: 91.666666667%;
+ }
+}
+
+@media screen and (min-width: 992px) {
+ .container {
+ max-width: 940px;
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .container {
+ max-width: 1170px;
+ }
+ [class^="span"] {
+ padding-right: 15px;
+ padding-left: 15px;
+ }
+}
+
[class*="span"].pull-right {
float: right;
}
@@ -4544,69 +4630,6 @@ a.badge:hover {
position: fixed;
}
-@media screen and (min-width: 768px) {
- [class^="span"] {
- float: left;
- }
- .span1 {
- width: 8.3333333%;
- }
- .span2 {
- width: 16.6666667%;
- }
- .span3 {
- width: 25%;
- }
- .span4 {
- width: 33.3333333%;
- }
- .span5 {
- width: 41.666666667%;
- }
- .span6 {
- width: 50%;
- }
- .span7 {
- width: 58.333333333%;
- }
- .span8 {
- width: 66.666666667%;
- }
- .span9 {
- width: 75%;
- }
- .span10 {
- width: 83.333333333%;
- }
- .span11 {
- width: 91.666666667%;
- }
-}
-
-@media screen and (min-width: 992px) {
- {
- /* body {
- font-size: 1.6rem;
- font-size: 16px;
- }
- */
-
- }
- .container {
- max-width: 940px;
- }
-}
-
-@media screen and (min-width: 1200px) {
- .container {
- max-width: 1170px;
- }
- [class^="span"] {
- padding-right: 15px;
- padding-left: 15px;
- }
-}
-
/*
// Responsive
// -------------------------------------------------------------
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a2ba177695..27744e96d8 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -139,6 +139,9 @@ section > ul li {
/* Special grid styles
-------------------------------------------------- */
+.show-grid {
+ margin-bottom: 15px;
+}
.show-grid [class^="span"] {
padding-top: 10px;
padding-bottom: 10px;
diff --git a/docs/css.html b/docs/css.html
index ac6d981415..fe0ab54667 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -83,7 +83,7 @@
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
- <li><a href="#global"><i class="glyphicon-chevron-right"></i> Global styles</a></li>
+ <li><a href="#global"><i class="glyphicon-chevron-right"></i> Global settings</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
<li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
@@ -105,6 +105,7 @@
<div class="page-header">
<h1>Global settings</h1>
</div>
+ <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h3>Requires HTML5 doctype</h3>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
@@ -115,6 +116,12 @@
</html>
</pre>
+ <h3>Mobile first</h3>
+ <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
+ <p>To enable proper mobile styles, <strong>add the viewport meta tag</strong> to your <code><head></code>:</p>
+ <pre class="prettyprint linenums"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
+ <p>This meta tag improves rendering of sites on mobile devices and ensures proper touch-based zooming.</p>
+
<h3>Typography and links</h3>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
@@ -554,7 +561,7 @@
<h2>Nesting columns</h2>
- <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
+ <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="span9">
Level 1: 9 columns
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 2d31dd3f64..b2fe366743 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -15,7 +15,7 @@
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
- <li><a href="#global"><i class="glyphicon-chevron-right"></i> Global styles</a></li>
+ <li><a href="#global"><i class="glyphicon-chevron-right"></i> Global settings</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#code"><i class="glyphicon-chevron-right"></i> Code</a></li>
<li><a href="#gridSystem"><i class="glyphicon-chevron-right"></i> Grid system</a></li>
@@ -37,6 +37,7 @@
<div class="page-header">
<h1>Global settings</h1>
</div>
+ <p class="lead">Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
<h3>Requires HTML5 doctype</h3>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
@@ -47,6 +48,12 @@
</html>
</pre>
+ <h3>Mobile first</h3>
+ <p>With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, <strong>Bootstrap is mobile first</strong>. Mobile first styles can be found throughout the entire library instead of in separate files.</p>
+ <p>To enable proper mobile styles, <strong>add the viewport meta tag</strong> to your <code><head></code>:</p>
+ <pre class="prettyprint linenums"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
+ <p>This meta tag improves rendering of sites on mobile devices and ensures proper touch-based zooming.</p>
+
<h3>Typography and links</h3>
<p>Bootstrap sets basic global display, typography, and link styles. Specifically, we:</p>
<ul>
@@ -494,7 +501,7 @@
<h2>Nesting columns</h2>
- <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to the number of columns of its parent.</p>
+ <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid">
<div class="span9">
Level 1: 9 columns
diff --git a/less/bootstrap.less b/less/bootstrap.less
index 3150af6773..d6021ae366 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -59,52 +59,6 @@
@import "utilities.less"; // Has to be last to override when necessary
-// Responsive: Tablets and up
-@media screen and (min-width: 768px) {
-
- [class^="span"] {
- float: left;
- }
- .span1 { width: 8.3333333%; }
- .span2 { width: 16.6666667%; }
- .span3 { width: 25%; }
- .span4 { width: 33.3333333%; }
- .span5 { width: 41.666666667%; }
- .span6 { width: 50%; }
- .span7 { width: 58.333333333%; }
- .span8 { width: 66.666666667%; }
- .span9 { width: 75%; }
- .span10 { width: 83.333333333%; }
- .span11 { width: 91.666666667%; }
-
-}
-
-// Responsive: Desktops and up
-@media screen and (min-width: 992px) {
-
-/* body {
- font-size: 1.6rem;
- font-size: 16px;
- }
-*/
- .container {
- max-width: 940px;
- }
-
-}
-
-// Responsive: Large desktops and up
-@media screen and (min-width: 1200px) {
-
- .container {
- max-width: 1170px;
- }
- [class^="span"] {
- padding-left: 15px;
- padding-right: 15px;
- }
-
-}
/*
// Responsive
diff --git a/less/grid.less b/less/grid.less
index b8c1c3beb8..521e64904a 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -24,6 +24,56 @@
box-sizing: border-box;
}
+// Responsive: Tablets and up
+@media screen and (min-width: 768px) {
+
+ [class^="span"] {
+ float: left;
+ }
+ .span1 { width: 8.3333333%; }
+ .span2 { width: 16.6666667%; }
+ .span3 { width: 25%; }
+ .span4 { width: 33.3333333%; }
+ .span5 { width: 41.666666667%; }
+ .span6 { width: 50%; }
+ .span7 { width: 58.333333333%; }
+ .span8 { width: 66.666666667%; }
+ .span9 { width: 75%; }
+ .span10 { width: 83.333333333%; }
+ .span11 { width: 91.666666667%; }
+
+ .offset1 { margin-left: 8.3333333%; }
+ .offset2 { margin-left: 16.6666667%; }
+ .offset3 { margin-left: 25%; }
+ .offset4 { margin-left: 33.3333333%; }
+ .offset5 { margin-left: 41.666666667%; }
+ .offset6 { margin-left: 50%; }
+ .offset7 { margin-left: 58.333333333%; }
+ .offset8 { margin-left: 66.666666667%; }
+ .offset9 { margin-left: 75%; }
+ .offset10 { margin-left: 83.333333333%; }
+ .offset11 { margin-left: 91.666666667%; }
+
+}
+
+// Responsive: Desktops and up
+@media screen and (min-width: 992px) {
+ .container {
+ max-width: 940px;
+ }
+}
+
+// Responsive: Large desktops and up
+@media screen and (min-width: 1200px) {
+ .container {
+ max-width: 1170px;
+ }
+ [class^="span"] {
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+}
+
// Fixed (940px)
// #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 2f0189dd60..3748b00ebf 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -11,15 +11,13 @@ html {
// Touch the Mobile Magicâ„¢
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: rgba(0,0,0,0);
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
}
// Disable iOS/WinMobile font size changes
@media screen and (max-device-width: 480px) {
html {
- -ms-text-size-adjust: none;
- -webkit-text-size-adjust: none;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
}
}
--
GitLab