Skip to content
GitLab
Commit fecd4ddd authored by Mark Otto's avatar Mark Otto
Browse files

docs updates to make the getting started section more responsive, updated the... 

docs updates to make the getting started section more responsive, updated the benefits to be clearer and swap x for checkmark
parent 3f54db9c
Hide whitespace changes
Inline Side-by-side
Showing
with 91 additions and 119 deletions
+91 -119
bootstrap.css
+ 1
- 1
View file @ fecd4ddd
......@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Tue Jan 24 12:53:25 PST 2012
* Date: Tue Jan 24 13:58:10 PST 2012
*/
article,
aside,
......
docs/assets/css/docs.css
+ 17
- 45
View file @ fecd4ddd
......@@ -83,7 +83,7 @@ section {
/* Benefits list in masthead */
.benefits {
width: 250px;
width: 280px;
position: absolute;
right: 0;
bottom: 0;
......@@ -105,8 +105,6 @@ section {
color: #555;
}
.benefits span {
position: relative;
top: -2px;
padding-right: 5px;
color: #999;
}
......@@ -200,7 +198,7 @@ section {
}
.marketing h1 {
margin: 36px 0 27px;
font-size: 36px;
font-size: 40px;
font-weight: 300;
text-align: center;
}
......@@ -227,59 +225,28 @@ section {
/* Quickstart section for getting le code
-------------------------------------------------- */
.getting-started {
background-color: #f5f5f5;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5));
background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5);
background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5));
background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5);
background-image: -o-linear-gradient(#f9f9f9, #f5f5f5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0);
background-image: linear-gradient(#f9f9f9, #f5f5f5);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.getting-started {
border-color: #eee;
}
.getting-started td {
width: 33%;
border-right: 1px solid #eee;
}
.getting-started td + td {
border-left: 1px solid #fff;
}
.getting-started td:last-child {
border-right: 0;
}
.quick-start {
padding: 17px 20px;
}
.quick-start h3,
.quick-start p {
.getting-started h3,
.getting-started p {
line-height: 18px;
text-align: center;
margin-bottom: 9px;
}
.quick-start p {
.getting-started p {
color: #777;
}
.quick-start .current-version,
.quick-start .current-version a {
.getting-started .current-version,
.getting-started .current-version a {
color: #999;
}
.quick-start form {
.getting-started form {
margin-bottom: 0;
}
.quick-start textarea {
.getting-started textarea {
display: block;
width: 100%;
width: 95%;
height: auto;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
line-height: 21px;
white-space: nowrap;
overflow: hidden;
......@@ -629,6 +596,11 @@ form.well {
margin-bottom: 5px;
}
/* Space out the getting started sections */
.getting-started .span4 {
margin-bottom: 18px;
}
/* Unfloat the back to top link in footer */
.footer .pull-right {
float: none;
......
docs/base-css.html
+ 2
- 2
View file @ fecd4ddd
......@@ -366,7 +366,7 @@
<tr>
<td><code>&lt;pre class="prettyprint"&gt;</code></td>
<td>
<p>Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<p>Using the google-code-prettify library, you're blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<pre class="prettyprint">&lt;div&gt;
&lt;h1&gt;Heading&lt;/h1&gt;
&lt;p&gt;Something right here...&lt;/p&gt;
......@@ -1105,7 +1105,7 @@
<div class="span4">
<div class="form-docs">
<h3>Redesigned browser states</h3>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.</p>
<hr>
<h3>Form validation</h3>
<p>It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.</p>
......
docs/components.html
+ 1
- 1
View file @ fecd4ddd
......@@ -1088,7 +1088,7 @@
<div class="row">
<div class="span4">
<h3>Rewritten base class</h3>
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outer <code>&lt;div&gt;</code>.</p>
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outter <code>&lt;div&gt;</code>.</p>
<h3>Single alert message</h3>
<p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
<hr>
......
docs/index.html
+ 34
- 34
View file @ fecd4ddd
......@@ -74,13 +74,13 @@
<div class="benefits">
<h4>Feature highlights</h4>
<ul>
<li><span>&times;</span> Built on LESS</li>
<li><span>&times;</span> Complete styleguide docs</li>
<li><span>&times;</span> Fully responsive design</li>
<li><span>&times;</span> Small footprint (7kb gzipped)</li>
<li><span>&times;</span> Support for IE7 and up</li>
<li><span>&times;</span> Custom jQuery plugins</li>
<li><span>&times;</span> Dozens of components</li>
<li><span>&#10004;</span> Built on LESS</li>
<li><span>&#10004;</span> Complete style guide docs</li>
<li><span>&#10004;</span> Fully responsive design</li>
<li><span>&#10004;</span> Small CSS footprint (10kb gzipped)</li>
<li><span>&#10004;</span> Support for IE7 and up</li>
<li><span>&#10004;</span> Custom jQuery plugins</li>
<li><span>&#10004;</span> Dozens of components</li>
</ul>
</div>
</div>
......@@ -217,33 +217,33 @@
================================================== -->
<h1>Get started in no time.</h1>
<p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p>
<table class="table table-bordered getting-started">
<tbody>
<tr>
<td class="quick-start">
<h3>Hotlink the CSS</h3>
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
<form>
<textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
</form>
</td>
<td class="quick-start">
<h3>Use it with LESS</h3>
<p>A fan of using LESS? No problem, just clone the repo and add these lines:</p>
<form>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
</form>
</td>
<td class="quick-start">
<h3>Fork on GitHub</h3>
<p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p>
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
<p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
</td>
</tr>
</tbody>
</table>
<div class="getting-started">
<div class="row">
<div class="span4">
<h3>Hotlink the CSS</h3>
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
<form>
<textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
</form>
</div>
<div class="span4">
<h3>Use it with LESS.js</h3>
<p>A fan of using LESS? No problem, just download the repo and add these lines to your page:</p>
<form>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
</form>
</div>
<div class="span4">
<h3>Fork on GitHub</h3>
<p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p>
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
<p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
</div>
</div><!-- /row -->
</div><!-- /getting-started -->
</div><!-- /.marketing -->
</div><!-- /#overview -->
<!-- Footer
......
docs/javascript.html
+ 1
- 1
View file @ fecd4ddd
......@@ -856,7 +856,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
<h3>Markup</h3>
<p>
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.
</p>
<h3>Methods</h3>
<h4>$().popover(options)</h4>
......
docs/less.html
+ 1
- 1
View file @ fecd4ddd
......@@ -75,7 +75,7 @@
<div class="row">
<div class="span4">
<h3>Why LESS?</h3>
<p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
<p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
</div>
<div class="span4">
<h3>What's included?</h3>
......
docs/templates/pages/index.mustache
+ 34
- 34
View file @ fecd4ddd
......@@ -14,13 +14,13 @@
<div class="benefits">
<h4>Feature highlights</h4>
<ul>
<li><span>&times;</span> Built on LESS</li>
<li><span>&times;</span> Complete styleguide docs</li>
<li><span>&times;</span> Fully responsive design</li>
<li><span>&times;</span> Small footprint (7kb gzipped)</li>
<li><span>&times;</span> Support for IE7 and up</li>
<li><span>&times;</span> Custom jQuery plugins</li>
<li><span>&times;</span> Dozens of components</li>
<li><span>&#10004;</span> Built on LESS</li>
<li><span>&#10004;</span> Complete style guide docs</li>
<li><span>&#10004;</span> Fully responsive design</li>
<li><span>&#10004;</span> Small CSS footprint (10kb gzipped)</li>
<li><span>&#10004;</span> Support for IE7 and up</li>
<li><span>&#10004;</span> Custom jQuery plugins</li>
<li><span>&#10004;</span> Dozens of components</li>
</ul>
</div>
</div>
......@@ -157,32 +157,32 @@
================================================== -->
<h1>Get started in no time.</h1>
<p class="marketing-byline">Quickly start using Bootstrap within your workflow and development process.</p>
<table class="table table-bordered getting-started">
<tbody>
<tr>
<td class="quick-start">
<h3>Hotlink the CSS</h3>
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
<form>
<textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
</form>
</td>
<td class="quick-start">
<h3>Use it with LESS</h3>
<p>A fan of using LESS? No problem, just clone the repo and add these lines:</p>
<form>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
</form>
</td>
<td class="quick-start">
<h3>Fork on GitHub</h3>
<p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p>
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
<p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
</td>
</tr>
</tbody>
</table>
<div class="getting-started">
<div class="row">
<div class="span4">
<h3>Hotlink the CSS</h3>
<p>For the quickest and easiest start, just copy this snippet into your webpage.</p>
<form>
<textarea class="copy-code" rows="1">&lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.min.css"></textarea>
</form>
</div>
<div class="span4">
<h3>Use it with LESS.js</h3>
<p>A fan of using LESS? No problem, just download the repo and add these lines to your page:</p>
<form>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
</form>
</div>
<div class="span4">
<h3>Fork on GitHub</h3>
<p>Download, fork, pull, file issues, and more with the Bootstrap GitHub repo.</p>
<p><a target="_blank" href="https://github.com/twitter/bootstrap" class="btn primary">Bootstrap on GitHub &raquo;</a></p>
<p class="current-version">Currently <a href="https://github.com/twitter/bootstrap/wiki/Changelog">v2.0.0</a></p>
</div>
</div><!-- /row -->
</div><!-- /getting-started -->
</div><!-- /.marketing -->
</div><!-- /#overview -->
\ No newline at end of file
Supports Markdown
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