diff options
author | Mark Otto <markotto@twitter.com> | 2012-07-05 10:31:30 +0400 |
---|---|---|
committer | Mark Otto <markotto@twitter.com> | 2012-07-05 10:31:30 +0400 |
commit | 62c386259b7fbd1ef665fc6baf4458c8e05ad1f8 (patch) | |
tree | 18158f9062f148bf7f81ad1be3127c3016911616 /docs | |
parent | 3ad52ca632e07948153ffb072132527d74e67c1d (diff) |
rewrite docs homepage, new graphics
Diffstat (limited to 'docs')
-rw-r--r-- | docs/assets/css/bootstrap-responsive.css | 6 | ||||
-rw-r--r-- | docs/assets/css/bootstrap.css | 102 | ||||
-rw-r--r-- | docs/assets/css/docs.css | 105 | ||||
-rw-r--r-- | docs/assets/img/bs-docs-bootstrap-features.png | bin | 0 -> 6784 bytes | |||
-rw-r--r-- | docs/assets/img/bs-docs-responsive-illustrations.png | bin | 0 -> 17253 bytes | |||
-rw-r--r-- | docs/assets/img/bs-docs-twitter-github.png | bin | 0 -> 17852 bytes | |||
-rw-r--r-- | docs/index.html | 99 | ||||
-rw-r--r-- | docs/templates/pages/index.mustache | 97 |
8 files changed, 233 insertions, 176 deletions
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index f052417256..4102e4d2cc 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -941,7 +941,7 @@ } .nav-collapse .nav > li > a:hover, .nav-collapse .dropdown-menu a:hover { - background-color: #222222; + background-color: #111111; } .nav-collapse.in .btn-group { padding: 0; @@ -977,8 +977,8 @@ float: none; padding: 9px 15px; margin: 9px 0; - border-top: 1px solid #222222; - border-bottom: 1px solid #222222; + border-top: 1px solid #111111; + border-bottom: 1px solid #111111; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e4787ae1c4..7520a3b046 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2765,9 +2765,9 @@ button.close { filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); *zoom: 1; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn:hover, @@ -2891,17 +2891,17 @@ button.close { } .btn-primary { - background-color: #0074cc; - *background-color: #0055cc; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); - background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); - background-image: -o-linear-gradient(top, #0088cc, #0055cc); - background-image: linear-gradient(top, #0088cc, #0055cc); - background-image: -moz-linear-gradient(top, #0088cc, #0055cc); + background-color: #006dcc; + *background-color: #0044cc; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); + background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); + background-image: -o-linear-gradient(top, #0088cc, #0044cc); + background-image: linear-gradient(top, #0088cc, #0044cc); + background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-repeat: repeat-x; - border-color: #0055cc #0055cc #003580; + border-color: #0044cc #0044cc #002a80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0055cc', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -2910,13 +2910,13 @@ button.close { .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { - background-color: #0055cc; - *background-color: #004ab3; + background-color: #0044cc; + *background-color: #003bb3; } .btn-primary:active, .btn-primary.active { - background-color: #004099 \9; + background-color: #003399 \9; } .btn-warning { @@ -3233,7 +3233,7 @@ input[type="submit"].btn.btn-mini { } .btn-group.open .btn-primary.dropdown-toggle { - background-color: #0055cc; + background-color: #0044cc; } .btn-group.open .btn-warning.dropdown-toggle { @@ -3781,17 +3781,17 @@ input[type="submit"].btn.btn-mini { min-height: 40px; padding-right: 20px; padding-left: 20px; - background-color: #2c2c2c; - background-image: -moz-linear-gradient(top, #333333, #222222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); - background-image: -webkit-linear-gradient(top, #333333, #222222); - background-image: -o-linear-gradient(top, #333333, #222222); - background-image: linear-gradient(top, #333333, #222222); + background-color: #1b1b1b; + background-image: -moz-linear-gradient(top, #222222, #111111); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); + background-image: -webkit-linear-gradient(top, #222222, #111111); + background-image: -o-linear-gradient(top, #222222, #111111); + background-image: linear-gradient(top, #222222, #111111); background-repeat: repeat-x; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); @@ -3906,8 +3906,8 @@ input[type="submit"].btn.btn-mini { font-weight: normal; line-height: 1; color: #ffffff; - background-color: #626262; - border: 1px solid #151515; + background-color: #515151; + border: 1px solid #040404; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); @@ -4032,7 +4032,7 @@ input[type="submit"].btn.btn-mini { .navbar .nav .active > a:focus { color: #ffffff; text-decoration: none; - background-color: #222222; + background-color: #111111; } .navbar .divider-vertical { @@ -4040,8 +4040,8 @@ input[type="submit"].btn.btn-mini { height: 40px; margin: 0 9px; overflow: hidden; - background-color: #222222; - border-right: 1px solid #333333; + background-color: #111111; + border-right: 1px solid #222222; } .navbar .nav.pull-right { @@ -4055,17 +4055,17 @@ input[type="submit"].btn.btn-mini { padding: 7px 10px; margin-right: 5px; margin-left: 5px; - background-color: #1f1f1f; - *background-color: #151515; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#151515)); - background-image: -webkit-linear-gradient(top, #262626, #151515); - background-image: -o-linear-gradient(top, #262626, #151515); - background-image: linear-gradient(top, #262626, #151515); - background-image: -moz-linear-gradient(top, #262626, #151515); + background-color: #0e0e0e; + *background-color: #040404; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); + background-image: -webkit-linear-gradient(top, #151515, #040404); + background-image: -o-linear-gradient(top, #151515, #040404); + background-image: linear-gradient(top, #151515, #040404); + background-image: -moz-linear-gradient(top, #151515, #040404); background-repeat: repeat-x; - border-color: #151515 #151515 #000000; + border-color: #040404 #040404 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff262626', endColorstr='#ff151515', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); @@ -4077,8 +4077,8 @@ input[type="submit"].btn.btn-mini { .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] { - background-color: #151515; - *background-color: #080808; + background-color: #040404; + *background-color: #000000; } .navbar .btn-navbar:active, @@ -4186,20 +4186,25 @@ input[type="submit"].btn.btn-mini { .navbar-subnav .navbar-inner { padding: 0; - background-color: #f6f6f6; - background-image: -moz-linear-gradient(top, #f9f9f9, #f1f1f1); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f1f1f1)); - background-image: -webkit-linear-gradient(top, #f9f9f9, #f1f1f1); - background-image: -o-linear-gradient(top, #f9f9f9, #f1f1f1); - background-image: linear-gradient(top, #f9f9f9, #f1f1f1); + background-color: #f9f9f9; + background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1)); + background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1); + background-image: -o-linear-gradient(top, #ffffff, #f1f1f1); + background-image: linear-gradient(top, #ffffff, #f1f1f1); background-repeat: repeat-x; border: 1px solid #e5e5e5; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff1f1f1', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } +.navbar-subnav .divider-vertical { + background-color: #f1f1f1; + border-right-color: #ffffff; +} + .navbar-subnav .nav > li > a { color: #0088cc; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); @@ -4212,7 +4217,10 @@ input[type="submit"].btn.btn-mini { .navbar-subnav .nav > .active > a, .navbar-subnav .nav > .active > a:hover { color: #777; - background-color: #e5e5e5; + background-color: #eee; + -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5); + -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5); + box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5); } .navbar-subnav .nav li.dropdown .dropdown-toggle .caret, diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 1e73e9ef05..b003b89d5d 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -86,7 +86,7 @@ section { /* Faded out hr */ hr.soften { height: 1px; - margin: 54px 0; + margin: 70px 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); @@ -185,33 +185,33 @@ hr.soften { /* Marketing section of Overview -------------------------------------------------- */ -.marketing .row { - margin-bottom: 9px; +.marketing { + text-align: center; } .marketing h1 { - margin: 40px 0 10px; - font-size: 40px; - font-weight: 300; - text-align: center; + margin: 60px 0 10px; + font-size: 60px; + font-weight: 400; + line-height: 1; + letter-spacing: -1px; } .marketing h2 { - font-weight: 300; + font-weight: 400; + letter-spacing: -1px; } .marketing p { - margin: 5px 10px 15px 0; -} -.marketing .bs-icon { - float: left; - margin: 7px 10px 0 0; - opacity: .8; + color: #555; } .marketing .marketing-byline { - margin-bottom: 30px; + margin-bottom: 40px; font-size: 20px; font-weight: 300; line-height: 25px; color: #999; - text-align: center; +} +.marketing img { + display: block; + margin: 0 auto 20px; } @@ -220,8 +220,8 @@ hr.soften { -------------------------------------------------- */ .footer { - padding: 40px 0; - margin-top: 49px; + padding: 70px 0; + margin-top: 70px; border-top: 1px solid #e5e5e5; } .footer p { @@ -405,7 +405,7 @@ h2 + .row { /* Example sites showcase */ .example-sites { - margin-left: 20px; + xmargin-left: 20px; } .example-sites img { max-width: 100%; @@ -778,16 +778,18 @@ form.bs-docs-example { - -.navbar { +.navbar-inner { + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } .jumbo { padding: 100px 0; - margin-top: -60px; + margin: -60px 0 60px; background-color: #222; color: #fff; text-align: center; - text-shadow: 0 1px 0 rgba(0,0,0,.1), 0 0 30px rgba(0,0,0,.075); + text-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 30px rgba(0,0,0,.075); background: #c9cabc; /* Old browsers */ background: -moz-linear-gradient(-45deg, #c9cabc 0%, #68686d 100%); /* FF3.6+ */ @@ -798,6 +800,24 @@ background: -ms-linear-gradient(-45deg, #c9cabc 0%,#68686d 100%); /* IE10+ */ background: linear-gradient(135deg, #c9cabc 0%,#68686d 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', endColorstr='#68686d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + background: #020031; /* Old browsers */ + background: -moz-linear-gradient(45deg, #020031 0%, #803353 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#803353)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(45deg, #020031 0%,#803353 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(45deg, #020031 0%,#803353 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(45deg, #020031 0%,#803353 100%); /* IE10+ */ + background: linear-gradient(45deg, #020031 0%,#803353 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#803353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + + 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 */ + xborder-bottom: 1px solid #68686d; -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); @@ -806,9 +826,9 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end } .jumbo h1 { font-size: 120px; - font-weight: 200; + font-weight: ; line-height: 1; - margin: 0 0 5px; + margin: 0 0 10px; letter-spacing: -2px; } .jumbo p { @@ -818,19 +838,36 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end line-height: 1.25; } .jumbo .btn { - font-size: 20px; + font-size: 24px; padding: 14px 24px; - margin: 0 0 30px 0; font-weight: 200; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); - box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 3px rgba(0,0,0,.2); + border: 0; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); } .jumbo .btn:active { - -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); - -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); - box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25); + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); +} +.jumbo-links { + margin: 0; + list-style: none; +} +.jumbo-links li { + display: inline; + padding: 0 10px; + color: rgba(255,255,255,.25); +} +.jumbo-links a { + color: #fff; + color: rgba(255,255,255,.5); } +.jumbo-links a:hover { + color: #fff; +} + @media (max-width: 480px) { @@ -849,5 +886,3 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cabc', end } } - - diff --git a/docs/assets/img/bs-docs-bootstrap-features.png b/docs/assets/img/bs-docs-bootstrap-features.png Binary files differnew file mode 100644 index 0000000000..620f403aab --- /dev/null +++ b/docs/assets/img/bs-docs-bootstrap-features.png diff --git a/docs/assets/img/bs-docs-responsive-illustrations.png b/docs/assets/img/bs-docs-responsive-illustrations.png Binary files differnew file mode 100644 index 0000000000..076bb0c8be --- /dev/null +++ b/docs/assets/img/bs-docs-responsive-illustrations.png diff --git a/docs/assets/img/bs-docs-twitter-github.png b/docs/assets/img/bs-docs-twitter-github.png Binary files differnew file mode 100644 index 0000000000..857a300cbf --- /dev/null +++ b/docs/assets/img/bs-docs-twitter-github.png diff --git a/docs/index.html b/docs/index.html index f2b6c35d70..1789a507c5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -81,7 +81,12 @@ <div class="bs-docs-container"> <h1>Bootstrap</h1> <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p> - <a href="assets/bootstrap.zip" class="btn btn-inverse btn-large">Download Bootstrap <small>(v2.1.0)</small></a> + <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large">Download Bootstrap</a></p> + <ul class="jumbo-links"> + <li><a href="#">Customize</a></li> + <li><a href="#">GitHub project</a></li> + <li>Version 2.1.0</li> + </ul> </div> </div> @@ -125,31 +130,30 @@ </div> </header> -<hr class="soften"> - <div class="marketing"> - <h1>Designed for everyone, everywhere.</h1> + + <h1>Introducing Bootstrap.</h1> <p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p> - <div class="row"> - <div class="span5"> - <img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png"> - <h2>Built for and by nerds</h2> - <p>We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.</p> - - <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png"> - <h2>Cross-everything</h2> - <p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p> - - <img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> - <h2>12-column grid</h2> - <p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p> - - <img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png"> - <h2>Responsive design</h2> - <p>Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.</p> + + <div class="row-fluid"> + <div class="span4"> + <img src="assets/img/bs-docs-twitter-github.png"> + <h2>Built by nerds, for nerds.</h2> + <p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p> </div> - <div class="span5"> - <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png"> + <div class="span4"> + <img src="assets/img/bs-docs-responsive-illustrations.png"> + <h2>Designed for everyone.</h2> + <p>Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.</p> + </div> + <div class="span4"> + <img src="assets/img/bs-docs-bootstrap-features.png"> + <h2>Packed with features.</h2> + <p>Utilize the 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./download.html">web-based Customizer</a> to make Bootstrap your own.</p> + </div> + </div> + +<!-- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png"> <h2>Living, coded examples</h2> <p>Bootstrap was designed first and foremost as a way to document not only the code of our components, but the visual and interaction design through live examples.</p> @@ -165,34 +169,37 @@ <h2>Built on LESS</h2> <p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p> </div> - </div><!--/row--> + </div> +--> <hr class="soften"> <h1>Built with Bootstrap.</h1> <p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.</p> - <ul class="thumbnails example-sites"> - <li class="span3"> - <a class="thumbnail" href="http://soundready.fm/" target="_blank"> - <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm"> - </a> - </li> - <li class="span3"> - <a class="thumbnail" href="http://kippt.com/" target="_blank"> - <img src="assets/img/example-sites/kippt.png" alt="Kippt"> - </a> - </li> - <li class="span3"> - <a class="thumbnail" href="http://www.fleetio.com/" target="_blank"> - <img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> - </a> - </li> -<!-- <li class="span2"> - <a class="thumbnail" href="http://www.jshint.com/" target="_blank"> - <img src="assets/img/example-sites/jshint.png" alt="JS Hint"> - </a> - </li> - --> </ul> + <div class="row-fluid"> + <ul class="thumbnails example-sites"> + <li class="span3"> + <a class="thumbnail" href="http://soundready.fm/" target="_blank"> + <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm"> + </a> + </li> + <li class="span3"> + <a class="thumbnail" href="http://kippt.com/" target="_blank"> + <img src="assets/img/example-sites/kippt.png" alt="Kippt"> + </a> + </li> + <li class="span3"> + <a class="thumbnail" href="http://www.fleetio.com/" target="_blank"> + <img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> + </a> + </li> + <li class="span3"> + <a class="thumbnail" href="http://www.jshint.com/" target="_blank"> + <img src="assets/img/example-sites/jshint.png" alt="JS Hint"> + </a> + </li> + </ul> + </div> </div><!-- /.marketing --> diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache index e2a35003da..b6c4b01122 100644 --- a/docs/templates/pages/index.mustache +++ b/docs/templates/pages/index.mustache @@ -4,7 +4,12 @@ <div class="bs-docs-container"> <h1>Bootstrap</h1> <p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p> - <a href="assets/bootstrap.zip" class="btn btn-inverse btn-large">{{_i}}Download Bootstrap <small>(v2.1.0)</small>{{/i}}</a> + <p><a href="assets/bootstrap.zip" class="btn btn-primary btn-large">{{_i}}Download Bootstrap{{/i}}</a></p> + <ul class="jumbo-links"> + <li><a href="#">Customize</a></li> + <li><a href="#">GitHub project</a></li> + <li>Version 2.1.0</li> + </ul> </div> </div> @@ -48,31 +53,30 @@ </div> </header> -<hr class="soften"> - <div class="marketing"> - <h1>{{_i}}Designed for everyone, everywhere.{{/i}}</h1> - <p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p> - <div class="row"> - <div class="span5"> - <img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png"> - <h2>{{_i}}Built for and by nerds{{/i}}</h2> - <p>{{_i}}We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.{{/i}}</p> - - <img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png"> - <h2>{{_i}}Cross-everything{{/i}}</h2> - <p>{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}</p> - <img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png"> - <h2>{{_i}}12-column grid{{/i}}</h2> - <p>{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}</p> + <h1>{{_i}}Introducing Bootstrap.{{/i}}</h1> + <p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p> - <img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png"> - <h2>{{_i}}Responsive design{{/i}}</h2> - <p>{{_i}}Beginning with Bootstrap 2, components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}</p> + <div class="row-fluid"> + <div class="span4"> + <img src="assets/img/bs-docs-twitter-github.png"> + <h2>{{_i}}Built by nerds, for nerds.{{/i}}</h2> + <p>{{_i}}Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.{{/i}}</p> + </div> + <div class="span4"> + <img src="assets/img/bs-docs-responsive-illustrations.png"> + <h2>{{_i}}Designed for everyone.{{/i}}</h2> + <p>{{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href="./scaffolding.html#responsive">responsive CSS</a> as well.{{/i}}</p> </div> - <div class="span5"> - <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png"> + <div class="span4"> + <img src="assets/img/bs-docs-bootstrap-features.png"> + <h2>{{_i}}Packed with features.{{/i}}</h2> + <p>{{_i}}Utilize the 12-column responsive <a href="./scaffolding.html#grid">grid</a>, dozens of components, <a href="./javascript.html">javascript plugins</a>, typography, form controls, and even a <a href="./download.html">web-based Customizer</a> to make Bootstrap your own.{{/i}}</p> + </div> + </div> + +<!-- <img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png"> <h2>{{_i}}Living, coded examples{{/i}}</h2> <p>{{_i}}Bootstrap was designed first and foremost as a way to document not only the code of our components, but the visual and interaction design through live examples.{{/i}}</p> @@ -88,33 +92,36 @@ <h2>{{_i}}Built on LESS{{/i}}</h2> <p>{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}</p> </div> - </div><!--/row--> + </div> +--> <hr class="soften"> <h1>{{_i}}Built with Bootstrap.{{/i}}</h1> <p class="marketing-byline">{{_i}}For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.{{/i}}</p> - <ul class="thumbnails example-sites"> - <li class="span3"> - <a class="thumbnail" href="http://soundready.fm/" target="_blank"> - <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm"> - </a> - </li> - <li class="span3"> - <a class="thumbnail" href="http://kippt.com/" target="_blank"> - <img src="assets/img/example-sites/kippt.png" alt="Kippt"> - </a> - </li> - <li class="span3"> - <a class="thumbnail" href="http://www.fleetio.com/" target="_blank"> - <img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> - </a> - </li> -<!-- <li class="span2"> - <a class="thumbnail" href="http://www.jshint.com/" target="_blank"> - <img src="assets/img/example-sites/jshint.png" alt="JS Hint"> - </a> - </li> - --> </ul> + <div class="row-fluid"> + <ul class="thumbnails example-sites"> + <li class="span3"> + <a class="thumbnail" href="http://soundready.fm/" target="_blank"> + <img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm"> + </a> + </li> + <li class="span3"> + <a class="thumbnail" href="http://kippt.com/" target="_blank"> + <img src="assets/img/example-sites/kippt.png" alt="Kippt"> + </a> + </li> + <li class="span3"> + <a class="thumbnail" href="http://www.fleetio.com/" target="_blank"> + <img src="assets/img/example-sites/fleetio.png" alt="Fleetio"> + </a> + </li> + <li class="span3"> + <a class="thumbnail" href="http://www.jshint.com/" target="_blank"> + <img src="assets/img/example-sites/jshint.png" alt="JS Hint"> + </a> + </li> + </ul> + </div> </div><!-- /.marketing --> |