This style guide is a living document for 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.
“Deep water blue”:
Grey:
I'm moving away from using this CSS framework and using CSS Grid more often. Most of the primary content on my site didn't need to use columns anyway.
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.
The primary type is black and uses font Georgia.
I no longer change the base font-size on the html element. My current understanding is this is better for accessibility when people have customized their browser's default font size. I try to use rem-based font sizes throughout the page so text will scale to the viewer's settings.
I use the browser default size (usually 16px) and set text based on that. For example, when I want 20px text, I set it as font-size: 1.25rem; (16 * 1.25 = 20)
The body element effectively sets the font-size to 20px based on that browser default. It also sets a base line-height that other elements inherit.
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.
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.
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.
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.
The example below also includes h-cite microformats2 classes.
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
— , Praesent vel ex sed magna
Maecenas nec metus sit amet enim sodales viverra sed at diam. Mauris iaculis rutrum
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
— , Praesent vel ex sed magna
Multi- and single-line comments.
John Doe – John Doe mentioned this –