This is San Francisco’s main Food Stamps office. People call it twelve-thirty-five, as in 1235 Mission Street. The first time I went was on Thursday, February 7, 2013
Bookmark Icons
Flag Red
152x152
120x120
76x76
60x60
32x32
16x16
Flag Blue
152x152
120x120
76x76
60x60
32x32
16x16
Flag Gray
152x152
120x120
76x76
60x60
32x32
16x16
Flag Black
152x152
120x120
76x76
60x60
32x32
16x16
Flag White and Blue
152x152
120x120
76x76
60x60
32x32
16x16
Flag White and Red
152x152
120x120
76x76
60x60
32x32
16x16
Flag White and Gray
152x152
120x120
76x76
60x60
32x32
16x16
Flag White and Black
152x152
120x120
76x76
60x60
32x32
16x16
Icons
Icons are from icomoon.
- icon-facebook
- icon-twitter
- icon-feed
- icon-vimeo2
- icon-lanyrd
- icon-flickr
- icon-mail
- icon-youtube
- icon-google-plus
- icon-google-plus2
- icon-github
- icon-linkedin
- icon-skype
- icon-html5
- icon-css3
- icon-chrome
- icon-firefox
- icon-IE
- icon-opera
- icon-safari
- icon-share
- icon-github2
- icon-user
- icon-cc
- icon-phone
- icon-location
- icon-envelop
- icon-alarm
- icon-print
- icon-database
- icon-undo
- icon-redo
- icon-bubble
- icon-users
- icon-quotes-left
- icon-quotes-right
- icon-key
- icon-wrench
- icon-cogs
- icon-download2
- icon-upload2
- icon-earth
- icon-star
- icon-star2
- icon-star3
- icon-arrow-up
- icon-arrow-right2
- icon-arrow-down
- icon-arrow-left
- icon-arrow-up2
- icon-arrow-right3
- icon-arrow-down2
- icon-arrow-left2
- icon-new-tab
- icon-code
- icon-search
- icon-bullhorn
- icon-rocket
- icon-checkmark
- icon-tools
- icon-lamp
- icon-calendar
- icon-twitter2
- icon-grid
- icon-tumblr
- icon-cc2
- icon-cc-by
- icon-cc-nc
- icon-cc-nc-eu
- icon-cc-nc-jp
- icon-cc-sa
- icon-cc-nd
- icon-cc-pd
- icon-cc-share2
- icon-thumbs-up
- icon-thumbs-down
- icon-upload3
- icon-cloud
Colors
Primary Colors
-
- CfA Red
- rgb(204,39,62)
- #cf1b41
- $color-red
-
- CfA Blue
- rgb(63,158,216)
- #399fd3
- $color-blue
-
- CfA Gray
- rgb(109, 110, 113)
- #6D6E71
- $color-gray
-
- CfA Black
- rgb(0, 0, 0)
- #000000
- $color-black
Secondary Colors
-
- Dark Blue
- rgb(0, 75, 106)
- #004b6a
- $color-dark-blue
-
- Light Blue
- rgb(122,181,214)
- #7ab5d6
- $color-light-blue
-
- Dark gray
- rgb(68, 68, 68)
- #444444
- $color-dark-gray
-
- Medium gray
- rgb(153, 149, 149)
- #999595
- $color-medium-gray
-
- Light gray
- rgb(229, 229, 229)
- #e5e5e5
- $color-light-gray
-
- Orange
- rgb(232, 125, 43)
- #e87d2b
- $color-orange
-
- Purple
- rgb(105, 87, 156)
- #69579C
- $color-purple
-
- Teal
- rgb(0, 161, 117)
- #00a175
- $color-teal
-
- Medium Blue
- rgb(66, 152, 187)
- #4298bb
- $color-medium-blue
-
- Yellow
- rgb(254, 221, 68)
- #fedd44
- $color-yellow
-
- White
- rgb(255, 255, 255)
- #ffffff
- $color-white
Layout
The classnames used for layout are all prefixed with layout-
. They are all derived from musical note values. This naming convention has been used because it avoids referencing the number of columns in the grid (which often only makes sense at "desktop" view).
The site uses a 9-column grid which can be split into a 2, 3 or 9 column layout, and there are slight variations on these layouts.
The widest container is layout-breve
.
layout-breve
Layouts can be wrapped inside each other. For example, 2 layout-minims can be within a layout-semibreve to have a 2 column layout which stops growing when it hits a certain size.
layout-breve
layout-minim
layout-minim
layout-breve
layout-crotchet
layout-crotchet
layout-crotchet
layout-breve
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-semibreve
containers have an earlier max-width applied than layout-breve
. This will appear to be the same width as layout-breve unless you're viewing the site on a wide screen.
layout-semibreve
layout-semibreve
layout-minim
layout-minim
layout-semibreve
layout-crotchet
layout-crotchet
layout-crotchet
layout-semibreve
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-quaver
layout-quaver
For unequal column widths, use layout-minor
and layout-major
.
layout-semibreve
layout-minor
layout-major
A "stacatto" is A note of shortened duration, separated from the note that may follow by silence. This has been applied to the class when the column is shorter than normal.
layout-breve
layout-minim-staccato
layout-minim-staccato
layout-semibreve
layout-minim-staccato
layout-minim-staccato
layout-breve
layout-crotchet-staccato
layout-crotchet-staccato
layout-crotchet-staccato
layout-semibreve
layout-crotchet-staccato
layout-crotchet-staccato
layout-crotchet-staccato
Slabs
For background colors, use a class of slab-colorname
.
slab-gray
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
slab-dark-gray
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
slab-red
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
slab-medium-red
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
slab-blue
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
slab-dark-blue
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Elements
Forms
button-default #
<button>Button</button>
<button type="submit">Submit button</button>
<a href="#" class="button">Link button</a>
<input type="button" value="Input button">
<input type="submit" value="Input submit button">
Usage:
button-size-l #
<button class="button-l">Button</button>
<button type="submit" class="button-l">Submit button</button>
<a href="#" class="button button-l">Link button</a>
<input type="button" value="Input button" class="button-l">
<input type="submit" value="Input submit button" class="button-l">
Usage:
button-size-s #
<button class="button-s">Button</button>
<button type="submit" class="button-s">Submit button</button>
<a href="#" class="button button-s">Link button</a>
<input type="button" value="Input button" class="button-s">
<input type="submit" value="Input submit button" class="button-s">
Usage:
button-style-alternative #
<button class="button-alternative">Button</button>
<button type="submit" class="button-alternative">Submit button</button>
<a href="#" class="button-alternative">Link button</a>
<input type="button" value="Input button" class="button-alternative">
<input type="submit" value="Input submit button" class="button-alternative">
Usage:
button-style-disabled #
<button disabled>Button</button>
<button type="submit" disabled>Submit button</button>
<a href="#" class="button-disabled">Link button</a>
<input type="button" value="Input button" disabled>
<input type="submit" value="Input submit button" disabled>
Usage: For form buttons, use the attribute "disabled". For links styled as buttons, use both the classes "button" and "button-disabled".
button-style-neutral #
<button class="button-neutral">Button</button>
<button type="submit" class="button-neutral">Submit button</button>
<a href="#" class="button-neutral">Link button</a>
<input type="button" value="Input button" class="button-neutral">
<input type="submit" value="Input submit button" class="button-neutral">
Usage:
button-style-prominent #
<button class="button-prominent">Button</button>
<button type="submit" class="button-prominent">Submit button</button>
<a href="#" class="button button-prominent">Link button</a>
<input type="button" value="Input button" class="button-prominent">
<input type="submit" value="Input submit button" class="button-prominent">
Usage:
button-style-subtle #
<button class="button-subtle">Button</button>
<button type="submit" class="button-subtle">Submit button</button>
<a href="#" class="button button-subtle">Link button</a>
<input type="button" value="Input button" class="button-subtle">
<input type="submit" value="Input submit button" class="button-subtle">
Usage:
button-type-group #
<div class="button-group">
<input type="submit" class="primary-button" value="Post comment"/>
<input type="button" class="button" value="Preview"/>
<a class="button button-unstyled" href="#">Cancel</a>
</div>
Usage:
button-type-progress-alternative #
<button class="button-alternative button-progress">Button</button>
<button type="submit" class="button-alternative button-progress">Submit button</button>
<a href="#" class="button-alternative button-progress">Link button</a>
<input type="button" class="button-alternative button-progress" value="Input button">
<input type="submit" class="button-alternative button-progress" value="Input submit button">
Usage:
button-type-progress-default #
<button class="button-progress">Button</button>
<button type="submit" class="button-progress">Submit button</button>
<a href="#" class="button-progress">Link button</a>
<input type="button" class="button-progress" value="Input button">
<input type="submit" class="button-progress" value="Input submit button">
Usage:
button-type-progress-neutral #
<button class="button-neutral button-progress">Button</button>
<button type="submit" class="button-neutral button-progress">Submit button</button>
<a href="#" class="button-neutral button-progress">Link button</a>
<input type="button" class="button-neutral button-progress" value="Input button">
<input type="submit" class="button-neutral button-progress" value="Input submit button">
Usage:
button-type-progress-prominent #
<button class="button-prominent button-progress">Button</button>
<button type="submit" class="button-prominent button-progress">Submit button</button>
<a href="#" class="button-prominent button-progress">Link button</a>
<input type="button" class="button-prominent button-progress" value="Input button">
<input type="submit" class="button-prominent button-progress" value="Input submit button">
Usage:
button-type-progress-subtle #
<button class="button-subtle button-progress">Button</button>
<button type="submit" class="button-subtle button-progress">Submit button</button>
<a href="#" class="button-subtle button-progress">Link button</a>
<input type="button" class="button-subtle button-progress" value="Input button">
<input type="submit" class="button-subtle button-progress" value="Input submit button">
Usage:
fieldset.select-checkboxes-captions #
<form class="spotlight">
<fieldset class="select field">
<legend>Checkboxes with captions <abbr title="Required">*</abbr></legend>
<ul class="list-form">
<li>
<label for="checkbox11"><input id="checkbox11" name="checkbox" type="checkbox" checked/> Choice A</label>
<small class="note">Note about this option</small>
</li>
<li>
<label for="checkbox21"><input id="checkbox21" name="checkbox" type="checkbox"/> Choice B</label>
<small class="note">Note about this option</small>
</li>
<li>
<label for="checkbox31"><input id="checkbox31" name="checkbox" type="checkbox"/> Choice C</label>
<small class="note">Note about this option</small>
</li>
</ul>
</fieldset>
</form>
Usage:
fieldset.select-checkboxes #
<form class="spotlight">
<fieldset class="select field">
<legend>Checkboxes <abbr title="Required">*</abbr></legend>
<ul class="list-form">
<li>
<label for="checkbox10"><input id="checkbox10" name="checkbox" type="checkbox" checked/> Choice A</label>
</li>
<li>
<label for="checkbox20"><input id="checkbox20" name="checkbox" type="checkbox"/> Choice B</label>
</li>
<li>
<label for="checkbox30"><input id="checkbox30" name="checkbox" type="checkbox"/> Choice C</label>
</li>
</ul>
<small class="note">Note about these options</small>
</fieldset>
</form>
Usage:
fieldset.select-radios #
<form class="spotlight">
<fieldset class="select field">
<legend>Radios <abbr title="Required">*</abbr></legend>
<ul class="list-form">
<li>
<label for="radio1"><input id="radio1" name="radio" type="radio" checked/> Option 1</label>
</li>
<li>
<label for="radio2"><input id="radio2" name="radio" type="radio"/> Option 2</label>
</li>
<li>
<label for="radio3"><input id="radio3" name="radio" type="radio"/> Option 3</label>
</li>
</ul>
<small class="note">Note about these options</small>
</fieldset>
</form>
Usage:
form-fieldset #
<form>
<fieldset>
<legend>Legend</legend>
<p><small class="note">Required fields are marked <abbr title="Required">*</abbr></small></p>
</fieldset>
</form>
Usage:
form-input.checkbox #
<p>
<label for="checkbox" class="check"><input id="checkbox" type="checkbox" class="checkbox" required/>Single checkbox</label>
<small class="note">Note about this field</small>
<p>
Usage:
Note about this field
form-input.email #
<p>
<label for="email">Email Address <abbr title="Required">*</abbr></label>
<input id="email" class="input" type="email" placeholder="you@example.com" required/>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
form-input.password #
<p>
<label for="password">Password <abbr title="Required">*</abbr></label>
<input id="password" class="input" type="password" required/>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
form-input.text #
<p>
<label for="text">Text Input <abbr title="Required">*</abbr></label>
<input id="text" class="input" type="text" required/>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
form-input.url #
<p>
<label for="url">Web Address <abbr title="Required">*</abbr></label>
<input id="url" class="input" type="url" placeholder="http://example.com" required/>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
form-inputs-combined #
<p>
<label for="combined">Combined Input</label>
<span class="combined">
<input id="combined" class="input" type="text"/><!--
--><input type="button" class="button" value="Input Button"/>
</span>
</p>
Usage:
form-options.checkboxes-captions #
<form>
<fieldset>
<legend>Checkbox <abbr title="Required">*</abbr></legend>
<ul class="list-form">
<li>
<label for="checkbox1" class="check"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"/>Choice A</label>
<small class="note">Note about these option</small>
</li>
<li>
<label for="checkbox2" class="check"><input id="checkbox2" name="checkbox" type="checkbox"/>Choice B</label>
<small class="note">Note about these option</small>
</li>
<li>
<label for="checkbox3" class="check"><input id="checkbox3" name="checkbox" type="checkbox"/>Choice C</label>
<small class="note">Note about these option</small>
</li>
</ul>
</fieldset>
</form>
Usage:
form-options.checkboxes #
<fieldset>
<legend>Checkbox <abbr title="Required">*</abbr></legend>
<ul class="list-form">
<li>
<label for="checkbox1" class="check"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"/>Choice A</label>
</li>
<li>
<label for="checkbox2" class="check"><input id="checkbox2" name="checkbox" type="checkbox"/>Choice B</label>
</li>
<li>
<label for="checkbox3" class="check"><input id="checkbox3" name="checkbox" type="checkbox"/>Choice C</label>
</li>
</ul>
<small class="note">Note about these options</small>
</fieldset>
Usage:
form-options.radios #
<form>
<fieldset>
<legend>Radio <abbr title="Required">*</abbr></legend>
<ul class="list-form">
<li>
<label for="radio1" class="check"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"/>Option 1</label>
</li>
<li>
<label for="radio2" class="check"><input id="radio2" name="radio" type="radio" class="radio"/>Option 2</label>
</li>
<li>
<label for="radio3" class="check"><input id="radio3" name="radio" type="radio" class="radio"/>Option 3</label>
</li>
</ul>
<small class="note">Note about these options</small>
</fieldset>
</form>
Usage:
form-select #
<p>
<label for="select">Select your State <abbr title="Required">*</abbr></label>
<select id="state">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>American Samoa</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
<option>Delaware</option>
<option>District of Columbia</option>
<option>Florida</option>
<option>Georgia</option>
<option>Guam</option>
<option>Hawaii</option>
<option>Idaho</option>
<option>Illinois</option>
<option>Indiana</option>
<option>Iowa</option>
<option>Kansas</option>
<option>Kentucky</option>
<option>Louisiana</option>
<option>Maine</option>
<option>Maryland</option>
<option>Massachusetts</option>
<option>Michigan</option>
<option>Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Northern Mariana Islands</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Puerto Rico</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option>United States Virgin Islands</option>
<option>Utah</option>
<option>Vermont</option>
<option>Virginia</option>
<option>Washington</option>
<option>West Virginia</option>
<option>Wisconsin</option>
<option>Wyoming</option>
</select>
<small class="note">Note about this selection</small>
</p>
Usage:
Note about this selection
form-signup #
<form>
<ul class="list-form">
<li class="form-field">
<input id="text" class="input" type="email" placeholder="email" />
<small class="note">Note about this field</small>
</li>
<li class="form-field">
<input id="text" class="input" type="text" placeholder="first name" />
</li>
<li class="form-field">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</li>
</ul>
</form>
Usage:
form-textarea #
<p>
<label for="textarea">Textarea <abbr title="Required">*</abbr></label>
<textarea id="textarea" class="input" rows="8" cols="32" required></textarea>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
input-checkbox-disabled #
<p>
<label for="checkbox"><input id="checkbox" type="checkbox" disabled/> Disabled checkbox</label>
<small class="note">Note about this field</small>
<p>
Usage:
Note about this field
input-checkbox #
<p class="field">
<label for="checkbox"><input id="checkbox" type="checkbox"/> Checkbox</label>
<small class="note">Note about this field</small>
<p>
Usage:
Note about this field
input-email #
<p class="field">
<label for="email">Email address <abbr title="Required">*</abbr></label>
<input id="email" type="email" placeholder="you@example.com" required/>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
input-password #
<p class="field">
<label for="password">Password <abbr title="Required">*</abbr></label>
<input id="password" type="password" required/>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
input-search #
<p class="field">
<input type="search" placeholder="Search" role="search" /><input type="submit" value="Go" />
</p>
Usage:
input-text-disabled #
<p>
<label for="text-disabled">Disabled text</label>
<input id="text-disabled" type="text" disabled/>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
input-text #
<p class="field">
<label for="text">Text <abbr title="Required">*</abbr></label>
<input id="text" type="text" required/>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
input-url #
<p class="field">
<label for="url">Web address <abbr title="Required">*</abbr></label>
<input id="url" type="url" placeholder="http://example.com" required/>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
select-disabled #
<p>
<label for="select-disabled">Disabled select <abbr title="Required">*</abbr></label>
<select id="select-disabled" disabled>
<optgroup label="Option Group A">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
<optgroup label="Option Group B">
<option>Option Four</option>
<option>Option Five</option>
<option>Option Six</option>
</optgroup>
</select>
<small class="note">Note about this selection</small>
</p>
Usage:
Note about this selection
select-multiple-disabled #
<p>
<label for="select-multiple-disabled">Disabled multiple select <abbr title="Required">*</abbr></label>
<select id="select-multiple-disabled" multiple disabled>
<optgroup label="Option Group A">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
<optgroup label="Option Group B">
<option>Option Four</option>
<option>Option Five</option>
<option>Option Six</option>
</optgroup>
</select>
<small class="note">Note about this selection</small>
</p>
Usage:
Note about this selection
select-multiple #
<p class="field">
<label for="select-multiple">Multiple select <abbr title="Required">*</abbr></label>
<select id="select-multiple" multiple>
<optgroup label="Option Group A">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
<optgroup label="Option Group B">
<option>Option Four</option>
<option>Option Five</option>
<option>Option Six</option>
</optgroup>
</select>
<small class="note">Note about this selection</small>
</p>
Usage:
Note about this selection
select #
<p class="field">
<label for="select">Select <abbr title="Required">*</abbr></label>
<select id="select">
<optgroup label="Option Group A">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
<optgroup label="Option Group B">
<option>Option Four</option>
<option>Option Five</option>
<option>Option Six</option>
</optgroup>
</select>
<small class="note">Note about this selection</small>
</p>
Usage:
Note about this selection
textarea-disabled #
<p>
<label for="textarea">Disabled textarea</label>
<textarea id="textarea" rows="8" cols="32" disabled></textarea>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
textarea #
<p class="field">
<label for="textarea">Textarea <abbr title="Required">*</abbr></label>
<textarea id="textarea" rows="8" cols="32" required></textarea>
<small class="note">Note about this field</small>
</p>
Usage:
Note about this field
Headings
A new kind of public service
A new kind of public service
A new kind of public service
A new kind of public service
A new kind of public service
A new kind of public service
Links
This is an external link
This is an inline link.
Lists
list-ordered #
<ol>
<li>Browse the applications we've listed.</li>
<li>When you find the app want to deploy, send us a quick note to brigade-info@codeforamerica.org to let us know which one. We'll use the information to help you get started and to report back to the community which apps people care about maintaining.</li>
<li>Host a launch-a-thon to get your app off the ground. Use our MeetUp Everywhere.</li>
</ol>
Usage:
- Browse the applications we've listed.
- When you find the app want to deploy, send us a quick note to brigade-info@codeforamerica.org to let us know which one. We'll use the information to help you get started and to report back to the community which apps people care about maintaining.
- Host a launch-a-thon to get your app off the ground. Use our MeetUp Everywhere.
list-unordered #
<ul>
<li>Name</li>
<li>Location</li>
<li>Brigade and/or Affiliations.</li>
<li>Something you want to get from the forum or something you want to get done.</li>
<li>Anything else you want to add but don't write a book. There's plenty of time to get to know one another.</li>
</ul>
Usage:
- Name
- Location
- Brigade and/or Affiliations.
- Something you want to get from the forum or something you want to get done.
- Anything else you want to add but don't write a book. There's plenty of time to get to know one another.
Media

video #
<video controls>
<source src="/_media/video/video.webm" type="video/webm"/>
<source src="/_media/video/video.mp4" type="video/mp4"/>
</video>
Usage:
Tables
table #
<table>
<thead>
<tr>
<th colspan="2">Programs</th>
</tr>
</thead>
<tbody>
<tr>
<th>Fellowship</th>
<td>$2,733,782</td>
</tr>
<tr>
<th>Brigade</th>
<td>$286,257</td>
</tr>
<tr>
<th>Accelerator</th>
<td>$280,896</td>
</tr>
<tr>
<th>Civic Commons & Peer Network</th>
<td>$324,140</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>Total Programs</th>
<td>$3,625,075</td>
</tr>
<tr>
<th>Administration</th>
<td>$226,648</td>
</tr>
<tr>
<th>Fundraising</th>
<td>$153,504</td>
</tr>
<tfoot>
<tr>
<th>Total Expenses</th>
<td>$4,005,227</td>
</tr>
</tfoot>
</table>
Usage:
Programs | |
---|---|
Fellowship | $2,733,782 |
Brigade | $286,257 |
Accelerator | $280,896 |
Civic Commons & Peer Network | $324,140 |
Total Programs | $3,625,075 |
---|---|
Administration | $226,648 |
Fundraising | $153,504 |
Total Expenses | $4,005,227 |
Text
abbr #
<p><abbr title="General Transit Feed Specification">GTFS</abbr> is for static data, and GTFS-realtime is an extension for real-time, geolocated data.</p>
Usage:
GTFS is for static data, and GTFS-realtime is an extension for real-time, geolocated data.
address #
<address>For more details, contact <a href="mailto:mm@example.com">Michal Migurski</a>.</address>
Usage:
b #
<p>Actionable content tailored to support member needs, including <b>deployment guides</b> for CfA-vetted apps, <b>timely case studies</b>, and <b>online training</b> with renowned experts.</p>
Usage:
Actionable content tailored to support member needs, including deployment guides for CfA-vetted apps, timely case studies, and online training with renowned experts.
blockquote #
<blockquote>
<p>The failure of the federal levee system during Hurricane Katrina changed the way I think about the world around me. I was 20-years-old, but I understood for the first time that our cities are what we make them.</p>
</blockquote>
Usage:
The failure of the federal levee system during Hurricane Katrina changed the way I think about the world around me. I was 20-years-old, but I understood for the first time that our cities are what we make them.
Los Angeles Times, August 26, 2013
code #
<pre class="language-css">
<code>.teaser .teaser-description {
padding: 1em;
border: 1px solid;
@include border-color($color-light-gray, 1);
border-top: none;
}</code>
</pre>
Usage: The code is styled using a class on the code element: * language-css for css * language-javascript for javascript * language-html for html
.teaser .teaser-description {
padding: 1em;
border: 1px solid;
@include border-color($color-light-gray, 1);
border-top: none;
}
We still have some have hats and hoodies left.
details #
<details>
<summary>What is Code for America?</summary>
<p>Code for America is a 501(c)3 non-profit that envisions a government by the people, for the people, that works in the 21st century.</p>
</details>
Usage:
What is Code for America?
Code for America is a 501(c)3 non-profit that envisions a government by the people, for the people, that works in the 21st century.
dfn #
<p>The <dfn>Brigade network</dfn> is an ongoing effort to deploy, maintain and sustain civic technology and open data infrastructures.</p>
Usage:
The Brigade network is an ongoing effort to deploy, maintain and sustain civic technology and open data infrastructures.
dl-dfn #
<dl>
<dt><dfn>Brigade network</dfn>,</dt>
<dd>An ongoing effort to deploy, maintain and sustain civic technology and open data infrastructures.</dd>
<dt><dfn>The Civic Startups program</dfn></dt>
<dd>Offers entrepreneurs mentorship in navigating the government procurement process and building sustainable businesses. </dd>
<dt><dfn>The Peer Network</dfn>,</dt>
<dd>Where government officials and public servants connect to share civic tech resources, best practices and open data policies. </dd>
</dl>
Usage:
- Brigade network,
- An ongoing effort to deploy, maintain and sustain civic technology and open data infrastructures.
- The Civic Startups program
- Offers entrepreneurs mentorship in navigating the government procurement process and building sustainable businesses.
- The Peer Network,
- Where government officials and public servants connect to share civic tech resources, best practices and open data policies.
By the people, for the people.
figure-blockquote #
<figure>
<blockquote>
<p>Startups are the most powerful possibility I can find for helping to improve those services. A lack of procurement options is at the heart of the bad technology and the inefficient business processes of many cities.</p>
</blockquote>
<figcaption>
Zachary Townsend, in <cite>Why I'm mentoring for America</cite>, from the <cite>Code for America Blog</cite>, November 1st 2013
</figcaption>
</figure>
Usage:
Startups are the most powerful possibility I can find for helping to improve those services. A lack of procurement options is at the heart of the bad technology and the inefficient business processes of many cities.
figure-img #
<figure>
<img src="/_media/images/big-data.jpg" alt=""/>
<figcaption>
The Code for America team
</figcaption>
</figure>
Usage:

figure-list #
<figure>
<figcaption>Largest Meetup Groups</figcaption>
<ol>
<li>#betaNYC, a Code for America Brigade for NYC: 1,281 Members</li>
<li>Code for America Philly: 488 Members</li>
<li>Code for Boston: 427 Members</li>
<li>Code for Seattle: 379 Members</li>
<li>Code for San Francisco - Civic Hack Night: 336 Members</li>
<li>Code for DC: 218 Members</li>
<li>OpenOakland: The Code for America Brigade in Oakland: 200 Members</li>
<li>Colorado Code for Communities: 173 Members</li>
<li>Code for Los Angeles: 149 Members</li>
<li>Arlington Code Shop: 148 Members</li>
</ol>
</figure>
Usage:
- #betaNYC, a Code for America Brigade for NYC: 1,281 Members
- Code for America Philly: 488 Members
- Code for Boston: 427 Members
- Code for Seattle: 379 Members
- Code for San Francisco - Civic Hack Night: 336 Members
- Code for DC: 218 Members
- OpenOakland: The Code for America Brigade in Oakland: 200 Members
- Colorado Code for Communities: 173 Members
- Code for Los Angeles: 149 Members
- Arlington Code Shop: 148 Members
kbd #
<p>To take a screenshot on your Mac, press <kbd>⌘ Cmd</kbd> + <kbd>⇧ Shift</kbd> + <kbd>3</kbd>.</p>
Usage:
To take a screenshot on your Mac, press ⌘ Cmd + ⇧ Shift + 3.
paragraph #
<p>The success of the Fellowship is measured not in lines of code, but in sustainable, meaningful change. It's about proving that government can move at the speed of citizens, can speak the language of citizens, and can cost what citizens are willing to pay.</p>
Usage:
The success of the Fellowship is measured not in lines of code, but in sustainable, meaningful change. It's about proving that government can move at the speed of citizens, can speak the language of citizens, and can cost what citizens are willing to pay.
pre-code #
<pre><code>function panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () {
if (closeHandler) closeHandler()
};
}</code></pre>
Usage:
function panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () {
if (closeHandler) closeHandler()
};
}
small #
<p><small>Code for America Labs, Inc is a non-partisan, non-political 501(c)(3) organization. Content is licensed through Creative Commons.</small></p>
Usage:
Code for America Labs, Inc is a non-partisan, non-political 501(c)(3) organization. Content is licensed through Creative Commons.
This event is in San Francisco. Watch out for bears.
time #
<time datetime="2013-11-13 09:00-05:00">November 1st, 2013</time>
Usage: The format for datetime is YYYY-MM-DD HH:MM. In this example, there is an 8 hour time difference between UTC and the location where the post was published, so -08:00 has been added.
Global
head #
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8">
<title>Code for America</title>
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/6435252/678502/css/fonts.css" />
<link rel="stylesheet" href="/style/css/main.css">
<link rel="stylesheet" href="/style/css/layout.css" media="all and (min-width: 40em)">
<link href="/style/css/prism.css" rel="stylesheet" />
<script src="/script/fittext.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="/style/css/layout.css" media="all">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="js-container">
<nav class="nav-global-primary" role="navigation">
<ul class="layout-breve layout-tight">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Library</a></li>
<li>
<div class="search-global">
<input type="search" placeholder="Search" />
</div>
</li>
</ul>
</nav>
Usage:
header #
<div class="global-header">
<div class="layout-breve layout-tight">
<a href="/templates/home.php" class="global-header-logo">
<img src="/_assets/logo.png" />
</a>
<p class="skip-to-nav"><a href="#global-footer">Menu</a></p>
<nav class="nav-global-secondary" role="navigation">
<ul>
<li class="nav-tier1 nav-has-children">
<a href="#">Governments</a>
<ul class="nav-tier2">
<li><a href="#">Current Cities</a></li>
<li><a href="#">Upcoming Cities</a></li>
<li><a href="#">Alumni Cities</a></li>
<li><a href="#">Apps & APIs</a></li>
</ul>
</li>
<li class="nav-tier1 nav-has-children"><a href="#">Citizens</a></li>
<li class="nav-tier1 nav-has-children"><a href="#">Apps</a></li>
<li><a href="#" class="button">Donate</a></li>
</ul>
</nav>
</div>
</div>
Usage:
Patterns
alert-failure #
<div class="alert-failure">
<p>This is a notification of a failed action or event.</p>
</div><!-- .alert-failure -->
Usage:
This is a notification of a failed action or event.
alert-info #
<div class="alert-info">
<p>This is a notification with some information.</p>
</div><!-- .alert-info -->
Usage:
This is a notification with some information.
alert-success #
<div class="alert-success">
<p>This is a notification of a successful action or event.</p>
</div><!-- .alert-success -->
Usage:
This is a notification of a successful action or event.
This is a general notification.
badge-headings #
<div class="heading">
<h2>No badge</h2>
</div>
<div class="badge-heading">
<h2>Black badge heading (default)</h2>
</div>
<div class="badge-heading badge-github badge-blue">
<h2>Blue badge heading</h2>
</div>
<div class="badge-heading badge-glasses badge-red">
<h2>Red badge heading</h2>
<h3>with a sub-heading</h3>
</div>
<div class="badge-heading badge-glasses badge-orange">
<h2>Orange badge heading</h2>
</div>
<div class="badge-heading badge-gov badge-teal">
<h2>Teal badge heading</h2>
</div>
<div class="badge-heading badge-gov badge-purple">
<h2>Purple badge heading which has lots of text in it so will wrap</h2>
</div>
<div class="badge-heading badge-graph badge-gray">
<h2>Gray badge heading</h2>
</div>
<div class="badge-heading badge-graph badge-dark-blue">
<h2>Dark blue badge heading</h2>
</div>
Usage: Adds a badge with an icon to the left of the heading. Default is a rocket.
No badge
Black badge heading (default)
Blue badge heading
Red badge heading
with a sub-heading
Orange badge heading
Teal badge heading
Purple badge heading which has lots of text in it so will wrap
Gray badge heading
Dark blue badge heading
billboard #
<a href="#" class="billboard">
<img class="teaser-image" src="/_media/images/logo-promptly.jpg" />
<strong class="billboard-label">Promptly</strong>
</a>
Usage:
billboards #
<ul class="list-no-bullets layout-grid">
<li class="layout-crotchet">
<a href="#" class="billboard">
<img src="/_media/images/logo-promptly.jpg" />
<strong class="billboard-label">Promptly</strong>
</a>
</li>
<li class="layout-crotchet">
<a href="#" class="billboard">
<img src="/_media/images/logo-civicinsight.jpg" />
<strong class="billboard-label">Civic Insight</strong>
</a>
</li>
<li class="layout-crotchet">
<a href="#" class="billboard">
<img src="/_media/images/logo-textmybus.jpg" />
<strong class="billboard-label">Text my Bus</strong>
</a>
</li>
<li class="layout-crotchet">
<a href="#" class="billboard">
<img src="/_media/images/logo-localdata.jpg" />
<strong class="billboard-label">Localdata</strong>
</a>
</li>
<li class="layout-crotchet">
<a href="#" class="billboard">
<img src="/_media/images/logo-promptly.jpg" />
<strong class="billboard-label">Promptly</strong>
</a>
</li>
<li class="layout-crotchet">
<a href="#" class="billboard">
<img src="/_media/images/logo-civicinsight.jpg" />
<strong class="billboard-label">Civic Insight</strong>
</a>
</li>
</ul>
Usage:
blurb #
<div class="blurb"><p><em>Code for America</em> envisions a government that works by the people, for the people, in the 21st century.</p></div>
Usage:
Code for America envisions a government that works by the people, for the people, in the 21st century.
bricks-3 #
<ul class="bricks bricks-cta bricks-3">
<li class="brick badge-heading badge-blue">
<a class="brick-link" href="/_site/donate/">
<h3 class="brick-heading">Donors</h3>
<h4 class="brick-text">Help make a difference</h4>
</a>
</li>
<li class="brick badge-heading badge-red">
<a class="brick-link" href="/_site/governments/">
<h3 class="brick-heading">Governments</h3>
<h4 class="brick-text">Solve your city's problems</h4>
</a>
</li>
<li class="brick badge-heading badge-dark-blue">
<a class="brick-link" href="/_site/citizens/">
<h3 class="brick-heading">Geeks</h3>
<h4 class="brick-text">Use your skills for good</h4>
</a>
</li>
</ul>
Usage: Large blocks of content which can be used as calls-to-action.
bricks-4 #
<ul class="bricks bricks-4">
<li class="brick badge-heading badge-github">
<h3 class="text-feature">3,372</h3>
<p class="text-whisper">Civic Code Commits in <a href="#">December</a></p>
</li>
<li class="brick badge-heading badge-github">
<h3 class="text-feature">348</h3>
<p class="text-whisper">Civic Code Commits in <a href="#">December</a></p>
</li>
<li class="brick badge-heading badge-github">
<h3 class="text-feature">157</h3>
<p class="text-whisper">Total number of <a href="#">members</a> on Github</p>
</li>
<li class="brick badge-heading">
<h3 class="text-feature">75</h3>
<p class="text-whisper">Total number of <a href="#">apps deployed</a> by brigades</p>
</li>
</ul>
Usage: Large blocks of content which can be used as calls-to-action.
-
3,372
Civic Code Commits in December
-
348
Civic Code Commits in December
-
157
Total number of members on Github
-
75
Total number of apps deployed by brigades
calendar #
<table class="calendar">
<thead class="calendar-days">
<tr class="calendar-header">
<th class="calendar-nav" colspan="1">
<a class="calendar-month-prev" href="#"><span>Previous</span></a>
</th>
<th colspan="5">
<h2 class="calendar-heading">March 2013</h2>
</th>
<th class="calendar-nav" colspan="1">
<a class="calendar-month-next" href="#"><span>Next</span></a>
</th>
</th>
</tr>
<tr class="calendar-day-names">
<th class="calendar-day-weekend">Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th class="calendar-day-weekend">Sat</th>
</tr>
</thead>
<tbody>
<tr class="calendar-week">
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>1</td>
<td>2</td>
</tr>
<tr class="calendar-week">
<td>3</td>
<td class="calendar-has-event">4
<ul class="calendar-events">
<li class="calendar-event"><strong>2pm:</strong> An event</li>
<li class="calendar-event"><strong>4pm:</strong> Another event</li>
</ul>
</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr class="calendar-week">
<td class="calendar-has-event">10
<ul class="calendar-events">
<li class="calendar-event"><strong>2pm:</strong> An event</li>
<li class="calendar-event"><strong>4pm:</strong> Another event. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li>
</ul>
</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td class="calendar-has-event">15
<ul class="calendar-events">
<li class="calendar-event"><strong>2pm:</strong> An event</li>
</ul>
</td>
<td>16</td>
</tr>
<tr class="calendar-week">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="calendar-week">
<td>24</td>
<td>25</td>
<td class="calendar-day-active">26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td class="calendar-has-event">30
<ul class="calendar-events">
<li class="calendar-event"><strong>2pm:</strong> An event. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li>
<li class="calendar-event"><strong>4pm:</strong> Another event</li>
</ul>
</td>
</tr>
<tr class="calendar-week">
<td>31</td>
<td>1</td>
<td>2</td>
<td class="calendar-has-event">3
<ul class="calendar-events">
<li class="calendar-event"><strong>2pm:</strong> An event</li>
<li class="calendar-event"><strong>4pm:</strong> Another event</li>
</ul>
</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tfoot class="calendar-summary" colspan="7">
<tr><th>Next 7 days:</th>
<td colspan="6">
<ul class="calendar-summary-events">
<li><strong>Sunday 17th, 9am:</strong> <a href="#">A hack thing in San Francisco</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</a></li>
<li><strong>Monday 18th, All day:</strong> <a href="#">A thing</a></li>
<li><strong>Monday 18th, 3pm:</strong> <a href="#">Another thing in Maryland</a></li>
<li><strong>Tuesday 19th, All day:</strong> <a href="#">A thing</a></li>
<li><strong>Thursday 21st, 3pm:</strong> <a href="#">A hack thing in New York</a></li>
</ul>
</td>
</tr>
</tfoot>
</tbody>
</tbody>
</table>
Usage:
Previous |
March 2013 |
Next | ||||
---|---|---|---|---|---|---|
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
24 | 25 | 26 | 27 | 28 | 1 | 2 |
3 | 4
|
5 | 6 | 7 | 8 | 9 |
10
|
11 | 12 | 13 | 14 | 15
|
16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30
|
31 | 1 | 2 | 3
|
4 | 5 | 6 |
Next 7 days: |
|
Your email address will not be published.
chimney-invert #
<section class="slab-red">
<div class="layout-chimney-invert">
<div class="layout-minim">
<p>Over 200 local officials, startups and NGOs discuss data standards, current events and civic tech on a focused, moderated email list.</p>
<h3 class="h4">Titles of some active members include:</h3>
<ul class="isolate">
<li>Chief Innovation Officer, City of KC, Missouri</li>
<li>Deputy Chief of Staff, City of Houston</li>
<li>Director of Research and Technology, Urban Strategies Council</li>
</ul>
<h3 class="h4">Ready to Level Up?</h3>
<p>Code for America's Peer Network helps you innovate by providing targeted training, hands-on support and early access to new technology. Recent trainings include user interface engineering and broadband Policy</p>
<a href="#" class="button button-prominent">Request an invite</a>
</div>
<div class="layout-minim slab-medium-red chimney">
<h3>Join the conversation</h3>
<form>
<ul class="list-form">
<li class="form-field">
<label for="invitee-name">Your Name</label>
<input id="invitee-name" class="input" type="text" />
</li>
<li class="form-field">
<label for="donor-address-line1">Your preferred title</label>
<input id="donor-address-line1" class="input" type="text" />
</li>
<li class="form-field">
<label for="invitee-title">Address Line 2</label>
<input id="invitee-title" class="input" type="text" />
</li>
<li class="form-field-group">
<div class="form-field">
<label for="donor-address-city">City</label>
<input id="donor-address-city" class="input" type="text" />
</div>
<div class="form-field">
<label for="donor-address-state">State</label>
<select id="donor-address-state">
<option>USA</option>
<option>USA</option>
<option>USA</option>
</select>
</div>
</li>
<li class="form-field">
<label for="donor-email">Email</label>
<input id="donor-email" class="input" type="email" />
</li>
<a href="#" class="button">Join now</a>
</ul>
</form>
</div>
</div>
</section>
Usage:
Over 200 local officials, startups and NGOs discuss data standards, current events and civic tech on a focused, moderated email list.
Titles of some active members include:
- Chief Innovation Officer, City of KC, Missouri
- Deputy Chief of Staff, City of Houston
- Director of Research and Technology, Urban Strategies Council
Ready to Level Up?
Code for America's Peer Network helps you innovate by providing targeted training, hands-on support and early access to new technology. Recent trainings include user interface engineering and broadband Policy
Request an inviteJoin the conversation
chimney #
<section class="slab-red">
<div class="layout-chimney">
<div class="layout-minim-staccato slab-medium-red chimney">
<div class="chimney-body">
<h3>Why I Code for America</h3>
<div class="h-card profile">
<h4 class="p-name profile-name">Richa Agarwal</h4>
<img class="u-photo profile-photo" src="/_media/images/avatar-tiffani-bell.png" />
<p class="p-role profile-role">2012 Fellow</p>
<p class="p-note profile-note">Co-creator of <a class="p-org profile-org" href="#">Recordtrac</a></p>
</div>
<a href="#" class="button button-prominent">Meet more civic hackers</a>
</div>
</div>
<div class="layout-minim-staccato">
<h3 class="h4">What's happening?</h3>
<ul class="list-no-bullets list-icons">
<li class="icon-calendar">Nov 19: Bike Hack NYU Rudin
<a href="#">More events</a>
</li>
<li class="icon-github2">Hack request: Add SMS to Ohana API
<a href="#">More hack requests</a>
</li>
<li class="icon-lamp">Feb 22-24: Code Across America
<a href="#">More national projects</a>
</li>
<li class="icon-youtube">Video: Civic Engagement & Design
<a href="#">More CFA videos</a>
</li>
<li class="icon-tools">Publish and Curate Open Data
<a href="#">More organizing</a>
</li>
</ul>
</div>
</div>
</section>
Usage: The chimney pattern splits content into 2 columns, with one of the columns more prominent than the other. To flip the order of the columns, use the chimney-invert pattern.
What's happening?
fade-toggle #
<div class="fade fade-toggle" id="fade">
<nav class="list-credits" role="navigation">
<ul class="fade-content" id="fade-content">
<li><a href="#">New York</a></li>
<li><a href="#">Philadelphia</a></li>
<li><a href="#">Boston</a></li>
<li><a href="#">Seattle</a></li>
<li><a href="#">San Francisco</a></li>
<li><a href="#">DC</a></li>
<li><a href="#">Oakland</a></li>
<li><a href="#">Chicago</a></li>
<li><a href="#">International</a></li>
<li><a href="#">Tampa</a></li>
<li><a href="#">Tulsa</a></li>
<li><a href="#">Chattanooga</a></li>
<li><a href="#">Austin</a></li>
<li><a href="#">Colorado</a></li>
<li><a href="#">Lexington</a></li>
<li><a href="#">Salt Lake</a></li>
<li><a href="#">San Diego</a></li>
<li><a href="#">Cincinnati</a></li>
<li><a href="#">Whitewater</a></li>
<li><a href="#">Raleigh</a></li>
<li><a href="#">Orlando</a></li>
<li><a href="#">Maine</a></li>
<li><a href="#">Kansas City</a></li>
<li><a href="#">Las Vegas</a></li>
<li><a href="#">Durham</a></li>
<li><a href="#">Hawaii</a></li>
<li><a href="#">Detroit</a></li>
</ul>
</nav>
</div>
<p class="isolate text-whisper"><a href="#" class="fade-activate" id="fade-activate">See all cities</a></p>
Usage:
fade #
<div class="fade">
<nav class="list-credits" role="navigation">
<ul class="fade-content">
<li><a href="#">New York</a></li>
<li><a href="#">Philadelphia</a></li>
<li><a href="#">Boston</a></li>
<li><a href="#">Seattle</a></li>
<li><a href="#">San Francisco</a></li>
<li><a href="#">DC</a></li>
<li><a href="#">Oakland</a></li>
<li><a href="#">Chicago</a></li>
<li><a href="#">International</a></li>
<li><a href="#">Tampa</a></li>
<li><a href="#">Tulsa</a></li>
<li><a href="#">Chattanooga</a></li>
<li><a href="#">Austin</a></li>
<li><a href="#">Colorado</a></li>
<li><a href="#">Lexington</a></li>
<li><a href="#">Salt Lake</a></li>
<li><a href="#">San Diego</a></li>
<li><a href="#">Cincinnati</a></li>
<li><a href="#">Whitewater</a></li>
<li><a href="#">Raleigh</a></li>
<li><a href="#">Orlando</a></li>
<li><a href="#">Maine</a></li>
<li><a href="#">Kansas City</a></li>
<li><a href="#">Las Vegas</a></li>
<li><a href="#">Durham</a></li>
<li><a href="#">Hawaii</a></li>
<li><a href="#">Detroit</a></li>
</ul>
</nav>
</div>
<p class="isolate text-whisper"><a href="#" class="fade-activate">See all cities</a></p>
Usage: Creates a show/hide toggle for very long lists
form-donate #
<form class="spotlight">
<h3>Donate now</h3>
<ul class="list-form">
<li class="form-field">
<label for="donor-first-name">First Name</label>
<input id="donor-first-name" class="input" type="text" />
</li>
<li class="form-field">
<label for="donor-last-name">Last Name</label>
<input id="donor-last-name" class="input" type="text" />
</li>
<li class="form-field">
<label for="donor-address-line1">Address Line 1</label>
<input id="donor-address-line1" class="input" type="text" />
</li>
<li class="form-field">
<label for="donor-address-line2">Address Line 2</label>
<input id="donor-address-line2" class="input" type="text" />
</li>
<li class="form-field">
<label for="donor-address-city">City</label>
<input id="donor-address-city" class="input" type="text" />
</li>
<li class="form-field-group">
<div class="form-field">
<label for="donor-address-state">State</label>
<select id="donor-address-state">
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>American Samoa</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
<option>Delaware</option>
<option>District of Columbia</option>
<option>Florida</option>
<option>Georgia</option>
<option>Guam</option>
<option>Hawaii</option>
<option>Idaho</option>
<option>Illinois</option>
<option>Indiana</option>
<option>Iowa</option>
<option>Kansas</option>
<option>Kentucky</option>
<option>Louisiana</option>
<option>Maine</option>
<option>Maryland</option>
<option>Massachusetts</option>
<option>Michigan</option>
<option>Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Northern Mariana Islands</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Puerto Rico</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option>United States Virgin Islands</option>
<option>Utah</option>
<option>Vermont</option>
<option>Virginia</option>
<option>Washington</option>
<option>West Virginia</option>
<option>Wisconsin</option>
<option>Wyoming</option>
</select>
</div>
<div class="form-field">
<label for="donor-address-zip">Zip</label>
<input id="donor-address-zip" class="input" type="text" />
</div>
</li>
<li class="form-field">
<label for="donor-email">Email</label>
<input id="donor-email" class="input invalid" type="email" />
<span class="note text-invalid">Please enter a valid email address</span>
</li>
<li class="form-field">
<label for="donor-phone">Phone Number</label>
<input id="donor-phone" class="input" type="tel" pattern="\d*" />
</li>
<li class="form-field">
<label for="donor-donation-amount">How much would you like to donate?</label>
<input id="donor-donation-amount" class="input" />
</li>
<li class="form-field">
<label for="donor-card-number">Card Number</label>
<input id="donor-card-number" class="input" />
</li>
<li class="form-field">
<label for="donor-card-number">Card Expiry</label>
<input id="donor-card-expiry" name="expiry" type="month" required>
</li>
<li class="form-field">
<label for="donor-inspiration">What inspired your contribution?</label>
<textarea></textarea>
</li>
<button class="button-prominent button-l">Process my contribution</button>
</ul>
</form>
Usage:
highlight-with-avatar #
<section class="slab-blue">
<div class="layout-semibreve">
<div class="highlight highlight-with-avatar">
<img class="highlight-avatar" src="/_media/images/sf-seal.png"/>
<blockquote>
<p>Finding little wins that you can discover along the way, moments when people can come together and solve some small issue — that’s critical to the experience of innovation.</p>
</blockquote>
<p class="attribute">Nigel Jacob, Co-Director <a href="#">Boston’s Office of New Urban Mechanics</a></p>
</div>
</div>
</section>
Usage:

Finding little wins that you can discover along the way, moments when people can come together and solve some small issue — that’s critical to the experience of innovation.
Nigel Jacob, Co-Director Boston’s Office of New Urban Mechanics
lede #
<p class="lede">A <strong>lede</strong>, or <strong>lead</strong>, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word <em>need</em>.</p><!--/.lede-->
Usage: Content preceding the main body of a page or article, giving the reader the main idea of the following content.
A lede, or lead, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.
list-credits #
<h4>We're collaborating with</h4>
<nav class="list-credits" role="navigation">
<ul>
<li><a href="#">New York</a></li>
<li><a href="#">Philadelphia</a></li>
<li><a href="#">Boston</a></li>
<li><a href="#">Seattle</a></li>
<li><a href="#">San Francisco</a></li>
<li><a href="#">DC</a></li>
<li><a href="#">Oakland</a></li>
<li><a href="#">Chicago</a></li>
<li><a href="#">International</a></li>
<li><a href="#">Tampa</a></li>
<li><a href="#">Tulsa</a></li>
<li><a href="#">Chattanooga</a></li>
<li><a href="#">Austin</a></li>
<li><a href="#">Colorado</a></li>
<li><a href="#">Lexington</a></li>
<li><a href="#">Salt Lake</a></li>
<li><a href="#">San Diego</a></li>
<li><a href="#">Cincinnati</a></li>
<li><a href="#">Whitewater</a></li>
<li><a href="#">Raleigh</a></li>
<li><a href="#">Orlando</a></li>
<li><a href="#">Maine</a></li>
<li><a href="#">Kansas City</a></li>
<li><a href="#">Las Vegas</a></li>
<li><a href="#">Durham</a></li>
<li><a href="#">Hawaii</a></li>
<li><a href="#">Detroit</a></li>
</ul>
</nav>
<p class="isolate text-whisper"><a href="#">See all cities</a></p>
Usage:
We're collaborating with
list-logos-muted #
<ul class="list-logos muted">
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
</ul>
<p class="layout-centered"><a href="#">More…</a></p>
Usage: Adding the class of "muted" makes the images black-and-white.
list-logos #
<ul class="list-logos">
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
<li><a href="#"><img src="/_media/images/logo-microsoft.png"/></a></li>
</ul>
<p class="layout-centered"><a href="#">More…</a></p>
Usage: For displaying a list of logos horizontally
logos #
<ul class="layout-grid">
<li class="layout-crotchet"><img src="/_assets/logo-black.png" title="Code for America"/> Black on white</li>
<li class="layout-crotchet"><img src="/_assets/logo-colored.png" title="Code for America"/> Color on white</li>
<li class="layout-crotchet"><img src="/_assets/logo-inversed.png" title="Code for America"/> Inversed</li>
</ul>
Usage:
Black on white
Color on white
Inversed
map #
<div class="slab-blue map-xl">
<iframe width='100%' height='800px' frameBorder='0' src='https://a.tiles.mapbox.com/v3/maban.gf675300/mm/index.html?secure=1#4/34.49/-91.05'></iframe>
</div>
Usage:
masthead-l #
<div class="masthead masthead-l">
<div class="masthead-hero">
<div class="masthead-image"
style="background-image: url('/_media/images/masthead/masthead-3.jpg')">
</div>
</div>
<header class="layout-semibreve masthead-header" role="banner">
<nav class="nav-breadcrumbs" role="navigation">
<ul>
<li><a href="../../../home/">Home</a></li>
<li>Blog</li>
</ul>
</nav>
<h1 class="page-title" >Title</h1>
</header>
</div>
Usage:
Title
masthead-s #
<div class="masthead masthead-s">
<div class="masthead-hero">
<div class="masthead-image"
style="background-image: url('/_media/images/masthead/masthead-3.jpg')">
</div>
</div>
<header class="layout-semibreve masthead-header" role="banner">
<nav class="nav-breadcrumbs" role="navigation">
<ul>
<li><a href="../../../home/">Home</a></li>
<li>Blog</li>
</ul>
</nav>
<h1 class="page-title" >Title</h1>
</header>
</div>
Usage:
Title
masthead-xl #
<div class="masthead masthead-xl">
<header class="layout-semibreve masthead-header">
<h1 class="page-title" >In San Francisco</h1>
<p>One third of HSA clients are unneccessarily cut from food benefits. Four fellows built <a href="#">Promptly</a> offering SMS notifications to keep families fed.</p>
<a class="text-whisper button-invert" href="/_site/about/">Learn more about what we do</a>
</header>
</div>
Usage:
In San Francisco
One third of HSA clients are unneccessarily cut from food benefits. Four fellows built Promptly offering SMS notifications to keep families fed.
Learn more about what we dopost-preview #
<article class="post-preview">
<header class="post-header isolate">
<time class="post-date insulate text-whisper" datetime="{{ page.date }}">November 1st 2013</time>
<h2 class="post-title"><a href="#">People, not data</a></h2>
</header>
<div class="post-author">
<h2 class="text-whisper layout-tight">Written by</h2>
<div class="h-card">
<h3 class="p-name profile-name text-prominent">Zachary Townsend</h3>
<img class="u-photo profile-photo" src="/_media/images/avatar-zachary-townsend.jpg" />
</div>
</div><!-- .post-author -->
<div class="post-body">
<div class="post-content">
<p>This is San Francisco’s main Food Stamps office. People call it twelve-thirty-five, as in 1235 Mission Street. The first time I went was on Thursday, February 7, 2013</p>
</div>
</div><!-- .post-body -->
<a class="post-link" href="/_site/about/">Read this post</a>
</article><!-- .post -->
Usage: Shows a teaser of a blog post with an abstract/excerpt and author information.
profile-small #
<ul class="layout-grid">
<li class="layout-crotchet">
<div class="h-card profile-small">
<h3 class="p-name profile-name">Cyd Harrell</h3>
<img class="u-photo profile-photo" src="/_media/images/avatar-cyd-harrell.jpg" />
<div class="p-note profile-note">
<p>Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco. </p>
<p><a class="link-more" href="#">More</a></p>
<ul class="list-social list-social-horizontal">
<li class="social-website"><a href="http://cydharrell.com/">Website</a></li>
<li class="social-linkedin"><a href="http://www.linkedin.com/in/cydharrell"></i>LinkedIn</a></li>
<li class="social-twitter"><a href="http://twitter.com/cydharrell">@cydharrell</a></li>
</ul>
</div><!-- .note -->
</div><!-- .vcard -->
</li>
<li class="layout-crotchet">
<div class="h-card profile-small">
<h3 class="p-name profile-name">Michal Migurski</h3>
<img class="u-photo profile-photo" src="/_media/images/avatar-michal-migurski.jpg" />
<div class="p-note profile-note">
<p>Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.</p>
<p><a class="link-more" href="#">More</a></p>
<ul class="list-social list-social-horizontal">
<li class="social-website"><a href="http://mike.teczno.com/">Website</a></li>
<li class="social-twitter"><a href="http://twitter.com/michalmigurski">@michalmigurski</a></li>
<li class="social-linkedin"><a href="http://www.linkedin.com/pub/michal-migurski/0/7a/923"></i>LinkedIn</a></li>
<li class="social-github"><a href="https://github.com/migurski">GitHub</a></li>
<li class="social-flickr"><a href="http://www.flickr.com/people/mmigurski/">Flickr</a></li>
</ul>
</div><!-- .note -->
</div><!-- .vcard -->
</li>
<li class="layout-crotchet">
<div class="h-card profile-small">
<h3 class="p-name profile-name">Dana Oshiro</h3>
<img class="u-photo profile-photo" src="/_media/images/avatar-dana-oshiro.jpg" />
<div class="p-note profile-note">
<p>Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.</p>
<p><a class="link-more" href="#">More</a></p>
<ul class="list-social list-social-horizontal">
<li class="social-twitter"><a href="https://twitter.com/danaoshiro">@danaoshiro</a></li>
<li class="social-linkedin"><a href="http://linkedin.com/in/danaoshiro"></i>LinkedIn</a></li>
<li class="social-facebook"><a href="http://facebook.com/danaoshiro">Facebook</a></li>
<li class="social-github"><a href="https://github.com/danaoshiro">Github</a></li>
</ul>
</div><!-- .note -->
</div><!-- .vcard -->
</li>
<li class="layout-crotchet">
<div class="h-card profile-small">
<h3 class="p-name profile-name">Michal Migurski</h3>
<img class="u-photo profile-photo" src="/_media/images/avatar-michal-migurski.jpg" />
<div class="p-note profile-note">
<p>Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.</p>
<p><a class="link-more" href="#">More</a></p>
<ul class="list-social list-social-horizontal">
<li class="social-website"><a href="http://mike.teczno.com/">Website</a></li>
<li class="social-twitter"><a href="http://twitter.com/michalmigurski">@michalmigurski</a></li>
<li class="social-linkedin"><a href="http://www.linkedin.com/pub/michal-migurski/0/7a/923"></i>LinkedIn</a></li>
<li class="social-github"><a href="https://github.com/migurski">GitHub</a></li>
<li class="social-flickr"><a href="http://www.flickr.com/people/mmigurski/">Flickr</a></li>
</ul>
</div><!-- .note -->
</div><!-- .vcard -->
</li>
<li class="layout-crotchet">
<div class="h-card profile-small">
<h3 class="p-name profile-name">Dana Oshiro</h3>
<img class="u-photo profile-photo" src="/_media/images/avatar-dana-oshiro.jpg" />
<div class="p-note profile-note">
<p>Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.</p>
<p><a class="link-more" href="#">More</a></p>
<ul class="list-social list-social-horizontal">
<li class="social-twitter"><a href="https://twitter.com/danaoshiro">@danaoshiro</a></li>
<li class="social-linkedin"><a href="http://linkedin.com/in/danaoshiro"></i>LinkedIn</a></li>
<li class="social-facebook"><a href="http://facebook.com/danaoshiro">Facebook</a></li>
<li class="social-github"><a href="https://github.com/danaoshiro">Github</a></li>
</ul>
</div><!-- .note -->
</div><!-- .vcard -->
</li>
<li class="layout-crotchet">
<div class="h-card profile-small">
<h3 class="p-name profile-name">Cyd Harrell</h3>
<img class="u-photo profile-photo" src="/_media/images/avatar-cyd-harrell.jpg" />
<div class="p-note profile-note">
<p>Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco. </p>
<p><a class="link-more" href="#">More</a></p>
<ul class="list-social list-social-horizontal">
<li class="social-website"><a href="http://cydharrell.com/">Website</a></li>
<li class="social-linkedin"><a href="http://www.linkedin.com/in/cydharrell"></i>LinkedIn</a></li>
<li class="social-twitter"><a href="http://twitter.com/cydharrell">@cydharrell</a></li>
</ul>
</div><!-- .note -->
</div><!-- .vcard -->
</li>
</ul>
Usage:
-
Cyd Harrell
Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco.
-
Michal Migurski
Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.
-
Dana Oshiro
Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.
-
Michal Migurski
Michal joined Code For America in 2013. Previous to CfA, Michal spent nine years as a partner and technology director at celebrated San Francisco design studio Stamen. At Code For America, he is responsible for engineering standards and technical sustainability.
-
Dana Oshiro
Dana Oshiro (Senior Marketing Manager) is a writer and marketing strategist with a love of tech and an interest in how new innovations affect our societies and lives. Prior to her position at CfA she worked in tech journalism, publishing, public affairs, environmental health and anti-poverty advocacy.
-
Cyd Harrell
Cyd Harrell is UX Evangelist at Code for America, where she gets to spend all day helping create better experiences for citizens. She encourages like-minded UXers to apply for the 2014 CfA Fellowship. Before its acquisition in June 2012, she was VP of UX Research at Bolt Peters in San Francisco.
search-global #
<!-- This form is in 2 different places on the main site template, so make sure IDs are unique each time it is used -->
<form class="search-global" id="search-global" role="search">
<input type="search" id="search-global-input" class="search-global-input" autocomplete="off" placeholder="Search" name="search-global" />
<!-- consider applying autofocus="autofocus" to input -->
<button class="search-global-submit" id="search-global-submit" value="Search" type="submit" name="search-global">Search</button>
</form>
Usage:
stat #
<p class="stat"><strong class="stat-heading">Companies<span class="hidden">:</span></strong> <span class="stat-figure">7</span> </p>
<p class="stat"><strong class="stat-heading">Applicants<span class="hidden">:</span></strong> <span class="stat-figure">235</span> </p>
Usage:
Companies: 7
Applicants: 235
wodge-large #
<div class="wodge wodge-l">
<h3 class="wodge-header">Fellowship: Ready to spend a year in civic service</h3>
<img src="http://placehold.it/195x130" class="wodge-image" />
<div class="wodge-text">
<p>Code for America’s Accelerator is an annual 4-month program bringing funding, support, and mentorship to early-stage technology businesses that serve local governments.</p>
</div>
<a href="#" class="button wodge-button">Find out more</a>
</div>
Usage:
Fellowship: Ready to spend a year in civic service
Code for America’s Accelerator is an annual 4-month program bringing funding, support, and mentorship to early-stage technology businesses that serve local governments.
wodge-small #
<div class="wodge wodge-s">
<img src="http://placehold.it/120x120" class="wodge-image" />
<h3 class="wodge-header">Build capacity in your community</h3>
<div class="wodge-button">
<a href="#" class="button">Brigades</a>
<a href="#" class="button">Events</a>
</div>
<div class="wodge-text">
<p>Volunteer researchers, designers, developers and city officials are building better civic technology and deploying apps in more than 40 cities. See who’s hacking near you or check out an event in your city.</p>
</div>
</div>
Usage:
Build capacity in your community
Volunteer researchers, designers, developers and city officials are building better civic technology and deploying apps in more than 40 cities. See who’s hacking near you or check out an event in your city.