Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
511 lines (438 sloc) 19.1 KB
---
title: There are many Style Guides but this is Mine
layout: page
permalink: style-guide/
hasToc: true
---
<div class="toc">
<h2>Contents</h2>
<ul>
<li><a href="#colors">Colors</a></li>
<li><a href="#demos">Demos</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#web-fonts">Web Fonts</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#icons">Icons</a></li>
<li><a href="#lists">Lists</a></li>
<li><a href="#comments">Comments</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#media">Fluid Media</a></li>
<li><a href="#other">Other components</a></li>
</ul>
</div>
<p><em>I wrote a <a href="/web/now-with-style-guide/">blog post about this Style Guide.</a></em></p>
<h2 id="colors">Colors</h2>
<div class="swatches">
<div class="swatch" style="background-color: #3c603c; color: #fff;">Primary Green</div>
<div class="swatch" style="background-color: #7f917f; color: #fff;">Background Green</div>
<div class="swatch" style="background-color: #525252; color: #fff;">Text Gray</div>
<div class="swatch" style="background-color: #888; color: #fff;">Blockquote Text Gray</div>
<div class="swatch" style="background-color: #e9e9e9;">Border Gray</div>
<div class="swatch" style="background-color: #8ac7db;">Demo Text Blue</div>
<div class="swatch" style="background-color: #add8e6;">Demo Border Blue</div>
<div class="swatch" style="background-color: #4caf50; color: #fff;">Link Hover</div>
</div>
<h2 id="demos">Demos</h2>
<p class="livedemo top">This is a live demo example with the demonstration label on the top.</p>
<p class="livedemo">This is a live demo example with the demonstration label on the bottom.</p>
<p class="livedemo" data-demo-label="New Label Override">This is a live demo example with a label text override in the markup.</p>
<p class="livedemo livedemo-mixed" data-demo-label="New Label Override, Mixed Case">This is a live demo example with a label text override in the markup.</p>
<div class="livedemo square-top" data-demo-label="Square Top"><pre><code>// Code</code></pre></div>
<div class="livedemo top square-bottom" data-demo-label="Square Bottom"><pre><code>// Code</code></pre></div>
<div class="livedemo square-top square-bottom" data-demo-label="Both Square">Test</div>
<div class="livedemo top square-top square-bottom" data-demo-label="Both Square">Test</div>
<p class="livedemo livedemo-resizable">This is a resizable live demo example with the demonstration label on the bottom.</p>
<div class="livedemo top" data-demo-label="Nested Parent">
<p>This is a live demo example with the demonstration label on the bottom.</p>
<div class="livedemo top" data-demo-label="Nested Child">
<p>This is a live demo example with the demonstration label on the bottom.</p>
</div>
</div>
<h2 id="typography">Typography</h2>
<h3>Headers and Text</h3>
<div class="livedemo">
<h1>Top Level Header</h1>
<p>If you’re looking for a better <a href="#">web font loading solution</a>, 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.</p>
<h2>Second Level Header</h2>
<p>If you’re looking for a better <a href="#">web font loading solution</a>, 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.</p>
<h3>Third Level Header</h3>
<p>If you’re looking for a better <a href="#">web font loading solution</a>, 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.</p>
<h4>Fourth Level Header</h4>
<p>If you’re looking for a better <a href="#">web font loading solution</a>, 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.</p>
<h5>Fifth Level Header</h5>
<p>If you’re looking for a better <a href="#">web font loading solution</a>, 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.</p>
</div>
<p class="caption">First through fifth level headers with accompanying paragraph text. Sixth level headers aren’t in use on this site.</p>
<h4>Primary Title</h4>
<p>Stays left aligned to the viewport and full width when the layout goes to two columns.</p>
<div class="livedemo" data-demo-label="Primary Title">
<h1 class="primary-title">This is a Primary Title</h1>
</div>
<h3>Links</h3>
<p>Use <code>text-decoration-skip-ink</code>, fallback to <code>text-shadow</code>: <span class="livedemo"><a href="#">This is a test with hangy things. It has a p and a g and a y and a j and a q.</a></span></p>
<p>Only use <code>text-decoration-skip-ink</code>, no fallback: <span class="livedemo"><a href="#" class="exempt">This is a test with hangy things. It has a p and a g and a y and a j and a q.</a></span></p>
<p><em><strong>Update</strong>: renamed from <a href="https://www.chromestatus.com/feature/5631679087509504"><code>text-decoration-skip</code></a>.</em></p>
<div class="livedemo top square-bottom" data-demo-label="Break a Link (no Hyphens)">
<p style="width: 15em;">
<a href="https://twitter.com/zachleat/status/890242957386944516" class="break">https://twitter.com/zachleat/status/890242957386944516</a>
</p>
{% highlight html %}
<p style="width: 15em;">
<a href="https://twitter.com/zachleat/status/890242957386944516" class="break">https://twitter.com/zachleat/status/890242957386944516</a>
</p>
{% endhighlight %}
</div>
<div class="livedemo top square-bottom" data-demo-label="Primary Link">
<p class="primarylink"><a href="#">Read the Web Font Randsom Note</a></p>
{% highlight html %}
<p class="primarylink">
<a href="#">Read the Web Font Randsom Note</a>
</p>
{% endhighlight %}
</div>
<div class="livedemo top square-bottom" data-demo-label="Primary Demo Link">
<p class="primarylink primarylink-demo"><a href="#">Go to the Style Guide</a></p>
{% highlight html %}
<p class="primarylink primarylink-demo">
<a href="#">Go to the Style Guide</a>
</p>
{% endhighlight %}
</div>
<h3>Hyphenation</h3>
<div class="livedemo livedemo-resizable" style="width: 15em;">
<p>Supercalifragilisticexpialidocious</p>
<p>Pneumonoultramicroscopicsilicovolcanoconiosis</p>
</div>
<h3>Blockquotes</h3>
<div class="livedemo">
<p>Normal paragraph text.</p>
<blockquote>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.</blockquote>
<p>Normal paragraph text.</p>
</div>
<h3>Text Highlighted Header</h3>
<p>Works with any header level. Set any <code>background-color</code> and <code>color</code> on the element.</p>
<div class="livedemo">
<h1 class="text-highlight" style="background-color: #333; color: #fff">This is a Top Level Header that wraps to multiple lines to show how the background color wraps too.</h1>
</div>
<h2 id="web-fonts">Web Fonts</h2>
<p>Using the Critical FOFT with preload Strategy with a Lazy-loaded <code>font-display: optional</code> Polyfilled Fallback, otherwise known as <a href="/web/the-compromise/"><em>The Compromise</em></a>. At stage 1 (initial), a Lato subset is rendered and all bold and italic text below are faux rendered using <code>font-synthesis</code>. At stage 2, all Lato weights and styles have finished loading and are no longer faux rendered.</p>
<h3 class="cased">Fallback Fonts (Stage 0, pre-preload, if preload not supported, or empty-cache visit on IE/Edge)</h3>
<div class="livedemo"><p class="font-fallback">Normal roman text &#@$%. <strong>Bold text.</strong> <em>Italic text.</em> <strong><em>Bold Italic Text.</em></strong> <em><strong>More Bold Italic Text.</strong></em></p></div>
<h3 class="cased">Web Fonts (Stage 1, Lato Roman Subset)</h3>
<div class="livedemo"><p class="font-latosubset">Normal roman text &#@$%. <strong>Bold text.</strong> <em>Italic text.</em> <strong><em>Bold Italic Text.</em></strong> <em><strong>More Bold Italic Text.</strong></em></p></div>
<p class="caption">Hard to tell what’s faux and what isn’t? Use the <a href="https://github.com/filamentgroup/faux-pas">Faux-Pas bookmarklet</a> and it’ll show you.</p>
<h3 class="cased">Web Fonts (Stage 2, Lato Roman, Bold, Italic, Bold-Italic)</h3>
<div class="livedemo"><p>Normal roman text &#@$%. <strong>Bold text.</strong> <em>Italic text.</em> <strong><em>Bold Italic Text.</em></strong> <em><strong>More Bold Italic Text.</strong></em></p></div>
<h3>OpenType Features</h3>
<h4>Ligatures</h4>
<div class="livedemo top" data-demo-label="Ligatures">
<p style="font-size: 1.5em;">ff ffl fl fb ffb fh ffh fj ffj fk ffk ft fft tf tt ttf ti tti</p>
<div class="livedemo top" data-demo-label="Ligatures Disabled">
<p style="font-size: 1.5em; font-variant-ligatures: no-common-ligatures; font-feature-settings: 'liga' 0, 'clig' 0;">ff ffl fl fb ffb fh ffh fj ffj fk ffk ft fft tf tt ttf ti tti</p>
</div>
</div>
<h2 id="code">Code</h2>
<div class="livedemo">
<p>This is a simple <code>code element</code>. It’s usually alongside some other text.</p>
</div>
<div class="livedemo">
<pre>This is a simple pre element.</pre>
<pre><code>This is pre > code.</code></pre>
<pre><code>This is pre > code with a really long line length. It should wrap smartly without a scrollbar.</code></pre>
</div>
<div class="livedemo">
{% highlight css %}
.my-class {
this: is;
some: css;
}
{% endhighlight %}
{% highlight css 3 %}
.my-class {
this: is;
some: css;
this: line-is-highlighted;
}
{% endhighlight %}
{% highlight css 3 4 %}
.my-class {
this: is;
some: css;
this: line-is-added;
this: line-is-removed;
}
{% endhighlight %}
<p>Using Prism.js and <a href="https://github.com/11ty/eleventy-plugin-syntaxhighlight"><code>eleventy-plugin-syntaxhighlight</code></a> for line highlights.</p>
</div>
<h2 id="icons">Icons</h2>
<div class="livedemo">
{% include social.html %}
</div>
<h2 id="lists">Lists</h2>
<h3>Ordered List</h3>
<div class="livedemo">
<ol>
<li>Ordered list item.</li>
<li>Ordered list item.</li>
<li>Ordered list item.</li>
<li>Ordered list item.</li>
</ol>
</div>
<h3>Unordered List</h3>
<div class="livedemo">
<ul>
<li>Unordered list item.</li>
<li>Unordered list item.</li>
<li>Unordered list item.</li>
<li>Unordered list item.</li>
</ul>
</div>
<h3>Description List</h3>
<div class="livedemo">
<dl>
<dt>Description Term</dt>
<dd>Description Definition</dd>
<dt>Description Term</dt>
<dd>Description Definition</dd>
</dl>
</div>
<h3>Posts List</h3>
<div class="livedemo">
<ol class="posts">
<li class="subhed">Year</li>
<li><a href="#" class="posts-link">Blog post entry.</a></li>
<li><a href="#" class="posts-link">Blog post entry.</a></li>
<li><a href="#" class="posts-link">Blog post entry.</a></li>
</ol>
</div>
<h4>with Standard Counter (Counts up)</h4>
<div class="livedemo">
<ol class="posts posts-count posts-count-forward">
<li class="subhed">Sub-header</li>
<li><a href="#" class="posts-link">Blog post entry.</a></li>
<li><a href="#" class="posts-link">Blog post entry.</a></li>
<li><a href="#" class="posts-link">Blog post entry.</a></li>
</ol>
</div>
<h4>with Post Counter (Counts down)</h4>
<div class="livedemo">
<ol class="posts posts-count" style="counter-reset: start-from 4">
<li class="subhed">Year</li>
<li><a href="#" class="posts-link">Blog post entry.</a></li>
<li><a href="#" class="posts-link">Blog post entry.</a></li>
<li class="subhed">Year</li>
<li><a href="#" class="posts-link">Blog post entry.</a></li>
</ol>
</div>
<!-- <h3>Definition List</h3>
<div class="livedemo">
<dl>
<dt>Definition term list item.</dt>
<dd>Definition description list item.</dd>
<dt>Definition term list item.</dt>
<dd>Definition description list item.</dd>
<dt>Definition term list item.</dt>
<dd>Definition description list item.</dd>
</ol>
</div>
<p class="caption">Not yet in use.</p>
-->
<h3>Addendum Notes</h3>
<div class="livedemo">
<p>This is paragraph text with an addendum note attached<a href="#note-1" class="notes_link" id="link-note-1">1</a>.</p>
<h4>Appendix</h4>
<ol class="notes">
<li class="notes_note"><a id="note-1" href="#link-note-1" class="notes_linkback">Jump to the reference.</a> 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.</li>
</ol>
</div>
<h2 id="comments">Comments</h2>
<div class="livedemo">
<div class="static-comments">
<div class="static-comments-reply" id="comment-UNIQUE_ID_A">
<div class="static-comments-hed">
<img src="https://www.gravatar.com/avatar/e1899004c71c7043343196103e210be3?d=mm&amp;s=60" class="static-comments-img">
<h3 class="static-comments-title">zachleat</h3>
<em class="static-comments-date"><a href="#comment-UNIQUE_ID_A">26 Nov 2017 at 09:16PM</a></em>
</div>
<div class="static-comments-msg"><p>I think preload is great but think you should add info on how one can feature detect support for link rel=preload</p></div>
</div><!-- /static-comments-reply -->
</div><!-- /static-comments -->
</div>
<h3>Nested Replies</h3>
<div class="livedemo">
<div class="static-comments">
<div class="static-comments-reply" id="comment-UNIQUE_ID_B">
<div class="static-comments-hed">
<img src="https://www.gravatar.com/avatar/e1899004c71c7043343196103e210be3?d=mm&amp;s=60" class="static-comments-img">
<h3 class="static-comments-title">zachleat</h3>
<em class="static-comments-date"><a href="#comment-UNIQUE_ID_B">26 Nov 2017 at 09:16PM</a></em>
</div>
<div class="static-comments-msg"><p>I think preload is great but think you should add info on how one can feature detect support for link rel=preload</p></div>
<div class="static-comments-reply" id="comment-UNIQUE_ID_B2">
<div class="static-comments-hed">
<img src="https://www.gravatar.com/avatar/e1899004c71c7043343196103e210be3?d=mm&amp;s=60" class="static-comments-img">
<h3 class="static-comments-title">zachleat</h3>
<em class="static-comments-date"><a href="#comment-UNIQUE_ID_B2">26 Nov 2017 at 10:22PM</a></em>
</div>
<div class="static-comments-msg"><p>Shouldn’t need to feature detect. Fallbacks are built into the @font-face blocks.</p></div>
</div><!-- /static-comments-reply -->
</div><!-- /static-comments-reply -->
</div><!-- /static-comments -->
</div>
<h2 id="tables">Tables</h2>
<div class="livedemo">
<table>
<caption>NebraskaJS Membership</caption>
<thead>
<tr>
<th>Year</th>
<th>Membership</th>
<th>Change</th>
</tr>
</thead>
<tbody>
<tr>
<th>2009</th>
<td>Founded</td>
<td></td>
</tr>
<tr>
<th>2012</th>
<td>~220</td>
<td></td>
</tr>
<tr>
<th>2013</th>
<td>419</td>
<td><em class="better">(+199)</em> or <em class="worse">(-199)</em></td>
</tr>
<tr>
<th>2014</th>
<td>606</td>
<td><em class="better">(+187)</em> or <em class="worse">(-187)</em></td>
</tr>
<tr>
<th>2015</th>
<td>920</td>
<td><em class="better">(+314)</em> or <em class="worse">(-314)</em></td>
</tr>
<tr>
<th>2016</th>
<td>1127</td>
<td><em class="better">(+207)</em> or <em class="worse">(-207)</em></td>
</tr>
</tbody>
</table>
</div>
<h3>Compatibility Tables</h3>
<div class="livedemo">
<table class="compatibility">
<thead>
<tr>
<th>Browser</th>
<th>Feature 1</th>
<th>Feature 2</th>
<th>Feature 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Internet Explorer 8</td>
<td class="no">no</td>
<td class="yes">yes</td>
<td class="emulate">emulated</td>
</tr>
<tr>
<td>Google Chrome</td>
<td class="yes">yes</td>
<td class="no">no</td>
<td class="emulate">emulated</td>
</tr>
</tbody>
</table>
</div>
<h2 id="media">Fluid Media</h2>
<h3>Image</h3>
<div class="livedemo">
<picture>
<source type="image/webp" srcset="/web/img/posts/webp/0-original.webp">
<img src="/web/img/posts/webp/0-original.png" alt="Devtools Screenshot showing 18MB download">
</picture>
</div>
<h4>Full Width Image</h4>
<div class="livedemo">
<picture>
<source type="image/webp" srcset="/web/img/posts/webp/0-original.webp">
<img src="/web/img/posts/webp/0-original.png" alt="Devtools Screenshot showing 18MB download" class="primary">
</picture>
</div>
<h3>Video</h3>
<div class="livedemo">
<video controls preload="metadata" loop src="/web/img/posts/font-smooth/antialiasing.mp4">
Sorry, your browser doesn't support embedded videos. Try <a href="/web/img/posts/font-smooth/antialiasing.mp4">downloading it</a> instead.
</video>
</div>
<h3>Third Party Video</h3>
<div class="livedemo">
<div class="fluid-width-video-wrapper">
<iframe width="420" height="315" src="https://www.youtube.com/embed/NkVmhe-vvAo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<h3>Figures with Captions</h3>
<div class="livedemo">
<figure>
<img src="/web/img/posts/whmeetup/room.jpg" alt="">
<figcaption>Holy shit—I’m in the room.</figcaption>
</figure>
</div>
<h4>Standalone Caption</h4>
<div class="livedemo">
<span class="caption"><strong>Supported</strong> in Safari (Mobile and Desktop) and <strong>Not Supported</strong> in Chrome, Firefox (as of 54)</span>
</div>
<h2 id="other">Other components</h2>
<h3>Fixed Table of Contents</h3>
<p>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 <code>hasToc: true</code> to your front matter.</p>
{% highlight html %}
<div class="toc">
Table of Contents
</div>
{% endhighlight %}
<h3>Printed Page</h3>
<div class="livedemo">
<div class="printed-page">
<img src="/web/img/posts/whmeetup/seal.svg" onerror="this.src='/web/img/posts/whmeetup/seal.png'; this.onerror=null;" alt="The White House Official Seal">
<pre class="fullwidthexempt">
On April 17, we’re hosting community organizers, …
Megan
U.S. Chief Technology Officer and Assistant to the President
</pre>
</div>
</div>
<h3>Retweet to Share</h3>
<div class="livedemo">
<div class="retweettoshare retweettoshare-m">
<h3 class="retweettoshare_title">Retweet to share this post</h3>
<div class="retweettoshare_widget">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">★ A Comprehensive Guide to Font Loading Strategies <a href="https://t.co/5LI0HZINku">https://t.co/5LI0HZINku</a></p>&mdash; Zach Leatherman (@zachleat) <a href="https://twitter.com/zachleat/status/753220402134999042">July 13, 2016</a></blockquote>
</div>
</div>
</div>
<h3>Callout</h3>
<div class="livedemo">
<div class="callout">
<h3>Update</h3>
<p>Note that this approach has another consideration to be considered that was not originally documented here.</p>
</div>
<div class="callout callout-warning">
<h3>Warning</h3>
<p>This article is old and may contain information that is outdated, irrelevant, or—dare I say it—no longer accurate. Read with care!</p>
</div>
</div>
<!-- <h3>Full width Iframe</h3>
<p>Includes an <code>iframe-cover</code> element to prevent interactivity with the iframe.</p>
<div class="livedemo">
<div class="iframer fullwidth">
<div class="iframe-cover"></div>
<iframe class="iframe-big" src="https://www.zachleat.com/web/" scrolling="no"></iframe>
</div>
</div> -->