Patterns again

Where are we?

You’ve learned about paragraphs, headings, horizontal rules, CSS, and other stuff. You’ve seen some basic guidelines that I use when I format a new page.

This lesson’s goals

Let’s talk a little more about patterns.

Patterns

Kieran

In the previous lesson, I showed you some rules that I often use for formatting text. Like “Use a 14px font for most text,” and “Use larger fonts for headings.” was that helpful?

Renata

Yes, very.

Kieran

Why?

Renata

There are lots of CSS rules. You can use them in a bazillion different combinations. It was making my brain hurt.

You gave us a…, well, some CSS rules that work OK.

Kieran

Where did I get those rules?

Renata

You said that you’d used them in the past, that they worked for you.

Kieran

Right!

Remember that a pattern is a way of solving a problem that someone has found useful. Instead of working out the solution to a problem all over again, sometimes you can just grab a pattern than works.

CoreDogs has a pattern library. To get to it, click on the Tools tab, and then the Patterns tab:

Figure 1. Accessing the pattern library

Look at the Basic text styling pattern. It uses the guidelines from the previous lesson. The pattern includes helpful tips, like using quotes around typefaces that have spaces in their names.

Also look at the Title – Details pattern. It tells you how to use section headings. The pattern uses CSSmargins. We haven’t covered that yet; that comes later. But you should be able to follow the pattern.

Some patterns are often used together, or are alternatives to each other. Both of the patterns just mentioned link to each other in Related patterns.

Figure 2. Related patterns

Adjusting patterns

CC

Patterns are shortcuts, right?

Kieran

Yes.

CC

But is using someone else’s shortcut always a good idea? It might not do exactly what you want.

Kieran

Good point!

You usually need to adjust patterns, so they make sense for your use case (that is, the site you are working on at the moment). For example, the Title – Details pattern uses the same color for text and titles.

Figure 3. Title text and detail text are the same color

But maybe you want different colors.

Say you’re making a site for a school that has the color scheme blue and white. These colors are part of its branding (we talked about branding earlier). You might want the text to look like this:

Figure 4. New colors

So you need to adjust the pattern.

What this means is that you can’t just throw the pattern in without understanding it. You need to understand it, so you can change it to fit the job.

Patterns are not like Lego bricks that you can snap together. They’re more like cookie cutters.