Lesson 2 - Bootstrap - Reboot
In the previous lesson, Introduction to the Bootstrap CSS framework, we clarified why it's a good idea to use a CSS framework and we tried to edit one of many Bootstrap templates. During this online course, we'll describe individual parts of the Bootstrap framework. In the end, we'll achieve an overview of what it can help us with and what styles we can use. You'll find that it truly offers a lot.
Reboot
First things first. In the beginning, we've already mentioned that HTML have some default styles. For historic reasons, these styles are not always very smart. There's also a possibility that they'll look different in different browsers or be ineffective to use. Bootstrap contains Reboot, which is a code declaring default styles. It's build upon the Normalize project which goal is to declare optimal default styles to make webdesign as simple as possible. Sometimes, these settings are called a CSS reset. Reboot modifies the default style of elements without a necessity to add any classes. It does it in the following way:
Box sizing
The box-sizing property is globally set to the
border-box value. Thanks to that, the size of elements is always
calculated as the total size including the border and padding. You probably know
that from the boxmodel. Specifying sizes like this is way more intuitive and it
allows us to use percents, since e.g. width: 50% now really
occupies half of the webpage even if the element has a border or padding. If you
weren't aware of this, working with Bootstrap could surprise you a lot.
Rem units
The <body> font is set to 1rem. The
rem units are preferred as they specify the relative size against
the size of the letter M in the <html> root
element. Bootstrap doesn't modify this size, but it sets all other dimensions
according to it. When the user sets a bigger font due to using a mobile device
or simply because he can't see well, every font using the rem units
will be rescaled too. Margins and other components using the rem
units will be rescaled as well. You can try to set a different font size to the
<html> element and watch how the grid and other Bootstrap
parts rescale. It's a good idea to follow these conventions in your own styles
as well.
Body styles
The default values for font-family, line-height,
text-align, and `background-color. are set for the
<body> element.
Font stack
In the last years, Apple, Microsoft, and Google created nice fonts and they're using them as default on their devices. Why not to use them on web, when they're available? Bootstrap declares the "Native font stack", where these fonts are listed and one of them is always found on any system. The fonts are San Francisco (Apple), Segoe UI (Windows), and Roboto (Google Android). Other systems will use the fallback fonts which are "Helverica Neue", Arial and sans-serif. Emoji fonts like "Apple Color Emoji", "Segoe UI Emoji", and "Segoe UI Symbol" are also supported. This means you can insert color emoji into your texts without linking any special fonts.
Vertical margins
Bootstrap encourages to not set both vertical margins of elements
(margin-top and margin-bottom), since margins are
merged and you never know how big the actual gap between the elements will be.
That's another convention you should maintain, use margin-bottom
only. Bootstrap sets this, for example, for all the heading from
<h1> to <h6> and removes their
margin-top.
The same goes for <p> paragraphs, and
<ul>, <ol>, and <dl>
lists as well. Nested lists don't have any margin at all. Items of
<dd> definition lists have the left margin 0 and
the bottom margin 0.5rem.
Tables
Tables have border-style set to collapse, altered
<caption> rendering and unified text-align.
Forms
<fieldset> elements have no borders nor edges to make them
work just as wrappers, <legend> is styled as a heading,
<labels> are inline blocks so they could have margins. Other
elements have been normalized as well such as <input>,
<select>, <textarea>, and
<button>. If you've ever been fighting to make the size of
the <select> element same in different browsers or on
different operating systems, you'll appreciate Reboot 
All <textarea>
elements are resizable only vertically since resizing them horizontally would
result in leaking from the page layout.
Other elements
Very similar changes have been also made in <address>
elements (the font isn't italic and margin-bottom has been added).
We should separate individual address rows with <br>.
<blockquote> has gained the bottom margin and
<abbr> got underlined and dotted. Maybe you know the HTML5
hidden attribute, which is used to hide elements. Bootstrap adds
!important to its style so it can't be re-written. However, be
aware that this technique is not compatible with hiding and showing elements
using jQuery. We'll be discussing
visibility later in this course. For all mobile control elements,
touch-action: manipulation is set to catch unwanted doubleclicks in
Internet Explorer and Edge.
In the next lesson, Bootstrap - Typography, we'll focus on typography.
David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.