Key Takeaways
- Web components are becoming increasingly popular, and there is a growing need for CSS frameworks that can handle this type of development. Traditional CSS frameworks like Bootstrap or Foundation may limit developers when working with web components due to their extensive built-in styles and code.
- Component-driven CSS frameworks, such as Pattern Lab, SUIT CSS, inuitcss, and Pure CSS, are designed to act as starting points for design and provide a framework for developing web components without imposing restrictions or unnecessary styles. They allow developers to focus on their own styles and code, promoting reusability, consistency, and collaboration.
- While component-driven CSS frameworks offer many benefits, they can add complexity to a project and require a good understanding of the framework’s syntax and conventions. They are primarily designed for use with JavaScript-based technologies but can be applied to any programming language that supports modular programming.
“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.
Frequently Asked Questions (FAQs) about Component-Driven CSS Frameworks
What are the key benefits of using component-driven CSS frameworks?
Component-driven CSS frameworks offer several benefits. Firstly, they promote reusability. Components can be reused across different parts of a project, reducing the amount of code written and making the codebase more manageable. Secondly, they enhance consistency. By using the same components throughout a project, the user interface remains consistent, providing a better user experience. Thirdly, they facilitate collaboration. Different team members can work on different components simultaneously, speeding up the development process. Lastly, they make maintenance easier. Since components are independent, changes to one component do not affect others, making bug fixing and updates less complex.
How does component-driven development differ from traditional development methods?
Traditional development methods often involve a top-down approach, where the overall design is broken down into smaller parts. In contrast, component-driven development adopts a bottom-up approach, where individual components are developed independently and then combined to form the complete design. This approach allows for greater flexibility and scalability, as components can be added, removed, or modified without affecting the overall system.
Can component-driven CSS frameworks be used with any programming language?
Component-driven CSS frameworks are primarily designed for use with JavaScript-based technologies, such as React, Vue, and Angular. However, the principles of component-driven development can be applied to any programming language that supports modular programming. It’s important to note that the specific implementation details may vary depending on the language and framework used.
What are some popular component-driven CSS frameworks?
Some popular component-driven CSS frameworks include Bootstrap, Foundation, Bulma, and Semantic UI. These frameworks provide pre-designed components that can be customized to fit the specific needs of a project. They also offer extensive documentation and community support, making them a good choice for both beginners and experienced developers.
How can I get started with component-driven development?
To get started with component-driven development, you first need to understand the basic principles of modular programming and component-based architecture. Next, choose a component-driven CSS framework that suits your project’s needs. Familiarize yourself with the framework’s documentation and start experimenting with creating and using components. Online tutorials and courses can also be helpful in learning the ropes.
Are there any drawbacks to using component-driven CSS frameworks?
While component-driven CSS frameworks offer many benefits, they also have some potential drawbacks. For instance, they can add extra complexity to a project, especially for beginners. They also require a good understanding of the framework’s syntax and conventions. Additionally, relying too heavily on pre-designed components can limit creativity and result in a generic-looking design.
How does component-driven development improve team collaboration?
Component-driven development improves team collaboration by allowing different team members to work on different components simultaneously. This parallel development process can significantly speed up the development timeline. Moreover, since components are independent, changes made by one developer do not affect the work of others, reducing the risk of conflicts and bugs.
Can component-driven CSS frameworks be used for mobile app development?
Yes, component-driven CSS frameworks can be used for mobile app development. Many frameworks, such as React Native and Ionic, provide components specifically designed for mobile interfaces. These components can be used to create responsive designs that work well on a variety of screen sizes and devices.
How does component-driven development support testing and debugging?
Component-driven development supports testing and debugging by allowing each component to be tested and debugged independently. This modular approach makes it easier to isolate and fix bugs, as well as to write unit tests for individual components. It also facilitates regression testing, as changes to one component do not affect others.
How can I ensure the accessibility of my components?
Ensuring the accessibility of your components involves following best practices for accessible web design. This includes using semantic HTML for structure, providing alternative text for images, ensuring sufficient color contrast, and making all functionality available via the keyboard. Many component-driven CSS frameworks provide accessibility features out of the box, but it’s still important to test your components with various assistive technologies to ensure they are truly accessible.
Vinay Raghu is a UI/UX developer passionate about experimenting with the latest frontend technologies. He is an avid open source contributor and loves meetup groups. You can learn more about him at viii.in.