Tools

This is a list of the CoreDogs patterns. A pattern is a common way of doing a task. You can create things (Web pages, databases, etc.) by combining patterns.

HTML page template

Pieces every page should have.

Content organization patterns

Aside

Gives some extra info that isn’t a part of the main content flow.

Headings and content

Showing which content belongs under which headings.

Image and caption

An image with a caption above or below it.

Lists

A list with bullets, or a numbered list. Can be nested.

Organize with structural graphics

Use dividers, bullets, and other images to organize your content.

Table of contents

Links at the top of a long page to sections of the page.

Tables

Tables show data in rows and columns.

Content styling patterns

Basic colors

Colors that work well together.

Basic text styling

A pattern for styling text on a Web page.

Emphasize text

How to make text stand out when users quickly scan a page.

Many elements, same look

Use a CSS class to make elements look the same.

Input-process-output

A general pattern for almost every user interaction on a Web page.

Input patterns

Get input from a text field

Get what the user typed, and put it into a variable.

Give users input hints

When you ask users for input, give them hints about what type of input you expect.

Position the cursor on page load

When a form is displayed, put the keyboard cursor in the first field, so the user can start typing.

Run code on click

When the user clicks on something, run some code.

Run code on hover

Make something happen when the mouse cursor moves over an image.

Validate input

Processing patterns

Doing arithmetic on user-entered data: parseFloat

Convert user input to numbers before doing arithmetic, with parseFloat and parseInt.

Output patterns

Append to existing output

Add to text that’s already on the page.

Change text on the page

Output data by changing existing text on the page.

Dialog box

Show output in a modal box.

Hide output areas until needed

You write a page that does a computation, and shows the output to the user. When the page first loads, there is no output to show. You can hide the output area until it is needed.

Navigation patterns

Horizontal nav bar

Page link

Site map

Table of contents

Links at the top of a long page to sections of the page.

Vertical nav bar

Layout patterns

Fixed layout

A fixed layout stays the same width as the browser window is resized.

Footer

A footer is a region at the bottom of a page.

Liquid layout

A page layout that uses the full width of the browser window. It changes its width when the user resizes the browser window.

Nav bar in header

Nav bar on left

Nav bar on right

Page header area

File organization patterns

Library directory

Debugging patterns

Check the error console

Check variable values

Check whether code is being executed

CoreDogs