I can write flexbox or maybe write tons of framework specific styles in my html?

I’ve been researching various different CSS frameworks, from Bootstrap and Foundation to GridLess and Initializr. What I’ve found is that No, you probably don’t need one, but you might want one.

So, some of the above mentioned frameworks don’t contain any styles at all, notably Initializer which is just a HTML5 template generator to get you off the ground. I should list my criteria on which I based my decision.

Should contain no styles or if styles are present they should be minimal and easily overridable. Responsive out of the box. Well documented. Significant industry adoption.

That’s it.

I should specify, that my needs may differ from yours. You may want heavy styles, and if you do, great! That’s one of the great benefits to these frameworks. However, I’m specifically looking for a framework that works well for an enterprise team with a specific UX team, and well defined wire-frames and designs.

I looked at many frameworks, and I won’t list the differences between the them here but I will list what I analyzed.

Foundation Bootstrap Bulma Milligram Pure SemanticUI uiKit tailwindcss gridless initializr simplegrid postCSS

That was a lot.

Those were quite a few frameworks*

Bulma, is a newer framework that seems to have a good following and is in my opinion the best of the bunch. Something like Bootstrap or Foundation are massive, and while that provides you with extensive documentation and a plethora of various components. In my opinion, they are absolutely overkill. Unless your goal is to create 95% of your html and styles using said framework. If you’re going for the frameworks look and feel and have no requirements outside of it, then absolutely, use them. That is where you’ll get the most value.

However, I question the value of such a framework when working in an enterprise environment with a dedicated UX, product management and set wireframes. These are typically different from the out of the box styles that are baked into the framework. So, if you’ll find yourself over writing any of these styles more than 30% of the time, then the value of the framework has been diminished.

Where the real value of the framework shines was with the out of the box responsiveness. We have spent a lot of time contemplating how we can have responsiveness quickly and easily. Many of these frameworks don’t offer that at all or if they do, under the covers they use native CSS3 features such as flex box.

Particularly bulma where you can simply add a class name to the container div of ‘columns’ then the subsequent divs adding ‘column’ and boom, a responsive box type structure. Bulma was also particularly useful by providing a subtle style one of which could be overridden which isn’t ideal but if you’re going to use a framework then you will just over write styles, it’s part of it.

Bulma example of three cards, with a grey background and white interior.

Flex Box setup HTML

Corresponding CSS

As you can see, bulma results in less custom styles being written, but less control. I was able to accomplish the exact same functionality, in actually quite a less amount of time, using flex box. With the framework there was some “ramp up” time as you needed to sift through documentation to find the appropriate class to apply.

While researching the frameworks I couldn’t escape from the feeling that I was using these frameworks as a way to compensate for a weakness in myself and other members of my team. If we spend time to learn a framework, (which you most certainly will spend some time learning them) become proficient at it, then why not just use that time to learn what the framework itself uses?

This argument is true of almost anything, however on a case by case basis sometimes it makes sense to not reinvent the wheel. Such as using something like react or jquery. You can technically accomplish the functionality of these libraries with ES6 but why? The same applies to CSS frameworks, but in the case of these frameworks, it makes more sense. For one, CSS is typically something that is highly specific and highly custom. Certainly there are design patterns and tools such as SASS or LESS which one can leverage to provide the same advantages that you can gain from a framework.

Secondly, if you decide to invest in a framework by learning the framework, learning it’s quirks and the framework falls out of favor or loses support for one reason or another. Where does that leave you or your product?

Not in a good place, that’s where.

It’s my opinion that if you’re leveraging such a framework, it’s highly possible that you’re compensating for a weakness as a developer. A weakness in styling and responsive design.

You can accomplish most of everything you need for simple to moderately complex websites using simply CSS3. Time spent in understanding a core language used in web development is nothing but a positive, unless some how CSS is lost.

We can only hope it gets lost, deep in the woods and never comes home 🙃

I believe using flex box can be just as quick and efficient as something like bulma, while keeping all of your power. The frameworks are great until they aren’t. Meaning if you have a problem, and you question why the framework made a particular decision then your experience is not going to be great.

If you need something quick, pretty and without much thought behind it, absolutely, use the frameworks. However, if you’re setting up a long term project which will be maintained for years, I would advise against it.

* I know a framework is something that calls your code and a library is something your code calls, and some of these are frameworks and some are closer to libraries. I just call them all frameworks because I’m a loosey goosey, fly by night kind of dev.