Pattern Guide

This is my attempt to have a one page reference point for all the front end code and design desisions I make during the course of my work. This page is meant to be viewed both in the browser and in code. You can view the CSS here.

Goals

Naming Convention

My naming convention is based off of BEM - Block, Element, & Modifier. Names should be as short as possible & long as needed.

Block

Standalone entity that is meaningful on its own.

Examples
header, container, menu, checkbox, input, full, half

Element

A part of a block that has no standalone meaning and is semantically tied to its block.

Examples
menu item, list item, checkbox caption, header title

Modifier

A flag on a block or element. Use them to change appearance or behavior.

Examples
disabled, highlighted, checked, fixed, size big, color yellow

Breakpoints

My goal with breakpoints is consider the full spectrum of viewports and be device agnostic. The system should be based on widths that match natural ui pattern changes.

Breakpoints based on:

  1. Most common browser resolutions
  2. Natural widths for common visual patterns to adjust at
  3. Room for error / Browser windows not matching device resolution

*Breakpoints used

Based on stats from statcounter

320 min ->
Smallest Breakpoint Supported
- 360 -
most common
- 375 -
4th Most Common
<- 600* max
Top of Mobile Breakpoint
768
7th Most Common
980*
Top of Tablet Breakpoint
1366
2nd most common
1440*
5th most common
Max Width for standard content
users struggle to keep everything in view beyond this
1920
3rd most common

Layout

My layout system uses:

3 container sizes

10 column sizes

4 spacing options

Applied to the container divs

Full column in Body Container with spacing

This can be as wide as the viewport

<div class="body-container space"> <div class="full bg-light"> </div> </div>

Full column in Content Container with spacing

This is a 1440px max container

<div class="content-container space"> <div class="full bg-light"> </div> </div>

Full column in Article Container with spacing

This container is 720 max width It is used for content that should be easy to read and browse. 640px or 40em max width. This is done to increase legibility by limiting 16px text to about 60 characters wide. Here is the wiki on line length

<div class="article-container space"> <div class="full bg-light"> </div> </div>

Full Small space Light

<div class="full bg-light"></div>

Sixth Small space Light

<div class="sixth bg-light"></div>

five Sixth Small space Light

<div class="five-sixth bg-light"></div>

Navigation

Navigation message goes here

Baseline

Vertical Spacing or a baseline grid provides a visual cadence to the Page

60px
Below headers and Major sections
40px
Below Page titles and Module rows
20px
Below Headlines
10px
Below body text

Typography

Headings

Heading are designed for Maximum differentiation between h1 - h6. This is achieved by choosing visual even font sizes and alternating bolding.

I reccomend AP Title Case for Titles

H1 Page Title

H2 Section Title

H3 Sub Title

H4 Label

H5 Header
H6

Body / Paragraph Text

Paragraph / Body Text Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in strong velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Colors

Colors in this UI system are created by picking a primary hue and placing it evenly along scales of saturation and value. This system naturaly create enough contrast to meet accesability standards.

Color scale using HSL and HSLA

Choices based on:

For base / primary wireframe color, I use dodgerblue or a hue of 210

I belive that the 15 colors below should meet any standard use case

Usage

Colors can be applied to font, border, and background color by adding the following classes:

Colors can be added in the css using variables

Extra Light

Body Background

hsl(var(--hue), 40%, 95%)

Light

Box, Footer, Content and Module Tile Backgrounds

hsl(var(--hue), 50%, 90%)

Tint

Makes dark text stand out

hsla(var(--hue), 60%, 90%, 0.75)

Hightlight

hsl(var(--hue), 100%, 70%)

Primary

Brand Color, Links, Actions

hsl(var(--hue), 90%, 50%)

Tone

hsl(var(--hue), 00%, 00%)

secondary

hsl(var(--hue), 00%, 00%);

medium-dark

hsl(var(--hue), 00%, 00%);

dark

hsl(var(--hue), 00%, 00%);

shade

hsl(var(--hue), 00%, 00%);

contrast

hsl(var(--hue), 00%, 00%);

negative

hsl(var(--hue), 00%, 00%);

positive

hsl(var(--hue), 00%, 00%);

gradient

hsl(var(--hue), 00%, 00%);

Icons

These icons are created with CSS and should adjust to the font-size.

<i class="circle-caret up"></i>

<i class="circle-caret right"></i>

<i class="circle-caret down"></i>

<i class="circle-caret left"></i>

<i class="caret up"></i>

<i class="caret right"></i>

<i class="caret down"></i>

<i class="caret left"></i>

1em

2em

3em

Displaying Code

Styleguide

For ascii art, I used 4Max and Univers from patorjk.com/software/taag

Website Types

Templates