This is Forge, our interface framework and pattern library. It defines a set of base styles and common patterns shared throughout our website. It's a strong foundation for building beautiful interfaces.

Forge was built for our internal needs at DoSomething.org, but it could also work for your organization. Feel free to fork our GitHub repository and use it as a starting point for your own pattern library, or read more about why we open-source our code.

Base Styles

Content is the basis for our design, so we need a strong typographic foundation. We define base HTML classes with comfortable font-size and spacing for readability, and a clear information hierarchy between elements.

Tags for inline text elements are given default styles. Adjacent
paragraphs are given top margin spacing, and headings following paragraph
text have increased spacing.

DoSomething.org makes the world suck less. One of the largest orgs
for young people and social change, our members tackle campaigns that impact every cause,
from poverty to violence to the environment to literally everything else.1
Any cause, anytime, anywhere. *mic drop*

<p>DoSomething.org <strong>makes the world suck less</strong>. One ofthe <mark>largest orgs
for young people and social change</mark>, our members tackle campaigns that impact every cause,
from poverty to violence tothe environment to <em>literally</em> everything else.<sup>1</sup>
Any cause, anytime, anywhere. *mic drop*</p>
<p>This is a <a href="#">link</a>, anda <a href="#" class="secondary">secondary link</a>.</p>

For consistency, we try to use these four grayscale values throughout our interfaces.

Off Black($off-black) …

Dark Gray($dark-gray) …

Medium Gray($med-gray) …

Light Gray($light-gray) …

They're not part of our brand, but we use these guys in special cases.

Errors($error-color) …

Tip: Double-click on a swatch to switch between color formats.

Grid System

We use Susy 2 to build our interface on a fluid grid. This promotes consistency and provides rules for layouts to comfortably expand and contract in a multi-device world. Our grid is split up into sixteen columns, with a 24 pixel static gutter between columns.

Components

We don't want to re-invent the wheel. Re-usable interface patterns are catalogued within Forge to promote consistency throughout our interfaces and minimize code bloat. We start by defining atomic components. These are the smallest building blocks of our interfaces.

:hover Suble hover state (will not be displayed on touch interfaces)Example Button:focus Focus state for users navigating the page using tab keys.Example Button:active "Pushed" button stateExample Button.is-disabled Disabled (non-interactive) button state. Consider removing button from interface if not necessary to avoid confusion.Example Button.is-loading AJAX loading animation. Used when loading results inline.Example Button.-secondary Should be used if not the main call-to-action on a page.Example Button.-tertiary Used to de-emphasize button (for example, a "cancel" option), but still show inline with other fields.Example Button

Checkboxes and radio boxes. Progressively enhanced to look beautiful on modern browsers.
Older browsers (such as Internet Explorer 8) will see platform-native controls.

Some checkboxes

Choose this option.Choose that option.Choose this unreasonably long-winded and ultimately pointless option.

Some radio buttons

Choose one option.Choose the other option.

<labelclass="field-label">Some checkboxes</label><divclass="form-item"><labelclass="option -checkbox"><inputcheckedtype="checkbox"id="option1"><spanclass="option__indicator"></span><span>Choose this option.</span></label><labelclass="option -checkbox"><inputtype="checkbox"id="option2"><spanclass="option__indicator"></span><span>Choose that option.</span></label><labelclass="option -checkbox"><inputtype="checkbox"id="option3"><spanclass="option__indicator"></span><span>Choose this unreasonably long-winded and ultimately pointless option.</span></label></div><labelclass="field-label">Some radio buttons</label><divclass="form-item"><labelclass="option -radio"><inputcheckedtype="radio"name="choice"id="choice1"><spanclass="option__indicator"></span><span>Choose one option.</span></label><labelclass="option -radio"><inputtype="radio"name="choice"id="choice2"><spanclass="option__indicator"></span><span>Choose the other option.</span></label></div>

:focus Field is selected for text input.:disabled Field is disabled, and it's value can't be interacted with..-search Search field appearance..is-loading Loading indicator, for example while fetching an AJAX response..has-error Error state, used for validation issues.

Status message styles. These should be used to provide feedback to the user for
events that occur outside the normal application flow (such as application errors).
Close button is added using JavaScript. See system-messages.js.

There's something I need to tell you.

.-error Used to display errors. Be careful not to blame the user for a mistake.

Did we kill it on something? This is the perfect component for showcasing a large photo with a bit of text attached.
This could be a great media snapshot, celebrity endorsment or even a member callout.

Grand Prize

Look at this cat. How'd she get so god-damned cute?
What gives her the right? Who does she think she is?

<articleclass="figure -left -center"><divclass="figure__media"><imgalt="winning cat"src="/styleguide/assets/placeholder.jpg" /></div><divclass="figure__body"><h2class="heading -emphasized">Grand Prize</h2><p><strong>Look at this cat.</strong> How'd she get so god-damned cute?
What gives her the right? Who does she think she is?</p></div></article>

A figure block usually contains an image with a title and a description.

Teen Vogue featured Comeback Clothes as one of the ways
fashion brands like H&M are taking eco-chic to the next level.

.-left Show figure's media to the left of the description.

Teen Vogue featured Comeback Clothes as one of the ways
fashion brands like H&M are taking eco-chic to the next level.

.-left.-center Show a figure's media to the left of the description, with the text vertically centered.

Teen Vogue featured Comeback Clothes as one of the ways
fashion brands like H&M are taking eco-chic to the next level.

.-right Show figure's media to the right of the description.

Teen Vogue featured Comeback Clothes as one of the ways
fashion brands like H&M are taking eco-chic to the next level.

.-medium Set figure's media to a fixed "medium" size.

Teen Vogue featured Comeback Clothes as one of the ways
fashion brands like H&M are taking eco-chic to the next level.

<articleclass="figure {{modifier_class}}"><divclass="figure__media"><imgalt="kitten overlords"src="/styleguide/assets/placeholder.jpg" /></div><divclass="figure__body"><b>Teen Vogue</b> featured Comeback Clothes as one of the ways
fashion brands like H&amp;M are taking eco-chic to the next level.
</div></article>

A "triad" gallery shows three items per row. Galleries can contain items of
any type but work particularly well with Figures and Tiles. May optionally
include a heading within .gallery__heading.

Gallery Heading

Teen Vogue featured Comeback Clothes as one of the ways
fashion brands like H&M are "taking eco-chic to the next level."

Seventeen ran an Earth Day story about recycling old fabrics
through DoSomething.org and H&M's Comeback Clothes.

Nylon urged readers to clean out their closets and do good for
the planet by recycling old clothes at H&M.

.-aligned Tiles with image flushed to top and minimum height to force content below to line up with adjacent tiles since image dimensions can vary. Defaults to 75px tall. This should be overridden when necessary.

Gallery Heading

Teen Vogue featured Comeback Clothes as one of the ways
fashion brands like H&M are "taking eco-chic to the next level."

Seventeen ran an Earth Day story about recycling old fabrics
through DoSomething.org and H&M's Comeback Clothes.

Nylon urged readers to clean out their closets and do good for
the planet by recycling old clothes at H&M.

<ulclass="gallery -duo"><divclass="gallery__heading"><h2>Gallery Heading</h2></div><li><articleclass="figure -left"><divclass="figure__media"><imgalt="kitten overlords"src="/styleguide/assets/placeholder-small.jpg" /></div><divclass="figure__body"><h3><ahref="http://twitter.com/harryshumjr">@HarryShumJr</a></h3><p>
Do you have stained or ripped clothes you don't wear? Recycle them
w/ <ahref="http://twitter.com/dosomething">@DoSomething</a><ahref="http://twitter.com/hmusa">http://dsorg.us/CLOTHES</a></p></div></article></li><li><articleclass="figure -left"><divclass="figure__media"><imgalt="kitten overlords"src="/styleguide/assets/placeholder-small.jpg" /></div><divclass="figure__body"><h3><ahref="http://twitter.com/harryshumjr">@HarryShumJr</a></h3><p>
Do you have stained or ripped clothes you don't wear? Recycle them
w/ <ahref="http://twitter.com/dosomething">@DoSomething</a><ahref="http://twitter.com/hmusa">http://dsorg.us/CLOTHES</a></p></div></article></li></ul>

Tips

Find Maxwell

Give Him 'Fee

<sectionclass="tabs js-tabs"><ahref="#"data-modal-href="#modal-tips-during"class="tabs__modal-toggle">View Tips</a><h4class="visually-hidden">Tips</h4><divclass="wrapper"><navclass="tabs__menu"><ulclass="waypoints"><liclass="is-active"><ahref="#tip-1"data-tab="1">Find Maxwell</a></li><li><ahref="#tip-2"data-tab="2">Give Him 'Fee</a></li></ul></nav><ulclass="tabs__body"><liid="tip-1"class="tabs__tab"><h5class="tabs__title">Find Maxwell</h5><p>He's drinking 'fee. But he needs some more 'fee.</p></li><liid="tip-2"class="tabs__tab"><h5class="tabs__title">Give Him 'Fee</h5><p>Give him some 'fee. You'll get 300 points in the Intern Scavenger Hunt.</p></li></ul></div></section><divdata-modalid="modal-tips-during"class="modal--tips"role="dialog"><h2class="heading -banner">Tips</h2><divclass="modal__block"><h4class="inline--alt-color">Find Maxwell</h4><p>He's drinking 'fee. But he needs some more 'fee.</p></div><divclass="modal__block"><h4class="inline--alt-color">Give Him 'Fee</h4><p>Give him some 'fee. You'll get 300 points in the Intern Scavenger Hunt.</p></div><divclass="modal__block form-actions"><ahref="#"class="js-close-modal">Back to main page</a></div></div>

Standard container for centered 12-column layouts. Collapses to full-width on mobile.
Modifier classes can be applied to the required container__block to use different
preset layouts. Optionally, the container__row class can be used to align into rows.

Apply .-padded modifier to add extra bottom padding to a container, or .-dark to
use a dark purple background which blends seamlessly with the header.

Title

Show supplementary information to a user without leaving the page. Fills
screen on mobile, centered with overlay on tablet/desktop. Use .modal__block
element to add padding inside the modal. (This allows "full-width" modal content
to work without a negative margin.)