Flutie

Background

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.

Goals

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:

• A consistent set of CSS styles that every project could start with
• A consistent internal mindset about “start general; then get specific”
• The ability for developers to create “normal html” and not get burned by some weird CSS float rule to get unexpected results before putting something in front of a client.
• The ability to show designers and developers (and maybe clients) a “style guide” type of page which would show how elements would be displayed unless they were overridden.

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.

Features

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.

Flutie provides…

• A collection of stylesheets which we believe are a reasonable starting point for general layout and relative size.
• Pretty basic form styles, and styles for the rails flash.
• A page at the /styleguides URL in development mode to view this default state - or to view all the styles within the application layout. We render within your own layout first, and you can click “default layout” to see flutie by itself.
• The ability for plugins and the main application to insert partials into the styleguide, to view sample styling.
• CSS which is generally simple to override.

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 %>

Install

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)…

rake flutie:install

…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.

What does this look like?

Click through for full screenshot…