Designing for Bootstrap 3 and 4

Bootstrap is certainly the most popular frontend framework currently used for designing responsive websites. This excellent tool from Twitter developers provides a package of such stylized elements as navbars, buttons, forms, tables, bars and lists, as well as prebuilt JS components, including carousels, tabs, accordions, lightboxes and tooltips. Thanks to Bootstrap, every programmer can create a decent looking application by assigning classes to HTML elements, and every designer can add more life to their websites using JS components. The community obtained consistent guidelines regarding the writing of the code and the naming of classes.

The basis of BS designing is a 12-column grid, normally closed in a 1140px wide container, with 30px gutters between columns. The grid system is the same in both Bootstrap 3 and 4. What has changed is the way they are operated and their capabilities.

So far the grid allowed us to divide the page into columns and to adjust their width when changing the size of the browser window. You had to put a bit more effort, or even use jQuery, to swap columns' places or to adjust their height. BS4 cuts off the support for older browsers by basing the grid on flexes (support for IE10+ and iOS7+). You can now juggle the layout using the “order” attribute, adjust columns' height to the highest level, and adjust their position to any edge of the container. All that without using JS. To make things easier, BS programmers have added convenient classes that may be used to adjust the columns.

If you don't know flex's basics you can master them playing a tutorial game: https://flexboxfroggy.com.

New possibilities allow you to create more interesting layouts and increase your control over its elements. It's also easier to set up a page on smaller devices.
The disadvantage is a limited support, mainly for older versions of Internet Explorer and Safari browsers. When creating application for an institution which uses older system (e.g. Windows XP), I'd suggest basing it on much safer and still cool Bootstrap 3.

Is Bootstrap essential?

All over the web you can find opinions that Bootstrap is overloaded, too big (the size of the full package of bootstrap.css + bootstrap.js + popper.js + jquery.js is 400kb), and contains a lot of elements that we probably won't use. So Bootstrap isn't really essential. But, one day, when writing your own comprehensive package of components, it might turn out that you're doing something that already exists, and that is not as versatile as Twitter programmers' product.

Bootstrap is not the lightest framework, but nowadays we don't need to worry about 400kb of transfer, at least until our website reaches tens of thousands of visits per month. After all, it's just a size of one big picture. Also, if you put a little effort into it, you can switch off the unnecessary components.

I appreciate Bootstrap for its versatility and terminology. It's extremely useful because, when working in a group, I can open someone else's project and easily find myself in it. Over time, we start to remember names of the classes and use them intuitively.

Still, you should always remember that Bootstrap is a tool that supports specific solutions and may not be suitable for every kind of layout. Sometimes using Bootstrap is not the best idea.

Bootstrap in this case? What for?

SCSS

Many designers notice Bootstrap's limitations when it comes to designing process. They slavishly cling to everything that BS offers in its compiled version. I fell a victim to it myself. My first several websites had the same grid and a similar layout. The change came along with SCSS and compiling BS files from SCSS to CSS on my own computer. For the inexperienced it might be quite troublesome, especially at the beginning, but it's definitely worth going through. What we need is a node.js environment and one application of your choice: grunt, gulp or webpack. For lazybones, I'd recommend https://prepros.io, which pretty much does the same thing and additionally provides you with graphic environment. However, it's not as customizable as it could be and you have to pay for it.

Compiling BS and your own styles with SCSS allows you to do much more than you could do in plain CSS:

— First of all, BS has a separate file with variables. You can manage almost all visual aspects of BS (colors, fonts, grid) from a single location. In BS4 there are more than 800 variable lines.

— You can transfer the above mentioned variables to your own styles and use them your own classes.

— If necessary, you can overwrite BS variables, leaving BS itself intact. It can be done both globally and locally (within a specific section of the website).

— You can disable the BS components that you won't be using in the project, this way saving some file size.

— From this point BS allows you to create additional: container width, width of breakpoints for RWD, template colors, spacers etc.

Would you like to create a page with 1600px container width, 10px gutters and breakpoint at every 200px? You will do it here. The proper grid of guidelines for Photoshop designing is available here: http://gridcalculator.dk/#/1070/12/30/15.

Good practice while designing in BS:

— Draw a project based on the grid and your developer will like you.

— Plan in advance how the elements of the website will behave in lower resolutions. When designing a desktop view, you should know precisely what it will look like on tablet and smartphone.

— While implementing, use BS's built-in classes and modify them as needed.

— If you're implementing a simple project, remove everything that is not essential (e.g. unused components or styles). This way you can save some loading time of the page.

— Modifying BS in SCSS using variables and compiling it to CSS significantly speeds up the work, reduces the size of the project (fewer overwrites) and clarifies the code.

— Minify the object code (in case of BS4 it allows to reduce the size of the file from 170kb to 120kb).

— Don't be the framework's slave. Not everything has to be set exactly as Bootstrap tells you. Intentionally braking away from the imposed scheme certainly adds value to the project and is definitely worth doing. Bootstrap is not a design standard.

Basic Bootstrap layout after stylizing via SCSS.

Which Bootstrap to choose? BS3 vs BS4 — important differences:

Since I began working in BS4, I have been making the choice of Bootstrap version depending solely on customer's requirements for the support for older browsers. If the project is to support IE9, I design it in a way that allows me to omit unsupported elements. In this case, a lack of support for flexes excludes the use of BS4.

In other cases, BS4 is in all respects a better choice.

Shown below is a table comparing the main differences between BS versions:

The BS4 improvements also cover rewriting the majority of the code, including changes in the components, such as typography, tables, forms, navbars, dropdowns, paginations, carousels and panels (changed into cards).

author: Marcin Front-end developer/Web designer

Latest posts

on blog