0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00

add new global styles docs section for mentioning doctype requirements, base body changes, and type/links; also tightened up code styles

This commit is contained in:
Mark Otto 2012-02-19 16:28:46 -08:00
parent f4f34ab12f
commit 8247cb3362
5 changed files with 82 additions and 2 deletions

Binary file not shown.

View File

@ -482,7 +482,7 @@ code, pre {
border-radius: 3px; border-radius: 3px;
} }
code { code {
padding: 3px 4px; padding: 2px 4px;
color: #d14; color: #d14;
background-color: #f7f7f9; background-color: #f7f7f9;
border: 1px solid #e1e1e8; border: 1px solid #e1e1e8;

View File

@ -81,6 +81,7 @@
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p> <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
<div class="subnav"> <div class="subnav">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li><a href="#global">Global styles</a></li>
<li><a href="#gridSystem">Grid system</a></li> <li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid grid system</a></li> <li><a href="#fluidGridSystem">Fluid grid system</a></li>
<li><a href="#gridCustomization">Customizing</a></li> <li><a href="#gridCustomization">Customizing</a></li>
@ -92,6 +93,45 @@
<!-- Global Bootstrap settings
================================================== -->
<section id="global">
<div class="page-header">
<h1>Global styles <small>for CSS reset, typography, and links</small></h1>
</div>
<div class="row">
<div class="span4">
<h2>Requires HTML5 doctype</h2>
<p>Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. Be sure to include it at the beginning of every Bootstrapped page in your project.</p>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
...
&lt;/html&gt;
</pre>
</div><!-- /.span -->
<div class="span4">
<h2>Links styled globally</h2>
<p>Within the <strong>scaffolding.less</strong> file, we set basic global display, typography, and link styles. Specifically, we:</p>
<ul>
<li>Remove margin on the body</li>
<li>Set <code>background-color: white;</code> on the <code>body</code></li>
<li>Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographyic base</li>
<li>Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code></li>
</ul>
</div><!-- /.span -->
<div class="span4">
<h2>Reset via Normalize</h2>
<p>As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>.</p>
<p>The new reset can still be found in <strong>reset.less</strong>, but with many elements removed for brevity and accuracy.</p>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Grid system <!-- Grid system
================================================== --> ================================================== -->
<section id="gridSystem"> <section id="gridSystem">

View File

@ -5,6 +5,7 @@
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p> <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<div class="subnav"> <div class="subnav">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li> <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li> <li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li> <li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
@ -16,6 +17,45 @@
<!-- Global Bootstrap settings
================================================== -->
<section id="global">
<div class="page-header">
<h1>{{_i}}Global styles <small>for CSS reset, typography, and links</small>{{/i}}</h1>
</div>
<div class="row">
<div class="span4">
<h2>{{_i}}Requires HTML5 doctype{{/i}}</h2>
<p>{{_i}}Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. Be sure to include it at the beginning of every Bootstrapped page in your project.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
...
&lt;/html&gt;
</pre>
</div><!-- /.span -->
<div class="span4">
<h2>{{_i}}Links styled globally{{/i}}</h2>
<p>{{_i}}Within the <strong>scaffolding.less</strong> file, we set basic global display, typography, and link styles. Specifically, we:{{/i}}</p>
<ul>
<li>{{_i}}Remove margin on the body{{/i}}</li>
<li>{{_i}}Set <code>background-color: white;</code> on the <code>body</code>{{/i}}</li>
<li>{{_i}}Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographyic base{{/i}}</li>
<li>{{_i}}Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code>{{/i}}</li>
</ul>
</div><!-- /.span -->
<div class="span4">
<h2>{{_i}}Reset via Normalize{{/i}}</h2>
<p>{{_i}}As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>.{{/i}}</p>
<p>{{_i}}The new reset can still be found in <strong>reset.less</strong>, but with many elements removed for brevity and accuracy.{{/i}}</p>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Grid system <!-- Grid system
================================================== --> ================================================== -->
<section id="gridSystem"> <section id="gridSystem">

View File

@ -14,7 +14,7 @@ pre {
// Inline code // Inline code
code { code {
padding: 3px 4px; padding: 2px 4px;
color: #d14; color: #d14;
background-color: #f7f7f9; background-color: #f7f7f9;
border: 1px solid #e1e1e8; border: 1px solid #e1e1e8;