diff options
| author | Mark Otto <[email protected]> | 2015-04-16 19:33:42 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-04-16 19:33:42 -0700 |
| commit | b1f48d3098046584b7a6190d195aa77e4b17c01b (patch) | |
| tree | 4699924713639881a97f619dc46677652d3a40f9 /docs/components | |
| parent | 0ab1576ae227663d9e97040a486e1ca2818bab1e (diff) | |
| download | bootstrap-b1f48d3098046584b7a6190d195aa77e4b17c01b.tar.xz bootstrap-b1f48d3098046584b7a6190d195aa77e4b17c01b.zip | |
more reboot updates
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/reboot.md | 26 |
1 files changed, 19 insertions, 7 deletions
diff --git a/docs/components/reboot.md b/docs/components/reboot.md index 4dfbd94a7..c6d0c6c9f 100644 --- a/docs/components/reboot.md +++ b/docs/components/reboot.md @@ -3,15 +3,27 @@ layout: page title: Reboot --- -Several HTML elements are "rebooted" by Bootstrap for a more logical starting point and easier customization. This reboot builds upon Normalize, and as such, only uses element selectors to add our own opinionated resets. +All of Bootstrap's element-specific CSS changes are part of what we call the Reboot, a single CSS file of simple overrides. + +Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more. ## Approach -Here are our guidelines for choosing what to override in our reboot: +Here are our guidelines and reasons for choosing what to override in Reboot: + +- Use `rem`s and `em`s for units, nothing else. +- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model. +- For easier scaling across device sizes, block elements should use `rem`s for `margin`s. +- Keep declarations of `font`-related properties to a minimal, using `inherit` whenever possible. + +## Page defaults -- Only use `rem`s and `em`s as the global units whenever possible. -- Avoid `margin-top` whenever possible. Vertical margins often collapse, sometimes yielding unexpected results. Moreover, a single direction of `margin` is an easier and quicker mental model to adopt. +The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically: +- The `box-sizing` is globally set on every element—including `*:before` and `*after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border. +- A base `font-size: 16px` is declared on the `<html>` and `font-size: 1rem` on the `<body>` for easy responsive type-scaling via media queryies. +- The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. +- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`. ## Headings and paragaphs @@ -131,11 +143,11 @@ The `<pre>` element is reset to remove its `margin-top` and use `rem` units for <div class="bd-example"> {% markdown %} -``` -pre { +<pre> +.element { margin-bottom: 1rem; } -``` +</pre> {% endmarkdown %} </div> |