Patterns
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
By the end of this lesson, you should:
- Know what a pattern is.
- Know why they’re important.
- Know how to find CoreDogs patterns.
Patterns
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?
Yes, very.
Why?
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.
Where did I get those rules?
You said that you’d used them in the past, that they worked for you.
Right!
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.
Suppose you want to make some dog treats. One way to do it is to grab some ingredients, mix them together, and see how they taste. If the answer is “yuck!”, throw that mix away, and try again. Keep doing this, and eventually you would get something you liked.
I wouldn’t make treats that way.
Why not?
It’s so wasteful. Throwing all that stuff away? Makes no sense.
What would you do instead?
I’d find a recipe that someone else has already tested. There’s lots at DogTreatRecipes.org.
A pattern is a recipe that someone else has already tested. But it’s a recipe for Web stuff, not for dog treats.
Patterns are w00fy
You can save yourself a lot of time if you reuse a pattern, rather than doing everything from scratch.
Make sure you use the right pattern, though. Maybe I pick a dog treat recipe, and make the treats. Then I find out that I was supposed to make treats for humans, not dogs. Uh oh! I used the wrong pattern, because I didn’t understand the goal.
Why would anyone make treats for humans?
Training. Give them treats when they do what you want. You can train humans to do lots of stuff. Let you outside, let you inside, shake paws, you name it.
The CoreDogs pattern library
As we go through CoreDogs, we’ll take useful patterns, and add them to a library. When you create a page or a site, you can borrow patterns from the library.
To get to the library, 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 page. 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 CSS margins. 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.
Your own patterns
You might create your own way of doing something. Maybe there’s a set of colors and fonts you like. That could be a pattern for you.
Or you might see a Web page that does something neat. Make a note. Maybe look at the page’s code, to see how it’s done.
Patterns are shortcuts
Patterns are shortcuts, right?
Yes.
But is using someone else’s shortcut always a good idea?
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 2. Title text and detail text are the same color
But maybe you want them to be different colors.
Say you’re making a site for a school that has the color scheme green and gold. These colors are part of its branding (we talked about branding earlier). You might want the title text to be green, the detail text black, and the background gold. So you need to adjust the pattern.
You can’t just throw the pattern in without understanding it. You need to understand it, and maybe change it, to fit the job.
Patterns are not like Lego bricks that you can snap together. They’re more like cookie cutters.
Figure 3. A cookie cutter
Image from WikiHow.
You can just stamp out the basic shape. But if you need to, you can change the shape before you put the cookie into the oven. Maybe trim off the edges of the hat, and round out the head.
Figure 4. Original and changed cookie
Adjust patterns as you need to, to fit the goals of your project.
Other pattern libraries
The CoreDogs pattern library was created to help you learn. The patterns are basic, and easy to use.
Professional Webers might prefer other libraries. The Yahoo pattern library is an example.
Summary
- A pattern is a way of solving a problem. A recipe is a pattern.
- Reusing good patterns makes it easier and faster to create a good Web site.
- CoreDogs has a useful collection of patterns.
What now?
Let’s see how you make lists of stuff.
