Brandon Pretelt
Published in

Brandon Pretelt

So what is a CSS framework, anyway?

Well, in simple terms a CSS framework is essentially a library of styles and components built by a team of developers to streamline the development process. One of the bigger frameworks out there, Bootstrap, was created by Twitter in order to help their design and development process.

Okay, now that I know what a framework is now…

So, now that we got the most watered explanation of what a CSS framework is, I’m going to bring up some pros and cons of two of my favorite frameworks out there: Bootstrap and Bulma.

Bootstrap

As mentioned, Bootstrap was created by Twitter to help out their developers with the coding out the design and to keep things consistent. Bootstrap also speeds up development, as well, as there is no need for a separate CSS file.

With Bootstrap, you can quickly create any component you want using different CSS classes.

One such example is this navbar

This navbar was created using the following HTML and CSS:

This is a great example of easy it is to create something like a navbar. There’s also a lot more you can create like cards.

While having pre-built components like this is nice, one of the downsides to Bootstrap is that it has an… interesting syntax to create some things. For example, creating a responsive design using Bootstrap is quite the ride.

The code above was taken straight from their docs and, as you can imagine, this kind of code gets a little out of hand once you get to more complex projects and it becomes less clear what it’s doing.

Something that I don’t necessarily enjoy about Bootstrap is that it requires some JavaScript to get some of their components to work correctly. Even though it’s not necessarily a problem, it does make Bootstrap a little heavier than my other favorite, Bulma, if you opt not to use a CDN.

Bulma

And now, let’s move on to the next framework: Bulma. It was created by Jeremy Thomas. Bulma is a lightweight CSS only framework. No JavaScript at all, which is one of the upsides. That means that, if you need to something custom, you can go ahead and write your own JS rather than rely on someone else’s code.

One of the other biggest pros, for me, on Bulma is that the syntax is a lot easier and cleaner to read.

With Bulma, there’s no need to write code such as

<div class="row">
<div class="cols">
<div class="col-6-sm">...</div>
</div>
</div>

for a responsive design because everything is based on flexbox and the responsiveness is basically built in. All you need is

<div class="columns">
<div class="column">....</div>
</div>

and that’s pretty much it.

One of Bulma’s advantages is that their naming convention is much more readable than Bootstrap’s. Here are a few snippets of code from Bootstrap’s docs to create a flexbox container (used flex for the sake of brevity).

<div class="d-flex p-2">I'm a flexbox container!</div><div class="d-sm-flex p-2">I'm a flexbox container!</div><div class="d-md-flex p-2">I'm a flexbox container!</div>

And a sample from Bulma:

<div class="is-flex p-2">I'm a flexbox container!</div>

While this code snippet seems small, Bootstrap has other classes such as

.col-lg-4 .col-md-4 .col-sm-12

for responsive sites. Couple that with the responsive classes for flexbox, the syntax can become a nightmare. As opposed to Bulma, the syntax is neater. In order to write a responsive flexbox container all you need is the .is-flex class in order to have a flexbox container for small, medium and large screen sizes. One other benefit Bulma has, in terms of responsive design, is the syntax is more human readable than Bootstrap’s. Here is a responsive example from Bulma’s docs:

<div class="columns is-mobile">
<div
class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd"
>
<code>is-three-quarters-mobile</code><br />
<code>is-two-thirds-tablet</code><br />
<code>is-half-desktop</code><br />
<code>is-one-third-widescreen</code><br />
<code>is-one-quarter-fullhd</code>
</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>

All in all, Bulma has a prettier syntax and is much easier to read, even if things get a little unmanageable for bigger projects to due the more human readable syntax compared to the more machine like syntax of Bootstrap.

Conclusion

Bootstrap, and frameworks for that matter, is a great framework to get off the ground running and straight into development, especially if you’re a developer without a design bone in their body. You can quickly mock up designs and have a nice looking web app in no time at all.

— -

Brandon Pretelt is a student in the Digital Media Program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to (Bootstrap and Frameworks) in the (DGM 2780 Course) and representative of the skills learned.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store