Styling a Rails App in the Browser

As much as I love Sketh, Figma and other tools for creating interfaces, sometime designing in the browser is best. Once I have established a general layout, I like to use the browser for tweaking styles and component placement.

I have no hard-and-fast rule about when to make the transition from a design tool to the browser, other than when I feel like I am making a lot of minor adjustments to my design file. At that point, it usually means that I am generally happy with the design and it's time to get a little more nitty gritty and try things out. This is also great when you aren't starting a design from scratch, rather iteration to optimize, or perhaps adding a new feature.

The most cumbersome thing about designing in the browser is the tools that are available to work with. You either write the CSS locally and refresh the browser, or fidget with the browser tools to see what you like then copy that over to your CSS.

However, with Guard you can write CSS as you normally would; in your text editor. When you save the file, the browser reflects the changes you made without you having to refresh the page.

Installing the gem

We only want Guard to be operating in our development environment. We will use:

#Gemfile

group :development do
  [...]
  gem "guard"
  gem "guard-livereload", require: false
end

Install the gem:

$ bundle install

Setting up Guard

Setup guard by adding a Guard definition to our Guardfile:

$ guard init livereload

Setting up the browser

There are a couple of ways to get Guard working in the browser; a browser extension, or middleware. I prefer using middleware, as it keeps all Guard related changes in the codebase.

I use rack-liverload. Again, we only want this when we are developing, so we scope it to our development environment. Let's set it up:

#Gemfile

group :development do
  [...]
  gem "guard"
  gem "guard-livereload", require: false
  gem "rack-livereload"
end

Make sure to install the gem, and then restart your server ;)

$ bundle install

Next, let's add the middleware to our Rails middleware stack:

#config/environments/development.rb

MyApp::Application.configure do
  # ...
  config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload
end

Using

Now that you are ready to start designing in the browser, run:

$ bundle exec guard

By default, Guard will watch all files from / on up. When you make an edit and save it, Guard will reload your browser with the new files.

Enjoy!