Web Development Recipes, 2nd Edition

Recipe 28

Rapid, Responsive Design with Skeleton

Problem

We’re often called on by clients or managers to provide a wireframe or a mock-up of a design (or multiple designs) before we do the actual implementation of a site. This process helps communicate design and layout ideas to our end users, especially when we’re asked to design interfaces for mobile phones and tablets as well as desktop computers.

We have lots of options, from paper and pencil to full-blown mock-up tools like OmniGraffle, Visio, or Balsamiq Mockups, but we prefer to do these mock-ups in regular HTML and CSS. This way, we can code some interactivity, and we can use the code we write in our actual implementation.

Ingredients

• Skeleton^[69]

Solution

By using one of the many available ...