An Ode To Flexbox

A few months ago I made the courageous decision to not use Twitter Bootstrap anymore, and instead learn some CSS. I do not regret this decision even a little. Not too long ago I was peeking under the skirt of someone’s bootstrap website in Chrome Dev Tools and noticed something really odd: the custom bootstrap grid classes were just flexbox!

Okay, this is probably not news to most people, but to me it was kind of a big deal. I had moved away from bootstrap to learn flexbox and css grid for positioning, and then find out that what I just learned is what I had been using before. The biggest difference is that flexbox has native browser support, and bootstrap requires adding some pretty hefty libraries. Granted, you can get by with just bootstrap.css but if you wander into some of the other bootstrap classes you could find yourself in need of bootstrap.js, which requires adding jQuery. I had found myself adding in 3 libraries just to position content on the page, and that seemed just a little bit silly.

About That Flexbox

It turns out, flexbox is pretty simple to learn. There are a number of great resources out there, from my favorite site css-tricks.com to flexbox froggies and flexbox zombies. These last two are pretty entertaining and give you some good hands-on experience with flexbox.

The basic premise of flexbox seems to be creating either rows or columns as parent containers with:

.myRow {
  display: flex;
  flex-direction: row;
}

.myColumn {
  display: flex;
  flex-direction: column;
}

It’s pretty intuitive so far. We have to specify that the container is using flexbox, then we designate which direction to add the content. Worthy of note here is that the flex-direction: row is the default value and doesn’t have to be specified.

I’m not going to iterate through each available property, and I don’t intend this to be a tutorial. The remaining properties are all about how the content is displayed in the flex containers. Some handle spacing, some alignment, and there are plenty of tutorials (including those mentioned previously) which will give you a great idea of how flexbox works. I do, however, want beginners out there to know there are alternatives to Bootstrap.

But What’s Wrong With Bootstrap?

The answer to this, of course, is that there’s nothing wrong with Bootstrap. It is a well developed, well documented resource and I’m sure there are situations where I would be happy to use it. My initial statement is that it’s a bit unnecessary to import 3 huge libraries just to handle a little positioning. Bootstrap does make some tasks much easier, such as responsive design, but for me that’s not enough to justify adding it to a project. I am very fond of media queries and since I’ve discovered the wonder that is SCSS using those media queries is a piece of cake.

And Finally …

Since we’re on the topic of importing huge libraries for small tasks, I have to mention jQuery. Yes, it’s useful. Yes, it simplifies some very common tasks. Take for example, selecting items from the DOM:

/* selecting class "myClass" and changing the html to 
   "<em>Hello World</em>" and the text color to red in jQuery */

$(".myClass").html("Hello World)
             .css("color", "red");

/* doing the same in Vanilla JavaScript */

const myElement = document.querySelector(".myClass");

myElement.innerHTML = "<em>Hello World</em>";
myElement.style = "color: red";

The syntax for jQuery is much cleaner, being able to chain methods off of a single selector, and I believe at runtime (at least theoretically) the jQuery will execute quicker since it’s only searching the DOM once for a single selector (I have not tested this).

It’s not enough to get me to add jQuery to my projects. Just like the gains from Bootstrap are not enough to get me to use it either. There are situations where they both would have their uses, but for me it’s not in anything I’m currently working on. Also, there’s always the fact that React.JS is very jealous about controlling the DOM and doesn’t like to share. jQuery is all about DOM manipulation so there could be some turf wars.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s