CityPlug: An experiment with CSS Frameworks

We’re generally not proponents of CSS frameworks. Our common approach is usually the “build your own” one.

Before I dive deeper, what is a CSS framework? A set of pre-defined CSS files, and conventions on classes and HTML elements that simplify building an app/website. For example, a CSS framework might define, in a resusable way, elements like:

• column widths
• buttons
• common layout elements

Usually, their problems are:

• restriction of the creative use of CSS
• filesize
• unnecessary bulk (you might not need everything in them)
• Loss of semantic markup (meaningless IDs & Classes, self-imposed HTML structure)

Some of the arguments against them are really valid if you use a framework to do little more than CSS basics (if that’s you, please read this: http://warpspire.com/posts/css-column-tricks/)

Yet, lately, we have found ourselves working with two of them:

• Bootstrap: The App framework made by Twitter
• Foundation: A responsive framework made by Zurb (a CA-based interaction design agency).

Why? 

Obviously, you SHOULD write reusable CSS all the time, but it isn’t the same scope as a “framework”.

In some recent cases, especially when working for startups, I have always tried to create a framework from scratch. It made sense, since their products are apps with frequent releases, interface changes, and new features. In these cases, reusable CSS helps them to build without having to call for a designer everytime they change something.

Yet, I have found that it required a lot of work, that was not always correctly used by the in-house developers (a Belgian problem?). Which in turn led to poor implementation of all this neatly conceived code.

The problem with homebrewed CSS frameworks

What was the problem? I don’t believe it was in the framework itself. It was in the lack of documentation! As a front-end designloper (yes, I made that word up), it takes a lot of knowledge and expertise to build those things right. But you end up taking your knowledge for granted, even for the future users of the framework.

To me, the real issue is to communicate effictively to people how they should use it. So to make your own framework efficient, you need to write good documentation. Needless to say, some clients won’t pay you for this.

The very thorough documentation made available by the developers of those frameworks solves this issue, and means that as long as you modify and extend the framework, the maintenance of the app you’re building will be easier for every involved party.

UI frameworks

The other interesting feature of some of the new frameworks that recently popped up is that they are actual UI frameworks, which include Javascript to cover common necessities like modal windows, popovers, tabs, etc.

When building an app, this comes in very handy, and can make the choice of one of these frameworks very reasonable.

Using Bootstrap

We used Bootstrap to build the new design of Cityplug.be, after an expert review of the previous design. The request to use a framework emerged from the client itself, and we approved it, following the aforementioned experiences.

Twitter’s Bootstrap framework is interesting for many reasons. First it’s really suited for developing apps, or large websites. Secondly, it was built with LESS CSS, a dynamic CSS superset that lets you use variables and mixins to generate css.

Building the new CityPlug.be design

So we implemented the new design within the Bootstrap framework. And we also extended it to add some of the functionality, . This is also one of the strong points of frameworks: when you’re building within their reusable environment, it drives you to create code that is not too specific.

The request was dual and somehow contradictory, yet I believe we pulled it off:

• make reading on the website more engaging (more like a magazine)
• make interacting more enganing (social aspect)

We improved the reading experience by using more comfortable font sizes, and better type (Franklin Gothic/Helvetica) through @font-face, which also reinforced the branding. The overall layout was improved through a better use of whitespace and a simpler, less eye-straining page structure. Large pictures and large titles greet the reader for a more welcoming and enjoyable experience.

Interaction and social experiences are now more manageable, thanks to the very readable user review grid, social plugins, and the unobtrusive rating system. And we also improved the user experience for registration and review submission.

To summarize, We loved this approach, the collaboration with the development team was a joy, partly thanks to using a framework. And here’s the best thing: We’re confident that they’re going to keep building in better functionality within the modular system that we have created.

Visit the new cityplug.be