rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

more reboot updates

Browse Source
This commit is contained in:
Mark Otto 2015-04-16 19:33:42 -07:00
parent 0ab1576ae2
commit b1f48d3098
4 changed files with 55 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/docs.min.css.map
View File

File diff suppressed because one or more lines are too long

68
docs/assets/scss/_page-header.scss
View File

@ -2,44 +2,44 @@
// Page headers
//
.bd-header {
padding-top: 2rem;
padding-bottom: 2rem;
margin-bottom: 2rem;
text-align: center;
background-color: $bd-purple;
// .bd-header {
// padding-top: 2rem;
// padding-bottom: 2rem;
// margin-bottom: 2rem;
// text-align: center;
// background-color: $bd-purple;
.container {
position: relative;
}
// .container {
// position: relative;
// }
h1 {
margin-top: 0;
color: #fff;
}
// h1 {
// margin-top: 0;
// color: #fff;
// }
p {
margin-bottom: 0;
font-weight: 300;
color: rgba(255,255,255,.65);
}
// p {
// margin-bottom: 0;
// font-weight: 300;
// color: rgba(255,255,255,.65);
// }
@media (min-width: 768px) {
text-align: left;
// @media (min-width: 768px) {
// text-align: left;
h1 {
font-size: 4rem;
line-height: 1;
}
}
// h1 {
// font-size: 4rem;
// line-height: 1;
// }
// }
@media (min-width: 992px) {
padding-top: 4rem;
padding-bottom: 4rem;
// @media (min-width: 992px) {
// padding-top: 4rem;
// padding-bottom: 4rem;
h1,
p {
margin-right: 380px;
}
}
}
// h1,
// p {
// margin-right: 380px;
// }
// }
// }

26
docs/components/reboot.md
View File

@ -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:
- 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.
- 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
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>