The State of CSS Frameworks
Hey all you CSS-ers! Its been a busy time for front-end web development and it looks to be more of the same. With more and more frameworks coming out every day, it’s hard to keep track of which ones to pay attention to. Not to mention, looking for the best CSS framework can be more subjective than you might think. Allow us to lend a hand in sorting through the what’s what in CSS frameworks.
For those who are less tech-savvy, a quick rundown. Building a website is a complicated process that involves a lot of moving parts. One of those components is the visual style and layout of a site. That’s where our friend CSS comes into play. CSS stands for Cascading Style Sheets, it allows you to style whatever parts of a site you’d like and with a little finesse you can really get some neat effects! A tool that developers will often use is something called a CSS framework. It’s essentially a starting point for how a website will aesthetically look and feel. Often times a framework will take care of your responsive CSS among other things. This can be a huge advantage to developers because you don’t have to reinvent the wheel every time you go to make a website. As such, frameworks are often times a very popular tool. So now you’re wondering which one you should use? Well let’s take a look at the most promising frameworks available to all you developers out there!
Bulma
Say hello to Bulma. It’s a fairly new framework that’s been getting some buzz recently. Still in early development and pushing for their 1.0 release, this project has promised a lightweight and simple to use stylesheet. Bulma’s CSS grid is built with Flexbox, which allows it to perform a little more fancy footwork than your standard grid. This, of course, comes at the cost of not being able to run very well on any Internet Explorer browser pre 10.0. But, if you’re okay with that sacrifice then you should absolutely check this project out.
Pure
Pure is a truly minimal CSS framework that can work really well for a new project that just needs the bare bones of a framework. The appeal of Pure is its simplicity in styling and its total size. Pure advertises that it’s only 3.8kb by the time it’s minified and gzipped. For those not in the know, this is an incredibly small size for a framework (for comparison bootstrap is 155kb when minified). This makes starting a project with responsive web design in mind even easier. Another plus is that Pure comes with normalize.css built into it. So, if that’s normally an include for your project builds, then you can get all your css resets with Pure instead!
Kube
Clocking in at a little heavier than Pure but still a very lightweight CSS framework, Kube is a happy medium between something like Bulma and Pure. Kube is self-described as a starting point for both designers and developers. The framework itself is fairly light on actual styles and focuses on creating helpful tools that aid in your website development process. This framework is also based on Flexbox, so it has a lot of functionality out of the box in terms of layout, but again, keep an eye on browser compatibility if you’re supporting some older ones.
Materialize
Based on Google’s Material Design, Materialize is a far more fleshed out framework than the others we’ve highlighted so far. Because Materialize is based on a specific design pattern, this framework has quite a few opinions on how the elements on a page should look. From the drop shadows to the card shape, this framework has done a lot of the visual styling for you. That comes with the obvious drawback that if you’re attempting to make your project look unique and specific, this framework may be difficult to work with. I’ve seen the argument that many of the sites that use Google’s Material Design or even Materialize itself tend to look very similar and almost homogenized. To that point though, I think that when it comes to usability that these sites are all very functional. At the end of the day, if your site looks professional and using this framework saves you some time, then I’d say go for it.
Vuetify
Very similar in visual style to Materialize is Vuetify. This framework takes a lot of the legwork accomplished by Materialize and applies it to be easily usable with the javascript framework Vue.js. So this is a bit of specific use case, but if you’re a Vue developer, this could reduce the amount of time you spend styling elements and allow you to focus on building those oh-so-dope web apps.
Bootstrap
Certainly not the most trendy or lightweight framework, but absolutely the most popular. Bootstrap is one of the oldest names in frameworks and doesn’t show signs of weakening any time soon. The push towards more lightweight frameworks has certainly begun, but Bootstrap remains in high use across the web. This is more than likely due to its easy to use nature and simply the sheer amount of developers who know how to use it. You can safely assume at this point that if someone is a front end developer, they have some amount of understanding of Bootstrap. It also has come built in with responsive design since the get go, this is becoming less and less of a selling point these days, but bootstrap was one of the first to tackle that problem. The drawback with Bootstrap is that if you don’t take the time to modify the base styles, your site can end up looking fairly stock. Furthermore, Bootstrap is awfully heavy in terms of load time if you include all the features that come standard with it. Both of these things can be worked around, but it’s important to keep them in mind when committing to a framework for any of your projects.
So there you have it! The ever growing pool of frameworks and tools can be daunting, but hopefully, we here at Three29 could lend a hand to those of you who feel a little lost.
