This style guide is for documenting the design elements used on gRegorLove.com.

I have found that the amount of CSS can easily grow out of control as new design elements are added. I am hoping to switch to a more style-guide-driven process to reduce that.

This style guide uses the same CSS as the rest of the site, so should reflect the current design elements with minimal maintenance.

This page is very much in-progress.


Logo

gRegorLove little g big R

Color Palette

“Deep water blue”:

#3b5564

Grey:

#888

Navigation


Grid

Skeleton boilerplate is currently used, so there is a twelve-column grid. The container width has been limited to 650 pixels wide—a legacy width that still needs to be converted to ems.

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One

Typography

The primary type is black and uses font Georgia.

The html element effectively sets the base font-size to 10px for easy rem-based font-sizes throughout the page.

The body element then effectively sets the font-size to 20px (2em).

The body element also sets a base line-height that other elements inherit.


Headings

The h1 through h6 elements are used for headings.

Heading elements should be used to create a logical document outline, regardless of their visual appearance. Each heading element has a corresponding Greek-letter class name so the visual appearance can be changed for any heading.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1 with class “alpha”

Heading 1 with class “beta”

Heading 1 with class “gamma”

Heading 1 with class “delta”

Heading 1 with class “epsilon”

Heading 1 with class "zeta"


Text

The primary text content is intended to be approximately 75 characters per line, to aid readability.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium sit amet lacus at vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum consequat vehicula est non luctus. Phasellus facilisis sit amet orci in efficitur. Proin tempor nunc pellentesque, pretium metus eget, cursus quam. Nam nec tortor molestie, suscipit enim et, imperdiet purus. Vivamus sollicitudin tellus nibh, vitae pellentesque libero interdum hendrerit. Etiam vitae vehicula diam. Aliquam aliquam convallis volutpat. Vivamus blandit varius massa at finibus. Nam ac velit non nibh aliquet semper. Cras fringilla, augue ac bibendum commodo, risus diam blandit purus, eu vulputate enim sem sit amet quam. Vestibulum quis egestas odio. Nunc quam arcu, pulvinar eget magna eget, semper hendrerit ex. Proin dictum ante nec elit mattis congue.

Vivamus maximus sagittis molestie. Praesent tincidunt pretium lectus a laoreet. Praesent vel ex sed magna condimentum accumsan. Pellentesque nec dapibus orci. Vestibulum vel diam eu neque luctus sodales ac at massa. Quisque lorem nisi, tempor ut euismod vitae, dignissim nec quam. Phasellus mollis urna vitae nunc facilisis, ut sollicitudin orci placerat.

Maecenas nec metus sit amet enim sodales viverra sed at diam. Mauris iaculis rutrum magna eu ullamcorper. Aliquam ac cursus nibh. Sed in finibus nunc. Etiam id aliquam nunc. Quisque eu justo iaculis, condimentum lorem et, fermentum sem. Nullam elementum facilisis vulputate. Nulla fermentum ligula non neque ultrices, id pretium augue hendrerit. Proin gravida sit amet nisi ac venenatis. Quisque nec nisl a risus euismod tincidunt ac eget sem. Donec ex tellus, accumsan in massa eget, molestie pharetra arcu.


Unordered Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Pellentesque pretium sit amet

Ordered Lists

  1. Phasellus facilisis sit amet
  2. Proin tempor nunc pellentesque
  3. Proin dictum ante nec elit

Quotes

The blockquote element adds more left/right margins to offset it from regular text.

The cite element should be used around the title of the work being quoted, nested in the blockquote. Author name should appear before the title with a comma separating it. Prefix the author name and title of work with an em-dash.

Lorem ipsum dolor sit amet:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium sit amet lacus at vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum consequat vehicula est non luctus. Phasellus facilisis sit amet orci in efficitur. Proin tempor nunc pellentesque, pretium metus eget, cursus

Author Name, Praesent vel ex sed magna

Maecenas nec metus sit amet enim sodales viverra sed at diam. Mauris iaculis rutrum


Pull Quotes

Use the .pull class on the blockquote element for a larger pull quote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium sit amet lacus at vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum consequat vehicula est non luctus. Phasellus facilisis sit amet orci in efficitur. Proin tempor nunc pellentesque, pretium metus eget, cursus

Author Name, Praesent vel ex sed magna

Comments and Reply Contexts

Multi- and single-line comments.

John Doe John Doe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu felis lacus. Nunc suscipit mattis facilisis. Integer nibh nunc, pharetra at dapibus non, malesuada eu massa. Proin sollicitudin congue risus in feugiat. Aliquam venenatis lectus at maximus auctor. In faucibus metus vel orci tincidunt lobortis. Sed semper, nunc sed tempor vehicula, mauris massa blandit tortor, sed aliquam justo mauris suscipit nibh. Vivamus pretium ac metus vitae lacinia.
John Doe John Doe mentioned this –