From 00b7dff3595d340be61894a0674800f8ed02b4ab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 10 Sep 2011 21:05:23 -0700 Subject: overhaul docs CSS since it was scalable, converted docs mastheads and footers to classes and HTML5 elements, add masthead to js docs page but make it slate so it looks cool and stands out --- docs/assets/css/docs.css | 168 ++++++++++++++++++++++++++++------------------- docs/index.html | 37 ++++++----- docs/javascript.html | 17 ++++- 3 files changed, 136 insertions(+), 86 deletions(-) (limited to 'docs') diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 187fc7984..896557f27 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -4,6 +4,7 @@ Bootstrap's documentation styles Special styles for presenting Bootstrap's documentation and examples */ + /* Body and structure -------------------------------------------------- */ body { @@ -16,56 +17,101 @@ section { section > .row { margin-bottom: 10px; } -#masthead, #footer { - background-color: #049cd9; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); - background-image: -webkit-linear-gradient(#004D9F, #049cd9); - background-image: -moz-linear-gradient(#004D9F, #049cd9); - background-image: -o-linear-gradient(top, #004D9F, #049cd9); - background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */ + + +/* Jumbotrons +-------------------------------------------------- */ +.jumbotron { + padding-top: 40px; } -#masthead div.inner, #footer div.inner { +.jumbotron .inner { background: transparent url(../img/grid-18px.png) top center; padding: 45px 0; - -webkit-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3); - -moz-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3); - box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3); -} -#masthead h1, -#footer h1, -#masthead p, -#footer p { - color: #fff; - text-shadow: 0 1px 1px rgba(0,0,0,.3); + -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); + -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); + box-shadow: inset 0 10px 30px rgba(0,0,0,.3); } -#masthead p a, -#footer p a { +.jumbotron h1, +.jumbotron p { + margin-bottom: 9px; color: #fff; - font-weight: bold; -} -#masthead { - padding-top: 40px; -} -#masthead h1, -#masthead p { text-align: center; - margin-bottom: 9px; + text-shadow: 0 1px 1px rgba(0,0,0,.3); } -#masthead h1 { +.jumbotron h1 { font-size: 54px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.5); } -#masthead p { +.jumbotron p { font-weight: 300; } -#masthead p.lead { +.jumbotron .lead { font-size: 20px; line-height: 27px; } +.jumbotron p a { + color: #fff; + font-weight: bold; +} + +/* Specific jumbotrons +------------------------- */ +/* main docs page */ +.masthead { + background-color: #049cd9; + background-repeat: no-repeat; + background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); + background-image: -webkit-linear-gradient(#004D9F, #049cd9); + background-image: -moz-linear-gradient(#004D9F, #049cd9); + background-image: -o-linear-gradient(top, #004D9F, #049cd9); + background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */ +} +/* supporting docs pages */ +.subhead { + background-color: #767d80; + background-repeat: no-repeat; + background-image: -webkit-gradient(linear, left top, left bottom, from(#565d60), to(#767d80)); + background-image: -webkit-linear-gradient(#565d60, #767d80); + background-image: -moz-linear-gradient(#565d60, #767d80); + background-image: -o-linear-gradient(top, #565d60, #767d80); + background-image: -khtml-gradient(linear, left top, left bottom, from(#565d60), to(#767d80)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565d60', endColorstr='#767d80', GradientType=0); /* IE8 and down */ +} +.subhead .inner { + padding: 36px 0 27px; +} +.subhead h1, +.subhead p { + text-align: left; +} +.subhead h1 { + font-size: 40px; +} +.subhead p a { + font-weight: normal; +} + + +/* Footer +-------------------------------------------------- */ +.footer { + background-color: #eee; + padding: 30px 0; + text-shadow: 0 1px 0 #fff; + border-top: 1px solid #e5e5e5; + -webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); + -moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); + box-shadow: inset 0 5px 15px rgba(0,0,0,.025); +} +.footer p { + color: #555; +} + +/* Quickstart section for getting le code +-------------------------------------------------- */ .quickstart { background-color: #f5f5f5; background-repeat: repeat-x; @@ -127,16 +173,7 @@ section > .row { white-space: nowrap; overflow: hidden; } -#footer { - margin-top: 80px; -} -#footer p { - margin-bottom: 0; - color: rgba(255,255,255,.8) -} -#footer p.right { - float: right; -} + /* Special grid styles -------------------------------------------------- */ @@ -162,6 +199,8 @@ section > .row { margin-top: 0; margin-bottom: 0; } + + /* Render mini layout previews -------------------------------------------------- */ .diagram, @@ -208,18 +247,20 @@ section > .row { width: 300px; margin-left: 10px; } + + /* Topbar special styles -------------------------------------------------- */ -div.topbar-wrapper { +.topbar-wrapper { position: relative; height: 40px; margin: 5px 0 15px; } -div.topbar-wrapper div.topbar { +.topbar-wrapper .topbar { position: absolute; margin: 0 -20px; } -div.topbar-wrapper div.topbar .topbar-inner { +.topbar-wrapper .topbar .topbar-inner { padding-left: 20px; padding-right: 20px; -webkit-border-radius: 4px; @@ -227,61 +268,50 @@ div.topbar-wrapper div.topbar .topbar-inner { border-radius: 4px; } -/* Topbar special styles for js --------------------------------------------------- */ -#bootstrap-js div.topbar-wrapper { - position: relative; - height: 40px; - margin: 5px 0 15px; - z-index: 1; -} - -#bootstrap-js div.topbar-wrapper div.topbar { +/* Topbar in js docs +------------------------- */ +#bootstrap-js .topbar-wrapper .topbar { position: absolute; margin: 0 -20px; } - -#bootstrap-js div.topbar-wrapper div.topbar .fill { +#bootstrap-js .topbar-wrapper .topbar .topbar-inner { padding-left: 20px; padding-right: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } - -#bootstrap-js div.topbar-wrapper .container { +#bootstrap-js .topbar-wrapper .container { width: auto; } + /* Popover docs -------------------------------------------------- */ -div.popover-well { +.popover-well { min-height: 160px; } - -div.popover-well div.popover { +.popover-well .popover { display: block; } - -div.popover-well div.popover-wrapper { +.popover-well .popover-wrapper { width: 50%; height: 160px; float: left; margin-left: 55px; position: relative; } - -div.popover-well div.popover-menu-wrapper { +.popover-well .popover-menu-wrapper { height: 80px; } - img.large-bird { margin: 5px 0 0 310px; opacity: .1; } + /* Pretty Print -------------------------------------------------- */ -PRE.prettyprint { +pre.prettyprint { overflow: hidden; } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index ebac6f71c..0f233d3d3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -61,7 +61,7 @@ -
+

Bootstrap, from Twitter

@@ -72,7 +72,7 @@

Nerd alert: Bootstrap is built with Less and was designed to work out of the gate with modern browsers in mind.

-
+ @@ -1516,13 +1516,14 @@ Lorem ipsum dolar sit amet illo error ipsum verita
+

Getting started

Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!

+
+

Skip to Bootstrap plugins »

-

Getting started

-

We've set out to make your interactive work with Bootstrap even more simple, offering several lightweight plugins for things like modals, tooltips, and other dynamic components. These plugins have been coded up to work with either jQuery or Ender, but we encourage you to extend and modify them to fit your development needs!

-

Do I need javascript?

-

The short answer is no... of course not! However, for those who need it, we've provided the plugins below to help you understand how to integrate bootstrap with javascript and to give you a quick lightweight option for dropping something in and getting the basic functionality right away! For more information on these plugins and to see demos of them in action, please refer to our plugin documentation page.

+

What's included

+

Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

@@ -1557,6 +1558,10 @@ Lorem ipsum dolar sit amet illo error ipsum verita
+

Is javascript necessary?

+

Nope! Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.

+

However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.

+

For more information and to see some live demos, please refer to our plugin documentation page.

@@ -1709,19 +1714,19 @@ Lorem ipsum dolar sit amet illo error ipsum verita + + - + +
+
+
+

Javascript for Bootstrap

+

+ Bring Bootstrap's components to life with new, custom plugins that work with jQuery and Ender. +

+

← Back to Bootstrap home

+
+
+
+