
A Pattern Apart
A List Apart's pattern library
Swatches
-
Text: #222
-
Link: #2455c3
-
Accent: #bb3825
-
Accent 2: #acba3c
-
Fill: #f0f0f0
Typography
- Body text: Georgia Pro · View at Webtype
- Body text: Georgia Pro Italic
- Bold body text: Georgia Pro Semibold
- Condensed body for mobile: Georgia Pro Condensed
- Sans-serif: Franklin ITC Pro · View at Webtype
- Sans-serif Bold: Franklin ITC Pro Bold
ala-slug #
<aside class="ala-slug">A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Explore our <a href="/articles">articles</a> or find out more <a href="/about">about us</a>.</aside>
Usage:
alpha-target #
<ol id="alpha-target" class="secondary-nav compressed alpha-container">
<li data-letter="a"><a href="/author/lealea">Lea Alcantara</a></li>
<li data-letter="a"><a href="/author/deanallen"> Dean Allen</a></li>
<li data-letter="a"><a href="/author/johnallsopp"> John Allsopp</a></li>
<li data-letter="a"><a href="/author/päralmqvist">Pär Almqvist</a></li>
<li data-letter="a"><a href="/author/brianalvey"> Brian Alvey</a></li>
<li data-letter="a"><a href="/author/stephenanderson">Stephen P. Anderson</a></li>
<li data-letter="a"><a href="/author/rachelandrew">Rachel Andrew</a></li>
<li data-letter="a"><a href="/author/Jake Archibald">Jake Archibald</a></li>
<li data-letter="a"><a href="/author/chrisarmstrong">Chris Armstrong</a></li>
<li data-letter="a"><a href="/author/lancearthur"> Lance Arthur</a></li>
<li data-letter="a"><a href="/author/farukates">Faruk Ateş</a></li>
</ol>
Usage:
alphabits #
<nav id="alphabits" class="alphabits">
<ol>
<li><a data-alphabit="a">a</a></li>
<li><a data-alphabit="b">b</a></li>
<li><a data-alphabit="c">c</a></li>
<li><a data-alphabit="d">d</a></li>
<li><a data-alphabit="e">e</a></li>
<li><a data-alphabit="f">f</a></li>
<li><a data-alphabit="g">g</a></li>
<li><a data-alphabit="h">h</a></li>
<li><a data-alphabit="i">i</a></li>
<li><a data-alphabit="j">j</a></li>
<li><a data-alphabit="k">k</a></li>
<li><a data-alphabit="l">l</a></li>
<li><a data-alphabit="m">m</a></li>
<li><a data-alphabit="n">n</a></li>
<li><a data-alphabit="o">o</a></li>
<li><a data-alphabit="p">p</a></li>
<li><a data-alphabit="q">q</a></li>
<li><a data-alphabit="r">r</a></li>
<li><a data-alphabit="s">s</a></li>
<li><a data-alphabit="t">t</a></li>
<li><a data-alphabit="u">u</a></li>
<li><a data-alphabit="v">v</a></li>
<li><a data-alphabit="w">w</a></li>
<li><a data-alphabit="x">x</a></li>
<li><a data-alphabit="y">y</a></li>
<li><a data-alphabit="z">z</a></li>
</ol>
<a id="previous-letters" class="arrow left">◀</a>
<a id="next-letters" class="arrow right">▶</a>
</nav>
Usage:
article-figure #
<!-- article wrapper: -->
<article class="article-layout hentry">
<div class="main-content">
<!-- the markup: -->
<figure>
<img src="http://alistapart.com/d/386/surveying_the_big_screen/img/screen_juliana.jpg" alt="Juliana Bicycles">
<figcaption>Juliana Bicycles treats content chunks more visually.</figcaption>
</figure>
</div>
</article>
Usage:

article-h2 #
<!-- article wrapper: -->
<article class="article-layout hentry">
<div class="main-content">
<!-- the markup: -->
<h2 id="section4">Tiling modular content</h2>
</div>
</article>
Usage:
Tiling modular content
article-h3 #
<!-- article wrapper: -->
<article class="article-layout hentry">
<div class="main-content">
<!-- the markup: -->
<h3 id="section1">But writing <em>sucks</em>.</h3>
</div>
</article>
Usage:
But writing sucks.
article-sidebar #
<!-- article wrapper: -->
<article class="article-layout hentry">
<div class="main-content">
<!-- the markup: -->
<aside class="sidebar">
<h1>Also in Issue № 386</h1>
<h2><a href="/article/offline-first">Designing Offline-First Web Apps</a></h2>
<p>by Alex Feyerke</p>
</aside>
</div>
</article>
Usage:
Topics
blog-summary-link-post #
<article class="blog-summary link-post">
<h1><a href="https://etherpad.mozilla.org/ep/pad/view/ro.gtMA3Rr4lYIam9OU/latest">The `picture` Element on Mozilla’s 2014 Roadmap</a></h1>
<p>The <code>picture</code> proposal is <a href="http://filamentgroup.com/lab/ricg_update/">back with a vengeance</a>—boasting new improvements for web developers and browser developers alike—and Mozilla is officially on board. The <code>picture</code> element is now on the Mozilla DOM Team’s roadmap for 2014.</p>
<footer class="byline">
<a href="https://etherpad.mozilla.org/ep/pad/view/ro.gtMA3Rr4lYIam9OU/latest">https://etherpad.mozilla.org</a>
</footer>
</article>
Usage:
The `picture` Element on Mozilla’s 2014 Roadmap
The picture
proposal is back with a vengeance—boasting new improvements for web developers and browser developers alike—and Mozilla is officially on board. The picture
element is now on the Mozilla DOM Team’s roadmap for 2014.
blog-summary-native #
<article class="blog-summary native-post">
<h1><a href="/blog/post/css-regions-considered-harmful">CSS Regions Considered Harmful</a></h1>
<footer class="byline">
by <a class="aside-author" href="/author/håkonwiumlie">Håkon Wium Lie</a>
<time class="pubdate updated" datetime="2014-01-22T12:02:48-05:00">January 22, 2014</time>
· <a class="comment-count" href="/blog/post/css-regions-considered-harmful#comments">23 Comments</a>
</footer>
<p>Håkon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer advocate for web standards. His last article in this magazine led directly to real fonts on the web. When Håkon speaks, whether we always agree or not, we listen. In today’s post, Håkon shares his opinion on CSS Regions.
</p>
</article>
Usage:
CSS Regions Considered Harmful
Håkon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer advocate for web standards. His last article in this magazine led directly to real fonts on the web. When Håkon speaks, whether we always agree or not, we listen. In today’s post, Håkon shares his opinion on CSS Regions.
No Comments (yet)
code-block #
<pre class=" language-css" id="snippet1">
<code class=" language-css">html { font-size: 10px; }
p { font-size: 1.4em; }</code>
</pre>
Usage:
html { font-size: 10px; }
p { font-size: 1.4em; }
code #
<p>You’re not limited to using it only on <code>width</code>; you can use it anywhere length values are permitted—and if you want to go really deep down the rabbit hole, you can also use <code>calc()</code> inside <code>calc()</code>.</p>
Usage:
You’re not limited to using it only on width
; you can use it anywhere length values are permitted—and if you want to go really deep down the rabbit hole, you can also use calc()
inside calc()
.
comment #
<ol class="article-comments" id="comments-parent" data-xid="2428459e1e1949d255759a592b479ece7fcfe534">
<li id="336130" data-count="1" class="comment member_132058">
<img src="http://alistapart.com/d/_made/pix/authors/avatars/social_login/twitter_60_60_c1.png" class="commenter-avatar" alt="" width="60" height="60">
<p class="comment-byline">
<span class="commenter-name">
<a href="http://t.co/iWhlal4gRh">James Young</a>
</span>
<time datetime=""><a href="/comments/a-list-together#336130">9:08 am on January 14, 2014</a></time>
</p>
<div class="comment-body">
<p>Great idea.</p>
</div>
<div class="comment-tools">
<a href="#" class="embed-link">Embed</a>
</div>
<div class="embed-comment">
Copy & paste the code below to embed this comment.
<textarea class="embed-code"><figure class="embedded-quote" id="ala-embedded-comment-336130"><blockquote> <p>Great idea.</p></blockquote><figcaption>— James Young on <a href="http://alistapart.com/comments/a-list-together#336130">A List Together</a></figcaption></figure>
<script async data-comment="336130" charset="utf-8" src="http://alistapart.com/d/_repo/site_assets/js/comment-embed.min.js"></script></textarea>
<div class="button-holder">
<input type="submit" name="cancel" value="Close" class="cancel-embed">
</div>
</div>
</li>
</ol>
Usage:
commenter-signin #
<ol class="article-comments" id="comments-parent" data-xid="2428459e1e1949d255759a592b479ece7fcfe534">
<li id="commenter-signin" class="commenter-signin ">
<h3>Got Something to Say?</h3>
<p>Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.</p>
<!-- I don't know why, but I had to move the login form above the login options so that EE would generate the current_url correctly. -->
<form id="sign-in-form" method="post" action="http://alistapart.com/">
<div class="hiddenFields">
<input type="hidden" name="XID" value="5896132d9890586697f3502d327fcd34c547ddc0">
<input type="hidden" name="ACT" value="9">
<input type="hidden" name="RET" value="http://alistapart.com/comments/embed-comments/a-list-together/login-return">
<input type="hidden" name="site_id" value="1">
</div>
<label for="login-name-here">
Username <small>(<a id="show-registration-form" href="/utilities/register">need an account?</a>)</small>
<input id="login-name-here" name="username" type="text" required="required">
</label>
<label for="login_password">
Password <small>(<a id="show-forgot-password-form" href="/utilities/forgot-password">forgotten it?</a>)</small>
<input id="login_password" name="password" type="password" required="required">
</label>
<input type="submit" value="Submit">
<p class="never-mind">(<a id="cancel-login" href="http://alistapart.com/comments/embed-comments/a-list-together/login-return">never mind</a>)</p>
</form>
<div id="login-buttons" class="active">
<h4>Sign in with:</h4>
<ul class="login-buttons">
<li class="twitter"><a href="http://alistapart.com/?ACT=59&provider=twitter&RET=http://alistapart.com/comments/embed-comments/a-list-together/login-return">Twitter</a></li><!--
--><li class="facebook"><a href="http://alistapart.com/?ACT=59&provider=facebook&RET=http://alistapart.com/comments/embed-comments/a-list-together/login-return">Facebook</a></li><!--
--><li class="ala"><a id="show-native-login" href="/login">A List Apart</a></li>
</ul>
</div>
<form id="forgot_password_form" method="post" action="http://alistapart.com/">
<div class="hiddenFields">
<input type="hidden" name="XID" value="76ccc70541379a43724f77192d7666a2a2745da1">
<input type="hidden" name="ACT" value="25">
<input type="hidden" name="RET" value="">
<input type="hidden" name="params_id" value="PUsaOMvJNQHrnAZXjypxEGoIk">
<input type="hidden" name="site_id" value="1">
</div>
<h4>We can reset that for you:</h4>
<label for="reset-email-here">
Your email address
<input id="reset-email-here" type="email" name="email">
</label>
<input type="submit" value="Reset Password">
<p class="never-mind">(<a id="cancel-password-reset" href="M600o93H7pQ09L8X1t49cHY01Z5j4TT91fGfr/login-return">never mind</a>)</p>
</form>
<form class="sign-in-form" id="register-form" method="post" action="http://alistapart.com/">
<div class="hiddenFields">
<input type="hidden" name="XID" value="fb217a25e24c21092cee390924205badff09bf36">
<input type="hidden" name="ACT" value="23">
<input type="hidden" name="RET" value="http://alistapart.com/comments/embed-comments/a-list-together/login-return">
<input type="hidden" name="params_id" value="MktzuQBwLlUPCEEUtgGhnYqOH">
<input type="hidden" name="site_id" value="1">
</div>
<h4>Create an account:</h4>
<label for="new-username-here">
New username
<input id="new-username-here" type="text" name="username" placeholder="jsmith" required="required">
</label>
<label for="new-screen-name">
New screen name
<input id="new-screen-name" name="screen_name" type="text" placeholder="Jane Smith" required="required">
</label>
<label for="new-email-here">
New email address
<input id="new-email-here" type="email" name="email" placeholder="you@yours.com" required="required">
</label>
<label for="new-password-here">
New password
<input id="new-password-here" type="password" name="password" required="required">
</label>
<label for="new-password-confirm-here">
Confirm new password
<input id="new-password-confirm-here" type="password" name="password_confirm" required="required">
</label>
<input type="submit" value="Submit">
<p class="never-mind">(<a id="cancel-registration" href="M600o93H7pQ09L8X1t49cHY01Z5j4TT91fGfr/login-return">never mind</a>)</p>
</form>
</li>
</ol>
Usage:
-
Got Something to Say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
content-minutiae #
<aside class="content-minutiae">
<h1 class="share-tools">Share This:</h1>
<ul class="share-tools">
<li><a href="http://twitter.com/intent/tweet?url=http://alistapart.com/blog/post/css-regions-considered-harmful&text=CSS+Regions+Considered+Harmful&via=alistapart">Twitter</a></li>
<li><a href="http://www.facebook.com/sharer.php?u=http://alistapart.com/blog/post/css-regions-considered-harmful&t=CSS+Regions+Considered+Harmful">Facebook</a></li>
<li><a href="https://plus.google.com/share?url=http://alistapart.com/blog/post/css-regions-considered-harmful">Google+</a></li>
</ul>
</aside>
Usage:
copyright #
<ul class="inline-items copyright">
<li>
<small>ISSN 1534-0295 · Copyright © 1998-2014 A List Apart & Our Authors</small>
<small><a href="/about/copyright">Permissions & Copyright</a> · <a href="http://webtype.com">Fonts by Webtype</a></small></li>
</ul>
Usage:
- ISSN 1534-0295 · Copyright © 1998-2014 A List Apart & Our Authors Permissions & Copyright · Fonts by Webtype
For people who make websites.
entry-header #
<header class="entry-header">
<figure class="wide-hero" data-picture="" data-alt="">
<img alt="" src="http://alistapart.com/d/_made/d/ALA386_bigscreen_300_960_483_60.jpg">
<div data-src="http://alistapart.com/d/_made/d/ALA386_bigscreen_300_480_242_60.jpg"></div>
<div data-src="http://alistapart.com/d/_made/d/ALA386_bigscreen_300_960_483_60.jpg" data-media="(min-width: 600px)"></div>
<div data-src="http://alistapart.com/d/_made/d/ALA386_bigscreen_300_1920_966_10.jpg" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="http://alistapart.com/d/_made/d/ALA386_bigscreen_300_960_483_10.jpg" alt=""></noscript>
<a href="/issue/386" class="issue-number"><span>Issue №</span> 386</a>
</figure>
<h1 class="entry-title">Surveying the Big Screen</h1>
<p class="entry-details">
by <a class="author" href="/author/mikepick">Mike Pick</a>
<time class="pubdate updated" datetime="2013-12-04T08:00:29-05:00">December 04, 2013</time>
<span class="optional-break">
Published in <a href="/topic/layout-grids">Layout & Grids</a>, <a href="/topic/mobile-multidevice">Mobile/Multidevice</a>, <a href="/topic/responsive-design">Responsive Design</a>
∙ <a class="comment-count" href="#comments">21 Comments</a>
</span>
</p>
</header>
Usage:

Surveying the Big Screen
by Mike Pick Published in Layout & Grids, Mobile/Multidevice, Responsive Design ∙ 21 Comments
figure-code #
<figure class="code" id="figure1">
<pre><code class="language-markup"><label for="firstname">First name:</label>
<input type="text" id="firstname" />
<label for="lastname">Last name:</label>
<input type="text" id="lastname" /></code></pre>
<figcaption><b>Figure 5.1:</b> Labels are visually associated by proximity with text input fields. In code, labels are programmatically connected using the <code><label></code> element, the <code>“for”</code> attribute, and the input field’s <code>“id”</code> attribute making the connection.</figcaption>
</figure>
Usage:
<label for="firstname">First name:</label>
<input type="text" id="firstname" />
<label for="lastname">Last name:</label>
<input type="text" id="lastname" />
<label>
element, the “for”
attribute, and the input field’s “id”
attribute making the connection.figure-full-width #
<figure class="full-width">
<p data-height="388" data-theme-id="0" data-slug-hash="BJrpg" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/valhead/pen/BJrpg'>Show/hide example</a> by Val Head (<a href='http://codepen.io/valhead'>@valhead</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>
<figcaption>A full-width figure with an embedded pen from CodePen.</figcaption>
</figure>
Usage:
See the Pen Show/hide example by Val Head (@valhead) on CodePen.
figure-image #
<figure id="figure4">
<img src="http://alistapart.com/d/389_fig55.png" alt="Figure 5.5: Drag-and-drop bookmarking tool requires a mouse">
<figcaption><b>Figure 5.5</b>: This feature, collecting bookmarks for related items, requires a mouse to drag and drop items into the list. A simple Add button would make this more accessible.</figcaption>
</figure>
Usage:

figure-quote #
<figure class="quote" id="figure6">
<blockquote>
<p><b>User:</b> I’d like to place an order. Here’s all my information.</p>
<p><b>Your site:</b> Thanks. Got it. We’ll send this to you within three days.</p>
</blockquote>
</figure>
Usage:
User: I’d like to place an order. Here’s all my information.
Your site: Thanks. Got it. We’ll send this to you within three days.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
inline-items #
<ul class="inline-items">
<li><a href="/about">About</a></li>
<li><a href="/authors">Authors</a></li>
<li><a href="/about/masthead">Masthead</a></li>
<li><a href="/about/style-guide">Style Guide</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about/sponsor">Sponsorships</a></li>
<li class="head-east-young-man">
Follow us:
<a href="/about/rss">RSS</a> ·
<a href="http://www.facebook.com/alistapart">Facebook</a> ·
<a href="http://www.twitter.com/alistapart">Twitter</a>
</li>
</ul>
Usage:
- About
- Authors
- Masthead
- Style Guide
- Contact
- Sponsorships
- Follow us: RSS · Facebook · Twitter
item-summary #
<article class="item-summary article">
<span class="column-name">Rachel Andrew <i>on</i> the Business of Web Dev</span>
<h1><a href="/column/your-side-project-as-insurance-policy">Your Side Project as Insurance Policy</a></h1>
<img src="http://alistapart.com/d/_made/pix/authors/uploads/photo_131322_60_60_c1.jpg" alt="">
<p>You’re never too young and healthy to make sure you can keep income coming in if sudden misfortune strikes. Often our livelihood depends on our physical abilities—such as typing code. Having a product as a side project can offer security if your daily work is disrupted by illness or injury.</p>
<footer class="byline">
<time class="pubdate updated" datetime="2014-01-02T08:00:37-05:00">January 02, 2014</time>
</footer>
</article>
Usage:
Your Side Project as Insurance Policy

You’re never too young and healthy to make sure you can keep income coming in if sudden misfortune strikes. Often our livelihood depends on our physical abilities—such as typing code. Having a product as a side project can offer security if your daily work is disrupted by illness or injury.
job-board #
<aside class="job-board">
<h4>Job Board</h4>
<script src="https://weworkremotely.com/jobs/random.js"></script>
<div class="job">
<a href="https://weworkremotely.com/jobs/314">Boyd, Caton and Grant Transportation Group, Inc. is looking for a Web Application Developer.</a>
</div>
<p class="board-link">Job listings via <a href="https://weworkremotely.com/?source=ala">We Work Remotely</a></p>
</aside>
Usage:
list-unordered #
<ul>
<li>Offers a clear argument, not just a list of tips and tricks.</li>
<li>Has a voice. Be bold, interesting, and human.</li>
<li>Is written for an audience of designers, developers, content strategists, information architects, or similar.</li>
<li>Is supported with convincing arguments, not just opinions. Fact-check, and cite sources where appropriate.</li>
<li>Follows our <a href="/about/style-guide">style guide</a>.</li>
</ul>
Usage:
- Offers a clear argument, not just a list of tips and tricks.
- Has a voice. Be bold, interesting, and human.
- Is written for an audience of designers, developers, content strategists, information architects, or similar.
- Is supported with convincing arguments, not just opinions. Fact-check, and cite sources where appropriate.
- Follows our style guide.
logo #
<a href="/"><img src="http://alistapart.com/components/assets/img/ala-logo-big.png" alt="A List Apart"></a>
Usage:
main-search #
<form class="main-search" method="post" action="http://alistapart.com/">
<div class="hiddenFields">
<input type="hidden" name="ACT" value="19">
<input type="hidden" name="XID" value="d18e3ba91a2ca607d705cd1e49eb9ab1da70ae80">
<input type="hidden" name="RES" value="">
<input type="hidden" name="meta" value="Ffseekua+rUE8oK/pEbUJWWxDpWf2BoUqFDIvQXjhXZvhxjFg5cTF6MP3Rxtt3h0gzE57XPQfXWvg0nj9Y1Ez9CgWwEnGRAY6knFpH19HNpmm1rhGuRr9ebnQRbp5gzUuAi3HijGA9yRR/+duNMWasUPa0S3ri5kufvn1cJZoXtDEJrakAi4Zi6hXmR7jAoMS32IN2Nnt91qJWBa39w1AJV8sd0qnhHhIINlcsb02vkMpG4eYA2mBCdk4rLBnTtcWm9lsqpzcAbw41a/SSQd1uwuL6FhRywCkesIprmpX/V39TUIrB+WBENjD8PfBNuRIPltmq7vNFIS4c6H83tmAdIBYa09YmGift5UU60UI5sm+GsyNXJMWvj4CA9wCX3q">
<input type="hidden" name="site_id" value="1">
</div>
<label for="search-keywords"><input id="search-keywords" type="search" name="keywords" placeholder="Search" aria-label="Search" value="" required="required"></label>
<label class="submit-search" for="submit-search"><input id="submit-search" name="submit" type="image" src="http://alistapart.com/components/assets/img/loup.png" alt="Submit"></label>
</form>
Usage:
masthead-list #
<article class="main-content">
<h1 class="basic-title">A Crew Apart</h1>
<ul class="masthead-list">
<li class="el-jefe">
<a href="/author/zeldman">L. Jeffrey Zeldman</a>
<span class="title">Founder & publisher, executive creative director</span>
</li>
<li>
<a href="/author/sboettcher">Sara Wachter-Boettcher</a>
<span class="title">Editor-in-chief</span>
</li>
<li>
<a href="/author/murtaugh">Tim Murtaugh</a>
<span class="title">Technical director</span>
</li>
<li>
<a href="http://twitter.com/mikepick">Mike Pick</a>
<span class="title">Creative director, designer</span>
</li>
<li>
<a href="/author/roseweisburd">Rose Weisburd</a>
<span class="title">Columns editor</span>
</li>
<li>
<a href="https://twitter.com/draftwerk">Sally Kerrigan</a>
<span class="title">Associate editor</span>
</li>
<li>
<a href="https://twitter.com/tinochop">Tina Lee</a>
<span class="title">Developmental editor</span>
</li>
<li>
<a href="/author/mconnelly">Marie Connelly</a>
<span class="title">Blog editor</span>
</li>
<li>
<a href="/author/kcornell">Kevin Cornell</a>
<span class="title">Illustrator</span>
</li>
<li>
<a href="/author/elynch">Erin Lynch</a>
<span class="title">Production manager</span>
</li>
<li>
<a href="/author/emeyer">Eric A. Meyer</a>
<span class="title">Semantician, statistician</span>
</li>
<li>
<a href="/author/andrewkirkpatrick">Andrew Kirkpatrick</a>
<span class="title">Technical editor (accessibility)</span>
</li>
<li>
<a href="/author/emarcotte">Ethan Marcotte</a>
<span class="title">Technical editor</span>
</li>
<li>
<a href="/author/matmarquis">Mat “Thundersnow” Marquis</a>
<span class="title">Technical editor</span>
</li>
<li>
<a href="/author/annadebenham">Anna Debenham</a>
<span class="title">Technical editor</span>
</li>
<li>
<b>Acquisitions</b>
<span class="title"><a href="/author/garann">Garann Means</a>, <a href="https://twitter.com/yeseniaa">Yesenia Perez-Cruz</a>, <a href="https://twitter.com/ttimsmith">Tim Smith</a></span>
</li>
<li>
<b>Columnists</b>
<span class="title"><a href="/author/rachelandrew">Rachel Andrew</a>, <a href="/author/cbowles">Cennydd Bowles</a>, <a href="/author/lgardner">Lyza Danger Gardner</a>, <a href="/author/mattgriffin">Matt Griffin</a>, <a href="/author/laurakalbag">Laura Kalbag</a>, <a href="/author/rainypixels">Nishant Kothary</a>, <a href="/author/kmcgrane">Karen McGrane</a>, <a href="/author/NickSherman">Nick Sherman</a>, <a href="/author/dsleight">David Sleight</a>, <a href="/author/thew3c">the W3C</a></span>
</li>
</ul>
</article>
Usage:
A Crew Apart
- L. Jeffrey Zeldman Founder & publisher, executive creative director
- Sara Wachter-Boettcher Editor-in-chief
- Tim Murtaugh Technical director
- Mike Pick Creative director, designer
- Rose Weisburd Columns editor
- Sally Kerrigan Associate editor
- Tina Lee Developmental editor
- Marie Connelly Blog editor
- Kevin Cornell Illustrator
- Erin Lynch Production manager
- Eric A. Meyer Semantician, statistician
- Andrew Kirkpatrick Technical editor (accessibility)
- Ethan Marcotte Technical editor
- Mat “Thundersnow” Marquis Technical editor
- Anna Debenham Technical editor
- Acquisitions Garann Means, Yesenia Perez-Cruz, Tim Smith
- Columnists Rachel Andrew, Cennydd Bowles, Lyza Danger Gardner, Matt Griffin, Laura Kalbag, Nishant Kothary, Karen McGrane, Nick Sherman, David Sleight, the W3C
promo-holder #
<aside class="promo-holder">
<ul class="partner-promos">
<li>
<a href="http://abookapart.com">
<img src="http://alistapart.com/components/assets/img/promo_aba.png" alt="">
<h1>A Book Apart</h1>
<p>Mobile First & Responsive Web Design bundle.</p>
<p>Buy both and save!</p>
<p class="arrow">Order now</p>
</a>
</li><!--
--><li>
<a href="http://aneventapart.com">
<img src="http://alistapart.com/components/assets/img/promo_aea.png" alt="">
<h1>An Event Apart</h1>
<p>Three days of design, code, and content for people who make websites.</p>
<p class="arrow">See the 2014 schedule</p>
</a>
</li>
</ul>
</aside>
Usage:
sponsor-the-deck #
<aside class="the-deck">
<div class="deck-inner">
<script>
//<![CDATA[
(function(id) {
document.write('<script type="text/javascript" src="' +
'http://www.northmay.com/deck/deck' + id + '_js.php?' +
(new Date().getTime()) + '"></' + 'script>');
})("AL");
//]]>
</script><script type="text/javascript" src="http://www.northmay.com/deck/deckAL_js.php?1390731516866"></script><a href="https://www.atlassian.com/git?utm_source=the-deck&utm_medium=banner&utm_content=learn-the-basics-workflow&utm_campaign=git-microsite"><img class="ad" alt="Atlassian" src="http://connect.decknetwork.net/i/atlassian_guide.png" border="0" width="120" height="90"></a><p class="ads">Learn the basics & find the right development workflow with our <a href="https://www.atlassian.com/git?utm_source=the-deck&utm_medium=banner&utm_content=learn-the-basics-workflow&utm_campaign=git-microsite">free Git Tutorials</a>.</p>
<p><a href="http://www.coudal.com/deck/">Ad via The Deck</a></p>
</div>
</aside>
Usage:
sponsor-top #
<div class="sponsor-top" style="display: block;">
<a href="http://srv.buysellads.com/ads/click/x/GTND4K77CTSDKKJUFT7LYKQIF6YDK2JMCKSD5Z3JCKAIT2JMFTAD52JKC67ILK3NCY7DTK3EHJNCLSIZZRCCLSIZ" class="sponsor-logo" data-width="170px" data-height="45px" data-standardbg="//assets.servedby-buysellads.com/p/manage/asset/id/7354" data-hiresbg="//assets.servedby-buysellads.com/p/manage/asset/id/7355" style="height: 45px; width: 170px; background-image: url(http://assets.servedby-buysellads.com/p/manage/asset/id/7355);">
</a>
<p>
<span class="sponsor-intro">Brought to you by:</span>
<a class="sponsor-name" href="http://srv.buysellads.com/ads/click/x/GTND4K77CTSDKKJUFT7LYKQIF6YDK2JMCKSD5Z3JCKAIT2JMFTAD52JKC67ILK3NCY7DTK3EHJNCLSIZZRCCLSIZ">MailChimp</a><span class="sponsor-extended">, already used by more than 5 million people to design and send email marketing campaigns. Join them today.</span>
<a class="sponsor-url" href="http://srv.buysellads.com/ads/click/x/GTND4K77CTSDKKJUFT7LYKQIF6YDK2JMCKSD5Z3JCKAIT2JMFTAD52JKC67ILK3NCY7DTK3EHJNCLSIZZRCCLSIZ">MailChimp.com</a>
</p>
</div>
Usage:
Brought to you by: MailChimp, already used by more than 5 million people to design and send email marketing campaigns. Join them today. MailChimp.com
topic #
<article class="item-summary topic">
<figure><a href="/topics/code"><img src="http://alistapart.com/d/topic-illustrations/code.jpg" alt=""></a></figure>
<h1><a href="/topics/code">Code</a> <!--(5 articles)--></h1>
<p>Front and back end development for the web, mainly using open web standards. Markup, style, scripting, and server-side techniques and technologies. Cross-browser HTML, CSS, and JavaScript. Frameworks and preprocessors. Creating websites and applications. Optimization and performance. Hacks and workarounds.</p>
<h2>Includes</h2>
<ul>
<li>
<a href="/topic/application-development">
Application Development
<span>14</span>
</a>
</li>
<li>
<a href="/topic/browsers">
Browsers
<span>84</span>
</a>
</li>
<li>
<a href="/topic/css">
CSS
<span>125</span>
</a>
</li>
<li>
<a href="/topic/html">
HTML
<span>141</span>
</a>
</li>
<li>
<a href="/topic/javascript">
JavaScript
<span>89</span>
</a>
</li>
<li>
<a href="/topic/the-server-side">
The Server Side
<span>30</span>
</a>
</li>
</ul>
</article>
Usage:

Code
Front and back end development for the web, mainly using open web standards. Markup, style, scripting, and server-side techniques and technologies. Cross-browser HTML, CSS, and JavaScript. Frameworks and preprocessors. Creating websites and applications. Optimization and performance. Hacks and workarounds.
Includes
wide-hero #
<figure class="wide-hero" data-picture="" data-alt=""><img alt="" src="http://alistapart.com/d/_made/d/ALA388_alisttogether_300_960_432_60.jpg">
<div data-src="http://alistapart.com/d/_made/d/ALA388_alisttogether_300_480_216_60.jpg"></div>
<div data-src="http://alistapart.com/d/_made/d/ALA388_alisttogether_300_960_432_60.jpg" data-media="(min-width: 600px)"></div>
<div data-src="http://alistapart.com/d/_made/d/ALA388_alisttogether_300_1920_863_10.jpg" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></div>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript><img src="http://alistapart.com/d/_made/d/ALA388_alisttogether_300_960_432_10.jpg" alt=""></noscript>
<a class="issue-number" href="/issue/388"><span>Issue №</span> 388</a>
</figure>
Usage:
James Young
Great idea.