HTML and CSS Basics, part 16: Frontend CSS frameworks

This is the 16th post in this series of articles.

So far in this article series, we’ve slowly built up our knowledge by learning about:

• The basics of how HTML and CSS work together to build layouts
• The way that these layouts can be made responsive with the help of media queries
• The concept of CSS column grid - the traditional approach to streamlining web layouts
• How to build a responsive CSS column grid

Now we are equipped with enough knowledge to be able to build web layouts mostly on our own (with some occasional googling here and there).

This is the way that most web developers used to develop their sites.

However, as they got better at their craft, they started noticing that there were certain sections in the websites they built that kept on appearing again and again.

For example, each website needed to have navigation, and the usual place for the main navigation on most websites turned out to be the horizontal bar at the very top of the page.

Similar to the navigation, other sections on different web pages appeared again and again:

• alerts
• carousels
• modal windows
• nicely styled buttons
• hideable content (accordions)

Some of these developers realized that they’d be able to build their website projects faster if they had some pre-built HTML and CSS code (and sometimes, this code even involved some JavaScript).

This is, more or less, how front-end CSS frameworks were born.

Benefits of CSS frameworks

A CSS framework is a number of pre-developed code snippets that gives its users a number of pre-defined components, such as a navigation bar, a dropdown button, or a number of HTML form inputs, all styled in such a way that they fit together into a cohesive whole.

Some of the benefits of using a CSS framework include:

• Not having to write everything from scratch each time a new project is started
• If you know a popular framework, you’ll have an easy time understanding other people’s code (if they used that framework) - this is great for teams
• Faster development times and increased productivity
• Code consistency
• With popular frameworks, you’re sure to find numerous tutorials on dealing with difficult-to-solve issues

Disadvantages of CSS frameworks

Some of the disadvantages of CSS frameworks include:

• Lots of redundant code (code bloat)
• Slower download times
• Hard to produce unique designs
• Learning curve

If a layout needs to be really unique, sometimes it happens that you, as a developer, need to “fight with the framework” by overriding framework’s styles with your own.

Bootstrap, Bulma, and MDL

There are many CSS frameworks out there.

In this article, we’ll cover a few popular CSS frameworks: Bootstrap, Bulma, and MDL.

Bootstrap front-end framework

The official home of the Bootstrap framework is getbootstrap.com.

Bootstrap is a mature front-end framework, currently at version 4.3.1. It was initially an internal project at Twitter, where it was known as Twitter Blueprint.

It got renamed to Bootstrap and open-sourced on August 11, 2011.

Bootstrap is a full-fletched CSS framework.

It comes with its own CSS reset: the CSS reboot stylesheet.

It has lots of utility classes, namely:

• margin and padding classes (for example, mb-0 sets the margin-bottom to 0, pt-5 makes a large padding at the top of an element)
• width classes (w-25 sets the width of an element to 25 percent)
• text classes (```text-success`` colors the text green)
• background classes (bg-danger colors the background a light shade of red)
• display classes (for example, d-flex is the class to set display: flex on an element)
• classes that toggle visibility
• etc.

It also has a column grid, similar to the one we’ve built in the previous article in this series.

The column grid consists of the default xs breakpoint, followed by:

• sm from 576 to 767 pixels
• md from 768 to 991 pixels
• lg from 992 to 1199 pixels, and
• xl from 1200 pixels and wider

Bootstrap also comes with CSS for typography, images, tables and figures.

One of its strengths is also its components, namely:

• alerts,
• badge,
• breadcrumb,
• buttons,
• button group,
• card,
• carousel,
• collapse,
• dropdowns,
• forms,
• input group,
• jumbotron,
• list group,
• media object,
• modal,
• navs,
• navbar,
• pagination,
• popovers,
• progress,
• scrollspy,
• spinners,
• toasts, and
• tooltips

One perceived downside of Bootstrap is that it relies on jQuery for its JavaScript functionality.

However, since there are so many legacy projects that use jQuery even to this day, this shouldn’t be a problem.

Also, because of its popularity, Bootstrap already got ported to VDOM-specific implementations, such as the one we wrote about here on codingexercises extensively, and that is ngx-bootstrap, an Angular port of Bootstrap.

Another important bonus point for Bootstrap is that many companies use it, so investing time in learning this framework could land you your first job.

Bulma CSS framework

Bulma markets itself as a free, open source CSS framework based on Flexbox.

It seems that Bulma is a lot less popular than Bootstrap, but one of its advantages is that it is written without JavaScript at all. It’s a pure CSS framework - and it’s worth having a look at.

It comes with fewer components than Bootstrap:

• breadcrumb,
• card,
• dropdown,
• menu,
• message,
• modal,
• navbar,
• pagination,
• panel,
• tabs

It seems like it’s made to do at least some things better than its main rival, Bootstrap.

MDL framework

According to Wappalyzer, there’s currently 44000 websites using Material Design Lite.

The framework’s official website can be found at getmdl.io.

Material Design Lite doesn’t use any JavaScript frameworks - but it does use JavaScript.

This can be a good or a bad thing, depending on what you’re looking for out of your front-end framework.

It follows Google’s Material Design.

It has a nice section of template examples that showcases a few interesting layouts.

There is also a section with components, and an interesting customizer, as seen in the following screenshot:

That’s it for this introductory article on some of the more popular front-end frameworks.

In the next article in this series, we’ll be covering SCSS, a superset of CSS.