diff options
Diffstat (limited to 'docs/content/reboot.md')
| -rw-r--r-- | docs/content/reboot.md | 286 |
1 files changed, 286 insertions, 0 deletions
diff --git a/docs/content/reboot.md b/docs/content/reboot.md new file mode 100644 index 000000000..3d0568846 --- /dev/null +++ b/docs/content/reboot.md @@ -0,0 +1,286 @@ +--- +layout: page +title: Reboot +group: content +--- + +Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that. + +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. + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Approach + +Here are our guidelines and reasons for choosing what to override in Reboot: + +- Update some browser default values to use `rem`s instead of `em`s for scalable component spacing. +- 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 + +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 paragraphs + +All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. + +<div class="bd-example"> +{% markdown %} +# h1 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +## h2 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +### h3 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +#### h4 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +##### h5 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +###### h6 heading +Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. +{% endmarkdown %} +</div> + +## Lists + +All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. + +<div class="bd-example"> +{% markdown %} +* Lorem ipsum dolor sit amet +* Consectetur adipiscing elit +* Integer molestie lorem at massa +* Facilisis in pretium nisl aliquet +* Nulla volutpat aliquam velit + * Phasellus iaculis neque + * Purus sodales ultricies + * Vestibulum laoreet porttitor sem + * Ac tristique libero volutpat at +* Faucibus porta lacus fringilla vel +* Aenean sit amet erat nunc +* Eget porttitor lorem + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa +4. Facilisis in pretium nisl aliquet +5. Nulla volutpat aliquam velit +6. Faucibus porta lacus fringilla vel +7. Aenean sit amet erat nunc +8. Eget porttitor lorem +{% endmarkdown %} +</div> + +For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**. + +<div class="bd-example"> +{% markdown %} +<dl> + <dt>Description lists</dt> + <dd>A description list is perfect for defining terms.</dd> + <dt>Euismod</dt> + <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd> + <dd>Donec id elit non mi porta gravida at eget metus.</dd> + <dt>Malesuada porta</dt> + <dd>Etiam porta sem malesuada magna mollis euismod.</dd> +</dl> +{% endmarkdown %} +</div> + +## Preformatted text + +The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`. + +<div class="bd-example"> +{% markdown %} +<pre> +.element { + margin-bottom: 1rem; +} +</pre> +{% endmarkdown %} +</div> + +## Tables + +Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class](/components/tables/). + +<div class="bd-example"> + <table> + <caption> + This is an example table, and this is its caption to describe the contents. + </caption> + <thead> + <tr> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + </tr> + </thead> + <tbody> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + </tbody> + </table> +</div> + +## Forms + +Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes: + +- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs. +- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts. +- `<label>`s are set to `display: inline-block` to allow `margin` to be applied. +- `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too. +- `<textarea>`s are modified to only be resizeble vertically as horizontal resizing often "breaks" page layout. + +These changes, and more, are demonstrated below. + +<form class="bd-example"> + <fieldset> + <legend>Example legend</legend> + + <p> + <label for="input">Example input</label> + <input type="text" id="input" placeholder="Example input"> + </p> + + <p> + <label for="select">Example select</label> + <select id="select"> + <option value="">Choose...</option> + <optgroup label="Option group 1"> + <option value="">Option 1</option> + <option value="">Option 2</option> + <option value="">Option 3</option> + </optgroup> + <optgroup label="Option group 2"> + <option value="">Option 4</option> + <option value="">Option 5</option> + <option value="">Option 6</option> + </optgroup> + </select> + </p> + + <p> + <label> + <input type="checkbox" value=""> + Check this checkbox + </label> + </p> + + <p> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> + Option one is this and that + </label> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> + Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. + </label> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> + Option three is disabled + </label> + </p> + + <p> + <label for="textarea">Example textarea</label> + <textarea id="textarea" rows="3"></textarea> + </p> + + <p> + <label for="time">Example temporal</label> + <input type="datetime" id="time"> + </p> + + <p> + <label for="output">Example output</label> + <output name="result" id="output">100</output> + </p> + + <p> + <button type="submit">Button submit</button> + <input type="submit" value="Input submit button"> + <input type="button" value="Input button"> + </p> + + <p> + <button type="submit" disabled>Button submit</button> + <input type="submit" value="Input submit button" disabled> + <input type="button" value="Input button" disabled> + </p> + </fieldset> +</form> + +## Misc elements + +### Address + +The `<address>` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added. `<address>`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `<br>`. + +<div class="bd-example"> + <address> + <strong>Twitter, Inc.</strong><br> + 1355 Market St, Suite 900<br> + San Francisco, CA 94103<br> + <abbr title="Phone">P:</abbr> (123) 456-7890 + </address> + + <address> + <strong>Full Name</strong><br> + <a href="mailto:#">[email protected]</a> + </address> +</div> + +### Blockquote + +The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements. + +<div class="bd-example"> + <blockquote> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> + </blockquote> +</div> + +### Inline elements + +The `<abbr>` element receives basic styling to make it stand the amongst paragraph text. + +<div class="bd-example"> + Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. +</div> |