Boost Your UI Development: Automate HTML/CSS with Emmet, Guard, and LiveReload

Typically, a web page development process starts with a designer delivering mock‑ups (often images). Front‑end developers then manually convert these designs into HTML and CSS, using tools such as colorpicker and ruler to match colors and dimensions, and repeatedly refreshing the browser (F5 or Ctrl‑R) to compare the implementation with the design.

Avoid Manual Labor

Writing HTML/CSS by hand is time‑consuming, especially keeping track of opening and closing tags. Developers use editors and plugins—Vim SuperTab, Snipmate, Dreamweaver code generation, or the Emmet plugin for Sublime Text—to autocomplete tags and generate markup quickly.

For example, with Emmet you can type an abbreviation and press Tab to expand it into full HTML structure: ul>li*3>.feature>span.number+i+h4+p This expands to a <ul> containing three <li> items, each with a div (class feature) that includes a span with class number, an i element, an h4, and a p.

Avoid Repetitive Refresh

Frequent manual refreshes can be eliminated by combining LiveReload (a browser extension) with Guard. Guard watches file changes (HTML, SCSS, JS) and notifies LiveReload, which automatically refreshes the page. Guard can also compile SCSS to CSS when changes are detected.

Boilerplate Project

A ready‑to‑use boilerplate repository on GitHub provides the following configuration:

SCSS compilation environment using Compass.

Guard setup to trigger LiveReload on changes to HTML, SCSS, or JS files.

A standard HTML5 template.

A basic style.scss file.

Guardfile example:

guard 'livereload' do
  watch('index.html')
  watch(%r{stylesheets/.+\.(css)})
  watch(%r{scripts/.+\.(js)})
end

guard :compass

To start, clone the repository, run bundle install, then execute the following commands:

$ cd mydesign
$ bundle install

Assumes you have RVM installed and a Ruby version with the bundler gem.

Development Workflow

Typical workflow: open two terminals—one running Guard, another running an HTTP server—plus a browser window. After editing and saving files, the browser refreshes automatically, providing instant feedback for tweaks such as adjusting background colors, font sizes, or element alignment. Using two monitors (one for the design mock‑up, one for editor and browser) further enhances productivity.

Original article: http://insights.thoughtworkers.org/modern-ui-development-workflow/