Lesson 2 - Bootstrap - Reboot

HTML and CSS Bootstrap 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.

The Boxmodel in CSS

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.

Default headings in Bootstrap
headings.html

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.

Default lists in Bootstrap
lists.html

Tables

Tables have border-style set to collapse, altered <caption> rendering and unified text-align.

Default tables in Bootstrap
tables.html

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.

Default forms in Bootstrap
forms.html

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.


 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
1 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Thumbnail
All articles in this section
Bootstrap
Thumbnail
Next article
Bootstrap - Typography
Activities (2)

 

 

Comments

To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

No one has commented yet - be the first!