Skip to content

B
bootstrap
Commit a12f0e55 authored by Mark Otto's avatar Mark Otto
Browse files
Options

overhaul docs on sub pages, clean up css and copy

parent 549d61fc
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 8167 additions and 8299 deletions
docs/assets/css/docs.css
View file @ a12f0e55
......@@ -12,12 +12,8 @@
body {
position: relative;
padding-top: 80px;
padding-top: 40px;
font-size: 14px;
background-color: #fff;
background-image: url(../img/grid-20px.png);
background-repeat: repeat-x;
background-position: 0 40px;
}
/* Code in headings */
......@@ -87,7 +83,22 @@ hr.soften {
------------------------- */
.jumbotron {
position: relative;
padding: 40px 0;
color: #fff;
text-align: center;
text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
background: #020031; /* Old browsers */
background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}
.jumbotron h1 {
font-size: 80px;
......@@ -118,22 +129,8 @@ hr.soften {
------------------------- */
.masthead {
padding: 50px 0 60px;
margin-top: -40px;
margin-bottom: 0;
color: #fff;
text-align: center;
text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075);
background: #020031; /* Old browsers */
background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}
.masthead h1 {
font-size: 120px;
......@@ -211,6 +208,9 @@ hr.soften {
.subhead h1 {
font-size: 60px;
}
.subhead p {
margin-bottom: 10px;
}
.subhead .navbar {
display: none;
}
......@@ -736,7 +736,7 @@ form.bs-docs-example {
padding-top: 0;
}
/* Widen masthead and social buttons to fill body padding */
.masthead {
.jumbotron {
margin-top: -20px; /* Offset bottom margin on .navbar */
}
}
......@@ -750,7 +750,7 @@ form.bs-docs-example {
}
/* Widen masthead and social buttons to fill body padding */
.masthead {
.jumbotron {
padding: 40px 20px;
margin-top: -20px; /* Offset bottom margin on .navbar */
margin-right: -20px;
......
docs/base-css.html
View file @ a12f0e55
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/components.html
View file @ a12f0e55
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/download.html
View file @ a12f0e55
......@@ -66,8 +66,6 @@
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
......@@ -416,8 +414,6 @@
</section><!-- /download -->
</form>
</div>
<!-- Footer
......
docs/examples.html
View file @ a12f0e55
......@@ -66,8 +66,6 @@
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
......@@ -100,8 +98,6 @@
</li>
</ul>
</div>
<!-- Footer
......
docs/extend.html
View file @ a12f0e55
......@@ -66,113 +66,114 @@
</div>
</div>
<div class="container">
<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
<div class="container">
<h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
<div>
</header>
<div class="container">
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#built-with-less">Built with LESS <i class="icon-chevron-right"></i></a></li>
<li><a href="#compiling">Compiling Bootstrap <i class="icon-chevron-right"></i></a></li>
<li><a href="#static-assets">Use as static assets <i class="icon-chevron-right"></i></a></li>
</ul>
</div>
<div class="span9">
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#built-with-less">Built with LESS <i class="icon-chevron-right"></i></a></li>
<li><a href="#compiling">Compiling Bootstrap <i class="icon-chevron-right"></i></a></li>
<li><a href="#static-assets">Use as static assets <i class="icon-chevron-right"></i></a></li>
</ul>
</div>
<div class="span9">
<!-- BUILT WITH LESS
================================================== -->
<section id="built-with-less">
<div class="page-header">
<h1>Built with LESS</h1>
</div>
<!-- BUILT WITH LESS
================================================== -->
<section id="built-with-less">
<div class="page-header">
<h1>Built with LESS</h1>
</div>
<h3>Why LESS?</h3>
<p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
<h3>Why LESS?</h3>
<p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
<h3>What's included?</h3>
<p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
<h3>What's included?</h3>
<p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
<h3>Learn more</h3>
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
<p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
</section>
<h3>Learn more</h3>
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
<p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
</section>
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
<section id="compiling">
<div class="page-header">
<h1>Compiling Bootstrap with LESS</h1>
</div>
<div class="alert alert-info">
<strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
</div>
<!-- COMPILING LESS AND BOOTSTRAP
================================================== -->
<section id="compiling">
<div class="page-header">
<h1>Compiling Bootstrap with LESS</h1>
</div>
<div class="alert alert-info">
<strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
</div>
<h2>Tools for compiling</h2>
<h2>Tools for compiling</h2>
<h3>Node with makefile</h3>
<p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
<pre>$ npm install -g less jshint recess uglify-js</pre>
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
<p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
<h3>Node with makefile</h3>
<p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
<pre>$ npm install -g less jshint recess uglify-js</pre>
<p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
<p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
<h3>Command line</h3>
<p>Install the LESS command line tool via Node and run the following command:</p>
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
<h3>Command line</h3>
<p>Install the LESS command line tool via Node and run the following command:</p>
<pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
<p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
<h3>Javascript</h3>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
<h3>Javascript</h3>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
<pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</pre>
<p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
<p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
<h3>Unofficial Mac app</h3>
<p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
<p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
<h3>Unofficial Mac app</h3>
<p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
<p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
<h3>More Mac apps</h3>
<h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
<p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
<h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
<p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
<p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
<h3>More Mac apps</h3>
<h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
<p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
<h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
<p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
<p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
</section>
</section>
<!-- Static assets
================================================== -->
<section id="static-assets">
<div class="page-header">
<h1>Use as static assets</h1>
</div>
<p>...</p>
</section>
<!-- Static assets
================================================== -->
<section id="static-assets">
<div class="page-header">
<h1>Use as static assets</h1>
</div>
<p>...</p>
</section>
</div>
</div>
</div>
</div>
</div>
......
docs/getting-started.html
View file @ a12f0e55
......@@ -66,15 +66,17 @@
</div>
</div>
<div class="container">
</div>
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>Getting started</h1>
<p class="lead">Overview of the project, it's contents, and how to get started with a simple template.</p>
</div>
</header>
<div class="container">
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
......@@ -211,8 +213,6 @@
</div>
</div>
</div>
<!-- Footer
......
docs/index.html
View file @ a12f0e55
......@@ -66,16 +66,13 @@
</div>
</div>
<div class="container">
</div>
<div class="jumbotron masthead">
<div class="container">
<h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" >Download Bootstrap</a></p>
<ul class="masthead-links">
<li><a href="./getting-started.html" >Getting started</a></li>
<li><a href="./download.html" >Customize</a></li>
<li><a href="http://github.com/twitter/bootstrap" >GitHub project</a></li>
<li>Version 2.1.0</li>
......@@ -158,7 +155,7 @@
</div><!-- /.marketing -->
</div>
</div>
......
docs/javascript.html
View file @ a12f0e55
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/scaffolding.html
View file @ a12f0e55
This diff is collapsed.
docs/templates/layout.mustache
View file @ a12f0e55
......@@ -78,12 +78,8 @@
</div>
</div>
<div class="container">
{{>body}}
</div>{{! /container }}
<!-- Footer
......
docs/templates/pages/base-css.mustache
View file @ a12f0e55
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/templates/pages/components.mustache
View file @ a12f0e55
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/templates/pages/extend.mustache
View file @ a12f0e55
This diff is collapsed.
docs/templates/pages/getting-started.mustache
View file @ a12f0e55
</div>
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>{{_i}}Getting started{{/i}}</h1>
<p class="lead">{{_i}}Overview of the project, it's contents, and how to get started with a simple template.{{/i}}</p>
</div>
</header>
<div class="container">
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
......
docs/templates/pages/index.mustache
View file @ a12f0e55
</div>
<div class="jumbotron masthead">
<div class="container">
<h1>Bootstrap</h1>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
<p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.1.0']);"{{/production}}>{{_i}}Download Bootstrap{{/i}}</a></p>
<ul class="masthead-links">
<li><a href="./getting-started.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Getting started']);"{{/production}}>Getting started</a></li>
<li><a href="./download.html" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Customize']);"{{/production}}>Customize</a></li>
<li><a href="http://github.com/twitter/bootstrap" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);"{{/production}}>GitHub project</a></li>
<li>Version 2.1.0</li>
......@@ -87,3 +86,5 @@
</div>
</div><!-- /.marketing -->
</div>{{! /container }}
docs/templates/pages/javascript.mustache
View file @ a12f0e55
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/templates/pages/scaffolding.mustache
View file @ a12f0e55
This diff is collapsed.
docs/upgrading.html
View file @ a12f0e55
......@@ -66,8 +66,6 @@
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
......@@ -263,8 +261,6 @@
</section>
</div>
<!-- Footer
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment