From cdb0f8229eb6b5aa9abd7e58cd52a593c485dcd1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Jul 2014 08:34:56 -0700 Subject: [PATCH] move scaffolding stuff back to layout once more, split off the type docs to typography section --- docs/components/scaffolding.md | 47 ---------------------------------- docs/components/typography.md | 11 ++++++++ docs/layout/scaffolding.md | 37 ++++++++++++++++++++++++++ 3 files changed, 48 insertions(+), 47 deletions(-) delete mode 100644 docs/components/scaffolding.md create mode 100644 docs/layout/scaffolding.md diff --git a/docs/components/scaffolding.md b/docs/components/scaffolding.md deleted file mode 100644 index 84a22e618f..0000000000 --- a/docs/components/scaffolding.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: page -title: Scaffolding ---- - -Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. - -### HTML5 doctype - -Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. - -{% highlight html %} - - - ... - -{% endhighlight %} - -### Mobile first - -With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, **Bootstrap is mobile first**. Mobile first styles can be found throughout the entire library instead of in separate files. - -To ensure proper rendering and touch zooming, **add the viewport meta tag** to your ``. - -{% highlight html %} - -{% endhighlight %} - -You can disable zooming capabilities on mobile devices by adding `user-scalable=no` to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution! - -{% highlight html %} - -{% endhighlight %} - -### Typography and links - -Bootstrap sets basic global display, typography, and link styles. Specifically, we: - -- Set `background-color: #fff;` on the `` -- Use the `@font-family-base`, `@font-size-base`, and `@line-height-base` attributes as our typographic base -- Set the global link color via `@link-color` and apply link underlines only on `:hover` - -These styles can be found within `scaffolding.less`. - -### Normalize - -For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. diff --git a/docs/components/typography.md b/docs/components/typography.md index 2fb40e38da..d56d8757dc 100644 --- a/docs/components/typography.md +++ b/docs/components/typography.md @@ -5,6 +5,17 @@ title: Typography Bootstrap includes simple and easily customized typography across the project. In addition to the standard headings, body text, and lists, utility classes are also included. +## Global settings + +Bootstrap sets basic global display, typography, and link styles. Specifically, we: + +- Set `background-color: #fff;` on the `` +- Use the `@font-family-base`, `@font-size-base`, and `@line-height-base` attributes as our typographic base +- Set the global link color via `@link-color` and apply link underlines only on `:hover` + +These styles can be found within `scaffolding.less`. + + ## Headings All HTML headings, `

` through `

`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. diff --git a/docs/layout/scaffolding.md b/docs/layout/scaffolding.md new file mode 100644 index 0000000000..82a17627f4 --- /dev/null +++ b/docs/layout/scaffolding.md @@ -0,0 +1,37 @@ +--- +layout: page +title: Scaffolding +--- + +The scaffolding of Bootstrap refers to our general approach to building the project. It outlines the basic document requirements and project dependencies. + +Bootstrap's general approach to writing HTML, CSS, and JavaScript, as well as our core settings, is referred to as scaffolding. This includes required responsive and cross browser enhancements, dependencies, and more. + +### HTML5 doctype + +Bootstrap makes use of certain HTML elements and CSS properties that **require** the use of the HTML5 doctype. Include it at the beginning of all your projects. + +{% highlight html %} + + + ... + +{% endhighlight %} + +### Mobile first + +Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. + +To ensure proper rendering and touch zooming, **add the viewport meta tag** to your ``. + +{% highlight html %} + +{% endhighlight %} + +### Normalize + +For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. + +### jQuery plugins + +All our JavaScript plugins are built on top of jQuery.