Pattern Library

A practical approach to streamlining workflows
and coding processes across teams.

Typography

Headings

Typography is usually found on the main page of the SASS files towards the top. This is so that it's easy to find and change later.

Main Heading for Page Titles

The Main Header for your page header can be playful and much larger than others. It's ok to use a Display font, Cursive, Handwriting or Monospace font here. Just be sure that it is still legible if this is the only way for the user to know what page they are on.

Subpage Title

The Subpage Header is usually a more reasonable size and font.

Section Header

The Section Header should still be easily spotted when the page is scanned. It can be slightly smaller than the Subpage Title, a different color, or bold. Just remember that it doesn't need to be all three and should stand out slightly less than the Subpage Title. Always have clear page heirarchy for your users. In this case, I've bolded it, changed the font and color, and made it all caps. This is probably overkill and should be avoided.

Sub Section Header

There is usually no need to go this deep in the Headers for a simple webpage. For a more complicated site, it's better to have all 6 Headers. It's good to choose a font that has many different weights so that you can use it for multiple purposes. You can change the look of the font using the font-weight property in css.

Bold Header

I've kept the font the same size as the body copy but just by adding some weight and making in black the font stands outs on the page.

Body Content Header

This time the color makes the font pop out.

Paragraphs

Paragraphs can be broken in to multiple parts using html. They should be styled in the main body of the css. You can break them out from there by adding differnt classes to the page or by styling individual elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor augue orci, sit amet bibendum mauris lobortis sodales. Nunc rutrum fermentum lacus, ac feugiat ligula pharetra sed. Ut quis tempor risus. Ut fringilla luctus finibus. Vivamus hendrerit enim eget tellus mollis blandit. Mauris eleifend quam in quam interdum cursus. Mauris porttitor urna at odio cursus, non consequat quam feugiat. Nam nec pulvinar neque. Fusce vulputate risus lorem, ut maximus erat fringilla semper. Aenean nisl eros, tempus imperdiet lorem egestas, porta fermentum lorem. Integer tempor porta risus. Vestibulum quis lacus eu diam ornare sagittis placerat quis tortor.

Duis rhoncus commodo augue nec auctor. Donec vel sodales risus, nec accumsan magna. Suspendisse nec justo urna. Vivamus sed hendrerit eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ut dui porttitor, dictum est non, porta justo. Quisque a mi tortor. Sed aliquam dignissim urna eu luctus. Ut tempus, ipsum at tempor porta, turpis purus ultricies lectus, consequat semper lectus velit sed urna. Aliquam id erat est. Sed purus nulla, ultricies eget ipsum sit amet, elementum ultricies arcu. Aliquam augue magna, tincidunt a pretium et, molestie vel est. Nulla dui dolor, consectetur eu ullamcorper a, mollis ac augue.