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!