HTML and CSS Basics, part 16: Frontend CSS frameworks
An overview of Bootstrap, Bulma, and MDL
is a developer, technical writer, and a (former) designer.
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:
- modal windows
- nicely styled buttons
- hideable content (accordions)
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-0sets the margin-bottom to 0,
pt-5makes a large padding at the top of an element)
- width classes (
w-25sets the width of an element to 25 percent)
- text classes (```text-success`` colors the text green)
- background classes (
bg-dangercolors the background a light shade of red)
- display classes (for example,
d-flexis the class to set
display: flexon an element)
- classes that toggle visibility
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:
smfrom 576 to 767 pixels
mdfrom 768 to 991 pixels
lgfrom 992 to 1199 pixels, and
xlfrom 1200 pixels and wider
Bootstrap also comes with CSS for typography, images, tables and figures.
One of its strengths is also its components, namely:
- button group,
- input group,
- list group,
- media object,
- toasts, and
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 comes with fewer components than Bootstrap:
It seems like it’s made to do at least some things better than its main rival, Bootstrap.
According to Wappalyzer, there’s currently 44000 websites using Material Design Lite.
The framework’s official website can be found at getmdl.io.
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.
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.