Component-Driven CSS Frameworks

“2015 is the year everyone will move away from frameworks.”

I don’t really know about that. I just wanted to link bait all of you. Jokes aside, have you noticed the subtle movement in the front-end scene where everyone is moving away from frameworks? For example, Susy, the Sass grid framework moved away from Compass dependency, and developers have been encouraged to always ask whether you need jQuery.

Web Components are all the rage today. As we move forward into a world where components are first-class citizens of a web application, we are in dire need of frameworks that are capable of handling this new development.

The Limits of Bootstrap and Foundation

If you are a front-end developer, there’s a good chance you know either Bootstrap or Foundation inside-out. Popular CSS frameworks like those may be limiting us while developing with web components. Not that they are bad or anything. They just come with too many built-in styles. Given the power of shadow DOM, that’s probably not what you want. These frameworks have the reputation of trying to be everything for everyone. On the other hand, component-driven CSS frameworks act as starting points for design and provide a framework for developing web components. They don’t aim to be anything more than that.

Bootstrap to some degree has revolutionized the way we write front-end code. It gives us great UI components along with a structure for scalable and maintainable stylesheets. It is great for working with large teams on an accepted format for CSS. The problem is, it comes with a lot of code. It’s perfect if you don’t want to build anything from scratch. Customizing it, however, is not as effective. Can you customize it? Sure. Is it easy? Questionable.

“You are now working in spite of – rather than because of – a CSS framework.”
– Harry Roberts

Foundation battled this problem efficiently. It was built to be customizable from scratch. In fact, the team was hell-bent on making the default theme very basic, ensuring that all websites built with it do not end up looking the same. But some of foundation’s components are closely coupled with markup, which limits the markup you can use, thus going beyond being just a CSS framework. They are actively working to improve on this front.

UI Kits vs. Frameworks

Harry Roberts presented a talk earlier this year (see slides) discussing the fine line between UI kits and CSS frameworks. In this talk, he says, a CSS framework gets out of your way. It comes with no styles included. It comes with no restriction on markup, HTML structure, or classes.

A UI kit, on the other hand, is a complete product that provides the whole package right out of the box: Design, structure, standards, patterns, and JavaScript plugins in one neatly packaged box. These are tools for rapid prototyping and getting off the ground quickly. More often than not, you will end up overwriting rules and circumvent the framework’s definitions if you want them to look any different than how they were built.

To put that in perspective, as Addy Osmani recently discussed, a single page from a sample project built using Bootstrap can have as much as 91% unused CSS.

So the question is: Which frameworks will get out of your way and let you write your code, instead of writing it for you?

1. Pattern Lab

Pattern Lab, by Brad Frost and Dave Olsen, is built with the atomic design concept. It is a nimble approach to designing websites starting from the ground and working your way up. It is not so much a framework as a methodology for architecting websites and applications.

Pattern Lab encourages designing websites with a focus on components. Start with basic markup and work your way up to more complex components. This framework comes with no assumptions on styles. It gets out of your way and allows you to work on your CSS.

It come with guidelines for how to structure your CSS-authoring as well as a set of tools that help in the entire authoring process. For example, a tool that randomly resizes the screen to see how your design works on different screen sizes and an annotation tool for quick collaboration.

But the best part is, it is preprocessor-agnostic. Unlike many solutions out there, it has no say in what preprocessor you use; use whatever you like, just follow the principles. It also comes with zero styling and lets you build a styleguide instead of imposing one on you.

2. SUIT CSS

SUIT CSS by Nicolas Gallagher, by definition, is a methodology for component-based UI development. It provides a set of guidelines that allow for the implementation and composition of loosely coupled, independent units.

Components are the crux of this framework. It aims to develop front-end systems where components are composable and configurable. It provides guidelines for building components that are well encapsulated and can be altered via an interface.

SUIT CSS is a mature framework that is built on top of solid principles. The documentation is a great place to learn more about it along with learning more about front-end principles in general.

It also comes with a set of packages that you can add to the workflow. It plays well with npm (node package manager) and includes autoprefixing capability, encapsulation testing, and a customizable and extensible preprocessor. Give it a spin or sit back and read some of the principles it is based on, which give you great insight even if you don’t decide to use it.

3. inuitcss

inuit CSS is not a UI kit. It does not impose any design and it does not come with thousands of components or lines of CSS code. It is a framework that is built with scalability in mind and comes as a small package that you can scale as you require.

“inuitcss provides a solid architectural foundation upon which you can build any size or style of website or app.”

Once again, the most important aspect of inuitcss is the fact that it gets out of your way quickly. It is designed to be style-agnostic and forms a nice base on which you can build your CSS.

For instance, pagination in inuitcss comes with just margins and padding instead of a fully designed component. It lets you define your own styles without having to customize the framework, or worse, override it.

inuitcss is currently undergoing a revamp and a set of pre-alpha modules from the next version are available.

Another aspect I like about inuitcss is that it allows you to namespace components conveniently. It’s easy to drop the framework into an existing project and start re-factoring the hell out of your existing code.

This is a huge win against any framework out there. By contrast, open up Bootstrap or Foundation and most probably the first line is a piece of code that affects everything (I’m looking at you, box-sizing!). These frameworks can’t live in tandem with an existing style, or, it can be a pain to drop one of them into a project and expect things to remain the same. inuitcss does this too, but its optional and easy to disable.

4. Pure CSS

Pure CSS, in my opinion falls somewhere in between a UI toolkit and a framework. It provides a base set of styles but allows you to take it over from there. By design, it is intended to stay out of your way and allow you to craft your CSS without the need to override existing rules.

“Pure has minimal styles and encourages you to write your application styles on top of it. It’s designed to get out of your way and makes it easy to override styles.”

Conclusion

Web components are revolutionizing the front-end scene. Our current favorite tools may not be the best when working with these newer capabilities. It may be time for you to look beyond your favorite framework and try something new. I hope this article has given you enough options to consider.

It takes a good amount of clarity to use the right tool for any given problem. Choose wisely. As always, don’t shy away from rolling your own.