The CSS Framework Rabbit Hole

10/31/17

Happy Halloween!

I went down the CSS Framework rabbit hole tonight. I went on a hunt for a Bootstrap alternative that is 1) lightweight, 2) uses “em” in its media queries, 3) has a decent color palette selection, 4)  syntax that is intuitive and easy to remember, and 5) has control over the grid gutters. I couldn’t find one. I looked at about 25 different frameworks. Did you know there are over 100 of them?

Many of the frameworks had poor documentation and some had good documentation but no examples- and some were only a GitHub page with a couple lines in the description. If I’m searching for a framework to try out, I don’t want to clone a bunch of repos and try out each one individually. I want pretty pictures and code samples!

Foundation came close. It’s a pretty solid framework. It has lots of features and it uses “em” in its media queries. It only has the basic color options though, like the same ones in Bootstrap. I’m not a big fan of the form design either.

I think I landed on a possible plan. I am still mulling it over though. At the moment, I’m leaning towards Yahoo’s Pure CSS Framework. I haven’t actually played with it yet, but their grid system looks quite nice. The framework is minimal, yet still has some good features. However, to add the grid it takes an additional CSS file. Not a big deal, but it would be nice to get it all in one file for convenience. So, I’m thinking I could go with Pure’s grid system and then just grab the modules from Bootstrap that I want. That’s one option, out of many.

Not that Bootstrap is bad. It’s great actually, and I basically went full circle during my search today. Meaning, after I looked at all of the different frameworks I went back to Bootstrap’s webpage and compared my findings. I think it’s the most popular CSS Framework for a reason. It really is one of the best most complete and easiest to learn. Best is too subjective, but I’d still say the top 3 frameworks are Bootstrap, Materialize, and Foundation. I have a tendency to rebel against the most trendy things in life, such as Bootstrap, which is the reason I went off in search of another framework I think.

I have the same issues with Materialize as I do Bootstrap. I don’t ever use all of their features, so the download ends up being unnecessarily bloated. On the other hand, having easy access to all their features is nice. Also, the media queries use px instead of em. Otherwise, they’re fantastic.

It’s a tough decision. Do I go with light weight and minimal features with a modern grid system that I like, or more features than I need and an outdated grid system? Hhmmmm.

That question actually lead me down another path tonight. I wanted to form my own opinion on the CSS file size controversy. Right now, the default Bootstrap 4 minified CSS file is 125KB. There is a lot of talk online about how that is a ‘monolithic’ file. That’s a quote actually. I actually read that somewhere in my research tonight. But it’s not though, even for a cellphone. Consider this, back in 2003 3G was running at about 200 kilobits\sec at peak. That is about 25KB\sec. It would take about five seconds for that Bootstrap file to download. Now, yeah, that feels like forever when you’re staring at your screen, but it’s not 2003. Ok, so let’s fast forward to 2012, when PCWorld ran a test. They found that 3G was ranging from 590 to 3840 kilobits\sec depending on the carrier. At 590kb it would take about two seconds for that Bootstrap file to download. Additionally, that test looked at 4G as well. In 2012, 4G speed was ranging between 2810 – 9120kb, and at the lowest 4G speed the file would download in a little under half of a second. Should I still be concerned about using a framework that fits in a 125KB file, in late 2017? That’s not even mentioning that a popular system like Bootstrap is likely already on the device. So I don’t know; I’m gonna have to analyze it a bit more and sleep on it. ¯\_(ツ)_/¯

But with all that said, in the interest of becoming a better developer and broadening my knowledge, I am going to dig into all three of them, and Pure, and learn how to work with their core functionalities. In the end I am predicting I’ll stick with what I know, Bootstrap, or go with Foundation.

I’ll end with some reading material and a cool CSS compiler I found:

 

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s