---
title: Flutie
teaser: A basic stylesheet and form collection for rails apps.
tags: news,web,open source,flutie
author: Matt Jankowski
published_on: 2010-07-26
---
## 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](http://rubygems.org/gems/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.
```erb
<%= stylesheet_link_tag :flutie, ‘admin’, :cache => true %>
```
## Install
To get flutie in place in a rails3 app, just add it to your Gemfile...
```ruby
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.
```erb
<%= 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...
[](http://images.thoughtbot.com/ui/flutie-default.png)