Zach’s ugly mug (his face)

Zach Leatherman

There are many Style Guides but this is Mine

I wrote a blog post about this Style Guide.

Colors

Primary Green
Background Green
Text Gray
Blockquote Text Gray
Border Gray
Demo Text Blue
Demo Border Blue
Link Hover

Demos

This is a live demo example with the demonstration label on the top.

This is a live demo example with the demonstration label on the bottom.

This is a live demo example with a label text override in the markup.

// Code
// Code
Test
Test

This is a resizable live demo example with the demonstration label on the bottom.

This is a live demo example with the demonstration label on the bottom.

This is a live demo example with the demonstration label on the bottom.

Typography

Headers and Text

Top Level Header

If you’re looking for a better web font loading solution, I’ve written a Comprehensive Guide to Font Loading Strategies which includes a bunch of different font loading approaches that range from the simple to advanced.

Second Level Header

If you’re looking for a better web font loading solution, I’ve written a Comprehensive Guide to Font Loading Strategies which includes a bunch of different font loading approaches that range from the simple to advanced.

Third Level Header

If you’re looking for a better web font loading solution, I’ve written a Comprehensive Guide to Font Loading Strategies which includes a bunch of different font loading approaches that range from the simple to advanced.

Fourth Level Header

If you’re looking for a better web font loading solution, I’ve written a Comprehensive Guide to Font Loading Strategies which includes a bunch of different font loading approaches that range from the simple to advanced.

Fifth Level Header

If you’re looking for a better web font loading solution, I’ve written a Comprehensive Guide to Font Loading Strategies which includes a bunch of different font loading approaches that range from the simple to advanced.

First through fifth level headers with accompanying paragraph text. Sixth level headers aren’t in use on this site.

Primary Title

Stays left aligned to the viewport and full width when the layout goes to two columns.

This is a Primary Title

Links

Use text-decoration-skip-ink, fallback to text-shadow: This is a test with hangy things. It has a p and a g and a y and a j and a q.

Only use text-decoration-skip-ink, no fallback: This is a test with hangy things. It has a p and a g and a y and a j and a q.

Update: renamed from text-decoration-skip.

https://twitter.com/zachleat/status/890242957386944516

<p style="width: 15em;">
<a href="https://twitter.com/zachleat/status/890242957386944516" class="break">https://twitter.com/zachleat/status/890242957386944516</a>
</p>
<p class="primarylink">
<a href="#">Read the Web Font Randsom Note</a>
</p>
<p class="primarylink primarylink-demo">
<a href="#">Go to the Style Guide</a>
</p>

Hyphenation

Supercalifragilisticexpialidocious

Pneumonoultramicroscopicsilicovolcanoconiosis

Blockquotes

Normal paragraph text.

Progressive enhancement is a touchy subject. It can be hard to discuss dispassionately because, like accessibility, it’s often framed as an issue of empathy and compassion.

Normal paragraph text.

Text Highlighted Header

Works with any header level. Set any background-color and color on the element.

This is a Top Level Header that wraps to multiple lines to show how the background color wraps too.

Web Fonts

Using the Critical FOFT with preload Strategy with a Lazy-loaded font-display: optional Polyfilled Fallback, otherwise known as The Compromise. At stage 1 (initial), a Lato subset is rendered and all bold and italic text below are faux rendered using font-synthesis. At stage 2, all Lato weights and styles have finished loading and are no longer faux rendered.

Fallback Fonts (Stage 0, pre-preload, if preload not supported, or empty-cache visit on IE/Edge)

Normal roman text &#@$%. Bold text. Italic text. Bold Italic Text. More Bold Italic Text.

Web Fonts (Stage 1, Lato Roman Subset)

Normal roman text &#@$%. Bold text. Italic text. Bold Italic Text. More Bold Italic Text.

Hard to tell what’s faux and what isn’t? Use the Faux-Pas bookmarklet and it’ll show you.

Web Fonts (Stage 2, Lato Roman, Bold, Italic, Bold-Italic)

Normal roman text &#@$%. Bold text. Italic text. Bold Italic Text. More Bold Italic Text.

OpenType Features

Ligatures

ff ffl fl fb ffb fh ffh fj ffj fk ffk ft fft tf tt ttf ti tti

ff ffl fl fb ffb fh ffh fj ffj fk ffk ft fft tf tt ttf ti tti

Code

This is a simple code element. It’s usually alongside some other text.

This is a simple pre element.
This is pre > code.
This is pre > code with a really long line length. It should wrap smartly without a scrollbar.
.my-class {
this: is;
some: css;
}
.my-class {
this: is;
some: css;
this: line-is-highlighted;
}
.my-class {
this: is;
some: css;
this: line-is-added;
this: line-is-removed;
}

Using Prism.js and eleventy-plugin-syntaxhighlight for line highlights.

Icons

Lists

Ordered List

  1. Ordered list item.
  2. Ordered list item.
  3. Ordered list item.
  4. Ordered list item.

Unordered List

  • Unordered list item.
  • Unordered list item.
  • Unordered list item.
  • Unordered list item.

Description List

Description Term
Description Definition
Description Term
Description Definition

Posts List

with Standard Counter (Counts up)

with Post Counter (Counts down)

Addendum Notes

This is paragraph text with an addendum note attached1.

Appendix

  1. Jump to the reference. FOUC also refers to the scenario when your page renders before your CSS has successfully applied so I think it’d be better to stick with FOUT to avoid confusion.

Comments

I think preload is great but think you should add info on how one can feature detect support for link rel=preload

Nested Replies

I think preload is great but think you should add info on how one can feature detect support for link rel=preload

Shouldn’t need to feature detect. Fallbacks are built into the @font-face blocks.

Tables

NebraskaJS Membership
YearMembershipChange
2009Founded
2012~220
2013419(+199) or (-199)
2014606(+187) or (-187)
2015920(+314) or (-314)
20161127(+207) or (-207)

Compatibility Tables

BrowserFeature 1Feature 2Feature 3
Internet Explorer 8noyesemulated
Google Chromeyesnoemulated

Fluid Media

Image

Devtools Screenshot showing 18MB download

Full Width Image

Devtools Screenshot showing 18MB download

Video

Third Party Video

Figures with Captions

Holy shit—I’m in the room.

Standalone Caption

Supported in Safari (Mobile and Desktop) and Not Supported in Chrome, Firefox (as of 54)

Other components

Fixed Table of Contents

We’re only showing the source code here because this component is already in use on this page and there can be only one (Highlander). Make sure you add hasToc: true to your front matter.

<div class="toc">
Table of Contents
</div>

Printed Page

The White House Official Seal
On April 17, we’re hosting community organizers, …

Megan
U.S. Chief Technology Officer and Assistant to the President

Retweet to Share

Retweet to share this post

Callout

Update

Note that this approach has another consideration to be considered that was not originally documented here.

Warning

This article is old and may contain information that is outdated, irrelevant, or—dare I say it—no longer accurate. Read with care!