When we start on new client projects or internal apps, we don’t always start the HTML/CSS buildout the same way. Sometimes a client has sketches; sometimes wireframes; sometimes they have a brand/identity in place already - there’s a big variety in what materials they come to us with. Likewise, when we start our design process, we don’t always use the same exact things we did the last time. Part of this is a result of wanting to constantly experiment and make each time better than the last by learning - and part of it is just the unique style of each designer and their thought process.
Regardless of how we got there though, one major pain point was always in the first few days of HTML/CSS building. Would we use a css “framework”? Which one? Should we put a “reset” in place but no framework? Should we start with literally nothing and let the site dictate as we go? Should we start with specific CSS rules and stay narrow, or start with very general CSS rules and assume we’ll have re-use down the road?
Depending on the team we had working on an application, the answers to these questions were always different.
We decided that we did not want to build a new CSS framework, but that regardless of any particular approach, we wanted to have these things on each project:
One thing maybe worth noting is that we put the entire HTML/CSS skillset into the “designer” bucket at thoughtbot. We don’t have a “front end developer” position to do HTML/CSS/JS exclusively. We attempt to hire developers with experience and comfort working with front end technologies, but we primarily consider it a design responsibility to get HTML and CSS work done correctly. Even with our growing design team, design time is usually at a premium and we want to grease the wheels as much as possible to maximize efficiency.
To that end, we created flutie. Flutie is a Rails 3 Engine, distributed as a gem. Note that this is NOT a css framework or grid system. It is very opinionated about what basic type size, form styles, list/table style and so on should be — but it is very unopinionated about how you go about creating an overall site layout, how you make grids, how you position things, etc. There are dozens of other tools for those purposes. This is really a “how can I start with something that doesn’t look awful” tool. We want to ensure that when a developer with no specific CSS or design knowledge creates some HTML in an application, they produce something that we’re not embarrassed about.
We also discovered a rails feature that we decided to take advantage of. You can “register” symbols which point to arrays and will be expanded when using stylesheet_link_tag. For example, this will expand to include the 7 stylesheets in flutie alongside the “admin” stylesheet, and cache them all together.
<%= stylesheet_link_tag :flutie, ‘admin’, :cache => true %>
To get flutie in place in a rails3 app, just add it to your Gemfile…
gem 'flutie', '1.0.3'
For rails 2.x apps, you can pull from the rails2 git branch…
script/plugin install git://github.com/thoughtbot/flutie.git -r rails2
Once installed, for rails, you should run a setup rake task (rails2 does this as part of the plugin install step)…
…which will copy some stylesheets into the public directory of the application.
After that, put the :flutie symbol somewhere in your stylesheet_link_tag or equivalent area.
<%= stylesheet_link_tag :flutie, 'screen', :cache => true %>
After that, start your server, browse to /styleguides, and check it out.
Click through for full screenshot…