Exercise: Redesign the Farmers Market Page

Redesign the Saturday Farmers Market's cluttered event page with a type scale in rem, readable line lengths and line heights, a palette that passes 4.5 to 1 contrast, rem spacing and soft vendor cards, and let ten checks measure each part.

Journeyman · CSS · Web Development · Updated

The Saturday Farmers Market has twenty-two vendors, a cooking demo, live bluegrass and a page that nobody reads. Everything is on it: the vendors, a map of the parking lot, the schedule, and a notice that shoppers must bring their own bag. But every line is centered, the section headings are bigger than the market's name, the text is pale gray, and four fonts take turns. The market's board has asked for a redesign, and the HTML stays exactly as it is: all the work is in the stylesheet. Ten checks measure what can be measured (sizes, line heights, line length, fonts, spacing, contrast and the cards), and a short checklist covers what only your eyes can judge.

Before you start

You need Node.js to run the checks. Setup: VS Code, a Browser and Node.js installs it, along with VS Code and Live Server. Everything else the exercise uses is in this chapter, starting with Hierarchy, Alignment and Whitespace.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into your css-in-depth folder.

The folder holds:

  • index.html: the market's page, ready to use. You don't change it.
  • images/map.svg: the map of the parking lot.
  • styles.css: the cluttered stylesheet the page has today. It's yours to redesign: change, replace or delete any rule in it. A comment at the top lists the board's requests and the market's two brand colors.
  • page.test.js and package.json: the checks. You don't need to change these.
  • README.md: the same steps as this lesson, and the checklist.

Open the folder in VS Code, right-click index.html and choose Open with Live Server. Before you change anything, take a screenshot of the whole page: you'll want the "before" at the end.

What to do

Every part of the page has a class to style. A vendor card looks like this:

<article class="vendor">
  <h3>Hilltop Honey</h3>
  <p class="tag">Local</p>
  <p class="description">Raw wildflower honey, honeycomb and hand-poured beeswax candles.</p>
  <p class="booth">Booth 4</p>
</article>

The sold-out vendor's card also has the class sold-out, and a <p class="status"> with the words Sold out for today. The other parts are .label, .when and the h1 in the header; .notice, the bag notice; and the .map, .schedule and .about sections.

Squint at the page first and write down the three things you see first. Then work through the board's list:

  1. A type scale in rem. Body text at 1rem or more. Pick one ratio and make h3 one step up from the body text, h2 one step up from h3, and h1 one or two steps up from h2.
  2. Line height: about 1.5 for body text, and 1.1 to 1.3 for headings.
  3. Line length: the About paragraphs no wider than about 65 characters, with a max-width in ch.
  4. Two fonts at most.
  5. Spacing in rem, with at least 1rem of padding inside each vendor card, and headings closer to their own section than to the one before.
  6. A palette that passes contrast: every piece of text at 4.5 to 1 or more, or 3 to 1 for large text, built around the market's green (#2f6b3a) and sunflower (#f2c14e).
  7. Rounded corners and a soft shadow on the vendor cards.
  8. The bag notice on a background of its own.

The README says the same, with a little more detail on each.

Check your work

In VS Code, open a terminal (Terminal > New Terminal). Run npm install once, to download what the checks need, then run the checks as often as you like:

npm install
npm test

At first nine of the ten checks fail. That's expected: only the first one passes, because the link to styles.css is already there. Each requirement you meet turns its check green. A failing check's message says what it measured and what to aim for, for example The sizes don't climb yet: body text 13px, h3 21px, h2 26px, h1 22px. Each should be bigger than the one before it. The contrast check lists each piece of text that doesn't pass yet, with its ratio and its two colors, so you can find it on the page.

The checks measure the styles the browser works out, but they can't see the page. The README's checklist covers the rest: what you see first when you squint, a single left edge, room around the cards, and a sold-out vendor that's clear without color.

Hints

  • Work out the scale on paper first. Multiply by your ratio, step by step. Type That Reads Well: Scale, Line Length and Pairing has the table for 1.25.
  • One line-height on body does most of the work. The headings then need their own, smaller one.
  • Let the developer tools measure contrast for you. Inspect a piece of text and click the color square beside its color, as in Color That Works: Palettes and Contrast. Pale gray text and white text on a bright color are where most of the page's problems are.
  • The contrast check counts opacity and gradients. If you fade the sold-out card, its text fades too; on a gradient, the text must pass on every color of it.
  • Soft means blurred and see-through. A shadow with no blur, or in solid black, looks like a cut-out. Finishing Touches: Rounded Corners, Shadows and Gradients has a two-layer shadow to start from.
  • Turn the volume down before you turn it up. Remove the extra bold, red and big text first; then choose the one or two things that should lead.

When you're done

Every check is green, and the test run ends with:

✔ index.html links styles.css
✔ requirement 1: body text is at least 1rem, and every font size is in rem
✔ requirement 1: h3, h2 and h1 each step up by the same ratio
✔ requirement 2: body text has a line height of about 1.5, and headings about 1.1 to 1.3
✔ requirement 3: the About paragraphs are about 45 to 75 characters wide at most
✔ requirement 4: the page uses two fonts at most
✔ requirement 5: spacing is in rem, with at least 1rem of padding inside each vendor card
✔ requirement 6: every piece of text has a contrast ratio of 4.5 to 1 (3 to 1 for large text)
✔ requirement 7: vendor cards have rounded corners and a soft shadow
✔ requirement 8: the bag notice has a background of its own
ℹ tests 10
ℹ suites 0
ℹ pass 10
ℹ fail 0

Take an "after" screenshot and put it beside the "before". Squint at both. Then show the two to someone who hasn't seen either, and ask which market they'd rather visit. What did your redesign change about what people see first?

So what

You didn't change a word of the market's page, and it went from a flyer nobody reads to a page that looks designed. That's the skill behind every before-and-after a designer shows off, and you can now take it to any page: a portfolio, a class project, or a local business's site that could use the help.

Key terms

Related