Butler CC Web Dev Pattern Library

This is a short and far from complete example of what the pattern library assignment can look like. You can see a more complete example at A11Y Style Guide.

Home > Pattern Library

Colors

Main: #43125F

Text: #444

Light Grey: #e0e0e0

Typography

The Global Properties

Apply these properties to the body so they are global:

The CSS:

body {
	color: #444;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height: 1.5;
}

Page Titles

Headings 1-4 will share these properties:

The CSS

h1, h2, h3, h4 {
	margin-bottom: .25em;
	margin-top: 1em;
}

The site header will use h1. All individual page titles will use h2.

The CSS for h1 in the Header

header>h1 {
	margin-top: 0;
	font-size: 1.8em;
}

The CSS for h1/h2

h1, h2 {
	color: #43125F;
	font-size: 2em;
}

Categories

The CSS

h3 {
	font-size: 1.5em;
}

Sub Categories

The CSS

h4 {
font-size: 1.125em;
}
Links

The CSS

a, a:link, a:visited {
	color: #43125F;
}

The primary form of navigation is breadcrumbs.

Home > Tutorials and Resources > Page Title

The HTML

<p><a href="#">Home</a> &gt; <a href="#">Tutorials and Resources</a> &gt; Page Title </p>