Introduction

About this Style Guide

This is a simple style guide to get a project started. It contains some basic styles for Typography in general, buttons, and a few components. I usually don't overdo more than that since every project is unique. But a good approach in general is:

For things that require variations and will be reused across multiple sections / pages, create some global classes (like spacing, font sizes, opacity, etc;
If you reuse sections with columns on multiple sections, consider creating some global classes for grids in general.
CSS Grid is well supported now, and a lot easier / cleaner to use compare to the old way of building columns. Flexbox is also good.

About CSS units

All sizes (font size, spacing, etc) on this template are based on a 8px grid system. You can find some references about this system here and here. I prefer to use px to set up the base unit and REMs to define the sizes and scale.

Basically it works like this:

Define the base font-size on the Body element (16px)
Font sizes, padding, spacing, etc, defined in REMs

Typography

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

text-size-jumbo

This is some text inside of a div block.

text-size-2xhuge

This is some text inside of a div block.

text-size-xhuge

This is some text inside of a div block.

text--size-huge

This is some text inside of a div block.

text--size-xlarge

This is some text inside of a div block.

text-size-large

This is some text inside of a div block.

text-size-big

This is some text inside of a div block.

text-size-medium

This is some text inside of a div block.

text-size-regular

This is some text inside of a div block.

text-size-small

This is some text inside of a div block.

paragraph-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph-big

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

paragraph-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Buttons

button

button

with-icon

button

Components

blog-callout

Amara’s Life

As someone interested in the early days of computer science, I’m deeply curious about Roy Amara, who was among the very first computer engineers in the world. Details about his life are scant, but I’ve learned that after graduating from MIT he moved to Northern California and contributed to many groundbreaking projects.

While at Stanford Research Institute, he helped develop a first-of-its-kind mainframe computer for Bank of America. ERMA—for Electronic Recording Machine, Accounting—debuted in 1955 and was the prototype for all digital banking and credit-card processing machines that followed.

Amara spent 18 years at SRI, where he worked alongside Doug Engelbart, another hero of the early computer age who deserves his own sidebar!

He joined with Paul Baran, one of the architects of ARPANET, the earliest form of the Internet, and other deep thinkers of the era to launch the nonprofit think tank Institute for the Future. It was during this time that Amara made the proclamation known as Amara’s Law. As president of the IFTF, he launched the Ten-Year Forecast, the flagship research project of the IFTF, which has evolved into an annual conference. He also initiated one of the first studies of global climate change in 1978.

Amara died in Palo Alto in 2008 at 82 years old. The IFTF is still going strong today.

Color Palette

Background

bg-white

bg-dark

bg-blue

bg-blue-light

bg-green

Typography

text-color-dark

text-color-gray

text-color-white

text-color-blue

text-color-blue-light