From cfc2353059df628c67d19a3c5c3ead2cc6051f53 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jan 2012 23:59:22 -0800 Subject: front page docs updated to include old getting started section, update code styles to look like github gists, and lots more docs updates --- docs/assets/css/docs.css | 73 +++++++++- docs/assets/js/google-code-prettify/prettify.css | 16 ++- docs/base-css.html | 14 ++ docs/components.html | 171 +++++++++++++++++------ docs/index.html | 40 +++++- docs/less.html | 6 +- docs/scaffolding.html | 1 - docs/upgrading.html | 3 + 8 files changed, 269 insertions(+), 55 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6cffcbc20..579baad7d 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -192,6 +192,75 @@ body > .navbar-fixed .brand:hover { } +/* 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 { + line-height: 18px; + text-align: center; + margin-bottom: 9px; +} +.quick-start p { + color: #777; +} +.quick-start .current-version, +.quick-start .current-version a { + color: #999; +} +.quick-start form { + margin-bottom: 0; +} +.quick-start textarea { + display: block; + width: 100%; + height: auto; + margin-bottom: 0; + line-height: 21px; + white-space: nowrap; + overflow: hidden; + /* Makes inputs behave like true block-level elements */ + -webkit-box-sizing: border-box; /* Older Webkit */ + -moz-box-sizing: border-box; /* Older FF */ + -ms-box-sizing: border-box; /* IE8 */ + box-sizing: border-box; /* CSS3 spec*/ + /* Hacks for IE7 to make this work just okay enough to function */ + *width: 90%; + *height: 24px; +} + + /* Footer -------------------------------------------------- */ .footer { @@ -341,8 +410,10 @@ h2 + table { .example-sites img { max-width: 290px; } -.built-with { +.marketing-byline { margin: -18px 0 27px; + font-size: 18px; + font-weight: 300; color: #999; text-align: center; } diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index 7ff618550..e3bbf8b6c 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -2,10 +2,10 @@ .lit { color: #195f91; } .pun, .opn, .clo { color: #93a1a1; } .fun { color: #dc322f; } -.str, .atv { color: #62C462; } -.kwd, .linenums .tag { color: #049CD9; } -.typ, .atn, .dec, .var { color: #EE5F5B; } -.pln { color: #93a1a1; } +.str, .atv { color: #D14; } +.kwd, .linenums .tag { color: #1e347b; } +.typ, .atn, .dec, .var { color: teal; } +.pln { color: #48484c; } pre.prettyprint { background-color: #fefbf3; padding: 9px; @@ -17,8 +17,14 @@ pre.prettyprint { background-color: #252525; } +pre.prettyprint { + padding: 8px; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} + /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */ -ol.linenums li { color: #444; line-height: 18px; } +ol.linenums li { color: #bebec5; line-height: 18px; text-shadow: 0 1px 0 #fff; } /* Alternate shading for lines */ li.L1, li.L3, li.L5, li.L7, li.L9 { } \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index 399a41463..cbdf5ea19 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1044,6 +1044,20 @@

Here's more help text

+
+ +
+ + + +
+
diff --git a/docs/components.html b/docs/components.html index 5c25a98a4..5bafc5a60 100644 --- a/docs/components.html +++ b/docs/components.html @@ -227,27 +227,27 @@ ================================================== -->
-

Side nav

+

Side nav for lists of links

+

Examples

+

Side navs can be just links, links with headings, and links with icons.

-
Your account
+
Your account
+ -
-
-
-
Your account
+
+

Why use it

+

+
+
+

Markup

+

Marking up a side nav is at the core just writing an unordered list of links.

+
+  <ul class="nav-group">
+    <li class="active">
+      <a class="nav-item" href="#">Home</a>
+    </li>
+    <li><a class="nav-item" href="#">Library</a></li>
+    <li><a class="nav-item" href="#">Help</a></li>
+  </ul>
+
+

Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.

+
+  <h6 class="nav-label"></h6>
+  <ul class="nav-group">
+    ...
+  </ul>
+  <h6 class="nav-label"></h6>
+  <ul class="nav-group">
+    ...
+  </ul>
+
+
@@ -267,10 +295,12 @@

Navbar

-
+

Static navbar example

+

An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

+
- Project Name + Project name
-
-

What is it

-

Our navbar is a fixed bar that houses a website’s logo or name, primary navigation, and search form.

-
-
-

Customizable

-

All elements within, and the entire navbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.

+
+

Navbar scaffolding

+

The navbar requires only a few divs to structure it well for static or fixed display.

+
+<div class="navbar navbar-static">
+  <div class="navbar-inner">
+    <div class="container" style="width: auto;">
+      ...
+    </div>
+  </div>
+</div>
+
+

To make the navbar fixed, swamp the .navbar-static class for .navbar-fixed. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

+
+<div class="navbar navbar-fixed">
+  ...
+</div>
+
+
+

Brand name

+

A simple link to show your brand or project name only requires an anchor tag.

+
+<a class="brand" href="#">
+  Project name
+</a>
+
+
+

Search form

+

Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.

+
+<form class="navbar-search">
+  <input type="text" class="search-query pull-left" placeholder="Search">
+</form>
+
-

Dropdowns included

-

As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <li> tags also support .active for showing current page selection.

+

Nav links

+

Nav items are simple to add via unordered lists.

+
+<ul class="nav">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">Link</a></li>
+  <li><a href="#">Link</a></li>
+</ul>
+
+

Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.

+
+<ul class="nav">
+  <li class="dropdown">
+    <a href="#"
+          class="dropdown-toggle"
+          data-toggle="dropdown">
+          Account
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+
-

Note: When using the navbar on any page, be sure to account for the overlap it causes by adding padding-top: 40px; to your <body>.

@@ -507,34 +587,39 @@
-
-

Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation.

-
-
+
+

Why use them

+

Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.

+ +

Examples

+

A single example shown as it might be displayed across multiple pages.

  • Home
  • Home /
    • -
  • Middle page
    • -
- +
+
+

Markup

+

HTML is your standard unordered list with links.

 <ul class="breadcrumb">
-  <li><a href="#">Home</a> <span class="divider">/</span></li>
-  <li><a href="#">Middle page</a> <span class="divider">/</span></li>
-  <li><a href="#">Another one</a> <span class="divider">/</span></li>
-  <li class="active">You are here</li>
+  <li>
+    <a href="#">Home</a> <span class="divider">/</span>
+  </li>
+  <li>
+    <a href="#">Library</a> <span class="divider">/</span>
+  </li>
+  <li class="active">
+    <a href="#">Data</a>
+  </li>
 </ul>
@@ -545,13 +630,14 @@ +================================================== + +COMMENTED OUT AND NOT SUPPORTED AT THIS TIME. +

Step nav

- -

Placeholder for now!

@@ -571,8 +657,8 @@
-
+--> @@ -682,6 +768,9 @@
+ +
+
diff --git a/docs/index.html b/docs/index.html index 0d340fa1a..231ed2066 100644 --- a/docs/index.html +++ b/docs/index.html @@ -106,8 +106,8 @@
-

Built with Bootstrap

-

For even more sites built with Bootstrap, visit the unofficial Tumblr.

+

Built with Bootstrap.

+

For even more sites built with Bootstrap, visit the unofficial Tumblr.

-

Designed for everyone, everywhere

+

Designed for everyone, everywhere.

@@ -200,8 +200,40 @@

Brought to you by an experienced engineer and designer.

-
+ + +

Get started in no time.

+

Built for any skill level, Bootstrap fits your workflow and development process.

+ + + + + + + + +
+

Hotlink the CSS

+

For the quickest and easiest start, just copy this snippet into your webpage.

+
+ +
+ 		+

Use it with LESS

+

A fan of using LESS? No problem, just clone the repo and add these lines:

+
+ +
+ 		+

Fork on GitHub

+

Download, fork, pull, file issues, and more with the official Bootstrap repo on Github.

+

Bootstrap on GitHub »

+

Currently v2.0.0

+
+
diff --git a/docs/less.html b/docs/less.html index 7d3efd296..05398e966 100644 --- a/docs/less.html +++ b/docs/less.html @@ -403,8 +403,8 @@ Node with makefile -

Install the less command line compiler with npm by running the following command:

- 
$ npm install lessc
+

Install the LESS command line compiler with npm by running the following command:

+ 
$ npm install less

Once installed just run make from the root of your bootstrap directory and you're all set.

Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).

@@ -422,7 +422,7 @@ Command line -

If you already have the less command line tool installed, simply run the following command:

+

Install the LESS command line tool via Node and run the following command:

$ lessc ./lib/bootstrap.less > bootstrap.css

Be sure to include --compress in that command if you're trying to save some bytes!

diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 87394006b..bf42d4468 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -395,7 +395,6 @@
Side nav
Navbar
Tabs and pills
-
Step nav
Pagination
Alerts and errors
Modals
diff --git a/docs/upgrading.html b/docs/upgrading.html index 7be1fd708..c84cba123 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -92,6 +92,9 @@
  • Typography
    • Right-aligned option for blockquotes if float: right;
      • +
    • h4 elements were dropped from 16px to 14px with a default line-height of 18px
      • +
    • h5 elements were dropped from 14px to 12px
      • +
    • h6 elements were dropped from 13px to 11px
  • Buttons -- cgit v1.2.3