From b1f48d3098046584b7a6190d195aa77e4b17c01b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 16 Apr 2015 19:33:42 -0700 Subject: more reboot updates --- docs/components/reboot.md | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) (limited to 'docs/components') 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 `` 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 `` and `` 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 `` and `font-size: 1rem` on the `` for easy responsive type-scaling via media queryies. +- The `` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies. +- For safety, the `` has a declared `background-color`, defaulting to `#fff`. ## Headings and paragaphs @@ -131,11 +143,11 @@ The `

` element is reset to remove its `margin-top` and use `rem` units for
 
 
 {% markdown %}
-```
-pre {
++.element {
   margin-bottom: 1rem;
 }
-```
+
 {% endmarkdown %}
 
 
-- 
cgit v1.2.3