Primary

.background-color-primary
#ff5544

Secondary

.background-color-secondary
#11bbff

Buttons

Buttons can be used by either <a class="button"> or <button>. Make a full size button by adding a .full class. Control the color of the button by adding .primary or .secondary classes (the color of the button is the primary color by default).

Layout

The layout uses Typegrid, that is similar to how 960.gs and Skeleton works. The layout is already being used with the Pathway Website, so please refer to it for a working example.

<div class="desktop-12 columns">Contents go here.</div>

Mobile

The layout is mobile-ready.

						@media screen and (min-width: 768px) and (max-width: 1159px) {
							/* Desktop (smaller than widescreen) */
						}

						@media screen and (min-width: 1200px) {
							/* Widescreen */
						}

						@media screen and (max-width: 767px) {
							/* Mobile viewports (phone landscape, portrait) */
						}
					

Font

Currently, Lato is used because it's free and lightweight.

font-family: 'Lato', sans-serif; 

You can also control the weight of the font by assigning a font-weight property.

						font-weight: 100; /* same as font-weight: thin; */
						font-weight: 300; /* same as font-weight: light; */
						font-weight: 400; /* same as font-weight: normal; */
						font-weight: 700; /* same as font-weight: bold; */
						font-weight: 900;