Component-Driven CSS Frameworks

HTML & CSS
1

Originally published at: http://www.sitepoint.com/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.

Continue reading this article on SitePoint
1 Like
2

I’d suggest taking a look at Titon Toolkit. It’s aim was to be a library akin to Bootstrap or Foundation but without all the bloat. Only basic layout and structural styles. Organized JS classes via RequireJS. Helpful Sass mixins and more.

The CSS and JS are decoupled enough to where you can use your own HTML and CSS when needed (but not all the time). All that’s required is a bit of configuration to hook it all up.

Version 3 of the library is already planned to support ECMA6 features (with 6to5 fallbacks), no jQuery dependency, module importing, and much more.

http://titon.io/en/toolkit

3

@milesj I’ve actually had a look at Titon before but forgot to mention it in this post. Do you maintain it? Would you like to discuss it more here or on twitter?

4

Yes, I’m the sole maintainer and developer on the project. If you’d like to learn more, or simply talk about it, the best place would probably be on IRC. Usually am hanging around #titon on freenode.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.