zachleat’s Ugly Mug

Zach Leatherman

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 resizable 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.

Links

Use text-decoration-skip, 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, 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.

break for super long links that you want to wrap nicely: https://twitter.com/zachleat/status/890242957386944516

Primary links to demos and other main content: Go to the Style Guide Read the Randsom Note

Web Fonts

Using the Critical FOFT with Data URI approach. 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 (only if WOFF not supported)

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.

Hyphenation

Supercalifragilisticexpialidocious

Pneumonoultramicroscopicsilicovolcanoconiosis

OpenType Features

Ligatures

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

Ligatures disabled (for comparison)

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

The Lato webfont supports only the liga feature.

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.

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.

Action Links

Say hello on and GitHub.

Let my Feed sit idle in your RSS Reader.

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.

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.

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

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

Deprecation Warning

Warning

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