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 HTML and CSS frameworks, we can design layouts much more quickly than we could before, while avoiding some of the more troubling issues with CSS layout. And we can plan for different screen sizes, like mobile phones and tablets, from the beginning.

CSS grid frameworks provide a quick and simple way to lay out elements on a page without having to worry about floats, clears, and the like. We can choose among many great frameworks. For this recipe we’ll use Skeleton because it’s simple and easily supports multiple screen sizes.

We’ve been asked to provide a mock-up for a property-listing page. We need to show a few pictures of the property, its price, and some details from the property’s Multiple Listing Service (MLS) listing. We need to make sure things are readable on a regular laptop and on the iPhone, so realtors can quickly reference the property information. This mock-up will eventually be turned into a template for an actual web application, so we’ll use some hard-coded text for our examples, and we’ll use image placeholders for the property images. Before we start building the mock-up, let’s explore what Skeleton is and how it works.

Skeleton’s Structure

Skeleton, like other grid-based frameworks, divides a single centered container into twelve equal columns, creating a grid. We then use these columns to define the widths of our page regions. A header that stretches across all of these columns would be defined as twelve columns wide, while a sidebar that’s only a third of the page would be defined as four columns wide. The main column would then be eight columns wide. The following illustration shows how a simple two-column page would work:

Using simple tried-and-true CSS techniques, Skeleton handles the task of floating and aligning elements for us and sets default line heights and font sizes so things flow across columns nicely. On top of all that, Skeleton makes it easy to make a layout work well on all screen sizes by taking advantage of CSS media queries, which we discuss in Recipe 23, ​Targeting Mobile Devices​.

Skeleton provides more than some CSS to make layout easier. It provides us with a framework for our files. When we download and unpack the Skeleton files, we get a sample index.html file, a folder for our style sheets, and a sample Favorites icon.

Now that we know what Skeleton can do for us, let’s get started with our mock-up.

Defining Our Layout

Our page will have a header with the property’s address, a column with information about the property, and a column with some photographs. When we’re done, we’ll have a page that looks like the following figure:

We’ll use Skeleton version 2 for this recipe, which you can find in the book’s source code. The Skeleton download gives us a default index.html file that we use as our base for our template. Let’s open that file and delete everything between the opening and closing <div> with the container class. But we keep the container <div> itself, since Skeleton automatically sets that to a width of 960 pixels and centers it on the page.

Let’s start by defining the header of the page, which will contain our site’s title and the address of the property. To do this we need to define a new row and then divide that row into columns. So, we use a <div> tag to define the row, and we use the HTML5 <header> tag for the actual header:

Since we want a single column that stretches the width of the container, we use the twelve columns class for the <header>.

Next, we define the next section of the page, which will contain the left and right columns. Again, we define this region as a new row:

Inside this new region, we define the left column of the page, which holds the price and a brief property description. We use a <section> tag to contain this region. We want this one to stretch halfway across the page, so we define it as six columns wide:

Now we define the right column by creating another region immediately after the previous <section> tag:

Skeleton automatically left-aligns regions until the total column count is twelve, when it then drops to the next line.

Since we don’t have images yet, we’ll use placeholder images that we’ll generate using Placehold.it.^[70] Using that simple API, we can have images generated for our mock-up on the fly, by pointing to the Placehold.it site. For example, we can make this request to insert an image that’s 460 pixels wide by 200 pixels tall with the text Bedroom:

For our mock-up, we use seven images, which we code up like this:

When we shrink the browser window or view the page on a smaller device, we want our large image to scale down too. If we apply the u-max-full-width class to an image, Skeleton will crop the image for us by reducing its width and height to fit the available space.

The only thing we have left to implement is our two-column table of data for the house, which we want to place below the paragraph in the left column. We’ll do that by defining columns within the left column we created earlier.

Mobile-Friendly Tables

Our next order of business is to define the data table for our details about the property. We define this with a standard HTML table, as Skeleton already has styles ready for us:

Skeleton’s documentation says we should use the <thead> and <tbody> tags when we use tables, but since our headings are on the left side of the table rather than across the top, that markup doesn’t work well. Fortunately, Skeleton works fine if we omit that extra markup. But if you have a table with headers across the top, it’s a good idea to ensure that your table includes those tags.

In a short time, we have something that looks pretty nice. As we resize the screen, we see our elements restack vertically and look good on a small screen:

Let’s finish this mock-up by adding a shadowed border around the container, but only when the full-width version is displayed. We’ll also add a few more tweaks to ensure that things look great across a wide range of devices.

Styling with Media Queries

Skeleton makes things look pretty nice out of the box, but we can add our own customizations. Skeleton is designed to be lightweight and extendable. Let’s add a background color to the main content area, set the background color of the page to white, and add a slight drop shadow around the content area. But we’ll do this only on large screens.

To keep things organized, we add a new file to our project called css/custom.css. This keeps our code separate from the Skeleton library, in case we want to upgrade to a new version later. In this new file, we’ll add a media query that targets desktop screen sizes only. Skeleton is built around the following media queries:

Based on that, we target anything with a min-width of 750px for our styling:

To get this new style sheet to work, we need to add it to our HTML page, adding the reference below the existing CSS links:

One small detail remains, and that’s that the images are all left-aligned, which doesn’t look right on small screens. Let’s center all of the images on all screen sizes to make things line up nicely. We can place this code right at the top of our custom style sheet, above any media queries. This way it applies to all styles and will be easy to override later if we need to adjust it for specific screen resolutions:

From here we could make any number of additional customizations for various screen sizes, building off of what Skeleton gives us. And, of course, we’re not restricted by those media queries. We can use any width we need to make things look the way we want.

Joe asks:

Aren’t We Mixing Design and Implementation with Frameworks Like This?

To be honest, yes we are. When we have a <div> or <section> with a class of four columns and we decide that we need to reorganize things, we’ll have to touch the markup. As a result, many purists will look at this as a bad idea in theory. While it’s not nearly as bad as class="redImportantText", it does couple the content with its presentation.

However, most site redesigns we’ve seen involve scrapping the existing structure and creating a new layout from scratch anyway, so the reusability of a template and its associated styles is often more theoretical than practical. With systems like this, you’re trading strict semantic markup for a productivity gain. As you’ve seen in this recipe, frameworks like Skeleton are great for creating rapid prototypes of pages, even if you don’t roll this markup into the actual site.

If you’re still uncomfortable with this approach but like the idea of using these systems instead of rolling your own, you can investigate Sass (which we discuss in Recipe 30, ​Building Modular Style Sheets with Sass​) and its advanced features to create an abstraction layer between the grid system and the HTML. Many other CSS frameworks offer this capability for advanced users.

Further Exploration

Skeleton’s default template is worth a closer look because it starts us off with a great set of best practices. For example, it loads a web font from Google’s CDN, using a protocol-relative scheme so it supports both HTTP and HTTPS.^[71] It includes all those other little things you might tend to forget, like a Favorites icon, <meta> tags for the description, and content encoding. And it includes a sensible <meta> tag to control the viewport on mobile devices.

Skeleton might not meet all of your needs, so you may want to look at Foundation^[72] or Bootstrap,^[73] which follow the same grid-based approach but offer many more advanced components, theming, and widgets—along with a steeper learning curve. However, both of these frameworks are similar enough to Skeleton that what you’ve learned here will help you greatly.

Also See

• Recipe 38, ​Using Dropbox to Collaborate and Host a Static Site​

• Recipe 44, ​Automating Static Site Deployment with Grunt​

• Recipe 30, ​Building Modular Style Sheets with Sass​