Menu

Style Guide

  1. View as patchwork

Templates

  1. Home
  2. Apps
  3. App (Promptly)
  4. About
  5. Library
  6. City (Boston)
  7. Fellows
  8. Post
  9. Governments
  10. Donate (Landing)
  11. Donate
  12. Citizens
  13. Documentation

Website Style Guide

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-embed
  • 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-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:
Link button
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:
Link button
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:
Link button
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:
Link button
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".
Link button
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:
Link button
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:
Link button
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:
Link button
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:
Cancel
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:
Link button
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:
Link button
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:
Link button
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:
Link button
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:
Link button
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:
Checkboxes with captions *
  • Note about this option
  • Note about this option
  • Note about this option
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:
Checkboxes *
Note about these options
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:
Radios *
Note about these options
form-fieldset # <form> <fieldset> <legend>Legend</legend> <p><small class="note">Required fields are marked <abbr title="Required">*</abbr></small></p> </fieldset> </form> 
Usage:
Legend

Required fields are marked *

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:
Checkbox *
  • Note about these option
  • Note about these option
  • Note about these option
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:
Checkbox *
Note about these options
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:
Radio *
Note about these options
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:
  • Note about this field
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-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

h1 # <h1>A new kind of public service</h1> 
Usage:

A new kind of public service

h2 # <h2>A new kind of public service</h2> 
Usage:

A new kind of public service

h3 # <h3>A new kind of public service</h3> 
Usage:

A new kind of public service

h4 # <h4>A new kind of public service</h4> 
Usage:

A new kind of public service

h5 # <h5>A new kind of public service</h5> 
Usage:
A new kind of public service
h6 # <h6>A new kind of public service</h6> 
Usage:
A new kind of public service

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:
  1. Browse the applications we've listed.
  2. 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.
  3. 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

audio # <audio src="/_media/audio/audio.mp3" controls></audio> 
Usage:
img # <img src="/_media/images/big-data.jpg" alt="The Code for America team"/> 
Usage:
The Code for America team
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 &amp; 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:
For more details, contact Michal Migurski.
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.

cite # <p><cite>Los Angeles Times</cite>, August 26, 2013</p> 
Usage:

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;
}
del # <p>We still have some have hats <del>and hoodies</del> left.</p> 
Usage:

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.
em # <p>By the people, <em>for</em> the people.</p> 
Usage:

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.

Zachary Townsend, in Why I'm mentoring for America, from the Code for America Blog, November 1st 2013
figure-img # <figure> <img src="/_media/images/big-data.jpg" alt=""/> <figcaption> The Code for America team </figcaption> </figure> 
Usage:
The Code for America team
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:
Largest Meetup Groups
  1. #betaNYC, a Code for America Brigade for NYC: 1,281 Members
  2. Code for America Philly: 488 Members
  3. Code for Boston: 427 Members
  4. Code for Seattle: 379 Members
  5. Code for San Francisco - Civic Hack Night: 336 Members
  6. Code for DC: 218 Members
  7. OpenOakland: The Code for America Brigade in Oakland: 200 Members
  8. Colorado Code for Communities: 173 Members
  9. Code for Los Angeles: 149 Members
  10. Arlington Code Shop: 148 Members
hr # <hr/> 
Usage:
kbd # <p>To take a screenshot on your Mac, press <kbd>&#8984; Cmd</kbd> + <kbd>&#8679; 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.

strong # <p>This event is in San Francisco. <strong>Watch out for bears</strong>.</p> 
Usage:

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

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.

alert # <div class="alert"> <p>This is a general notification.</p> </div><!-- .alert --> 
Usage:

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:
Promptly
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.
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
  • 2pm: An event
  • 4pm: Another event
 5 6 7 8 9
10
  • 2pm: An event
  • 4pm: 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.
 11 12 13 14 15
  • 2pm: An event
 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
  • 2pm: 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.
  • 4pm: Another event
31 1 2 3
  • 2pm: An event
  • 4pm: Another event
 4 5 6
Next 7 days:
caption # <p class="note">Your email address will not be published.</p><!--/.caption--> 
Usage:

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 invite

Join the conversation

    • Join now
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.

Why I Code for America

Richa Agarwal

2012 Fellow

Co-creator of Recordtrac

Meet more civic hackers

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:

See all cities

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

See all cities

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:

Donate now

  • Please enter a valid email address
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

See all cities

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&hellip;</a></p> 
Usage: Adding the class of "muted" makes the images black-and-white.

More…

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&hellip;</a></p> 
Usage: For displaying a list of logos horizontally

More…

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:
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:
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 do
nav-page # <nav role="navigation" class="nav nav-page"> <ul class="list"> <li><a href="#" rel="prev">Previous</a></li> <li><a href="#">1</a></li> <li><a href="#" class="is-active">2</a></li> <li><a href="#">3</a></li> <li><a href="#" rel="next">Next</a></li> </ul> </nav><!--/.nav-page--> 
Usage:
post-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.

People, not data

Written by

Zachary Townsend

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

Read this post
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.

    More

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

    More

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

    More

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

    More

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

    More

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

    More

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

teasers-apps # <ul class="teasers"> <li class="layout-crotchet"> <article class="teaser teaser-app"> <header class="teaser-header"> <a href="promptly/"> <h1 class="teaser-title">Promptly</h1> </a> </header> <div class="teaser-body"> <p>Promptly text messages San Francisco Human Services Agency clients with important information to keep them enrolled in services.</p> <h2 class="text-whisper">Environment</h2> <p>Ruby on Rails with Ohana API backend</p> <h2 class="text-whisper">Redeploy</h2> <p>Programming and design skills</p> <p><a href="promptly/">Learn more about this app</a></p> </div> <footer class="teaser-footer"> <a href="promptly/" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/logo-promptly.jpg" /> </a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser teaser-app"> <header class="teaser-header"> <a href="promptly/"> <h1 class="teaser-title">Civic Insight</h1> </a> </header> <div class="teaser-body"> <p>Civic Insight (formerly BlightStatus) offers residents up-to-date information on the status of underutilized properties in their community.</p> <h2 class="text-whisper">Environment</h2> <p>Ruby on Rails with Ohana API backend</p> <h2 class="text-whisper">Redeploy</h2> <p>Programming and design skills</p> <p><a href="promptly/">Learn more about this app</a></p> </div> <footer class="teaser-footer"> <a href="promptly/" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/logo-civicinsight.jpg" /> </a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser teaser-app"> <header class="teaser-header"> <a href="promptly/"> <h1 class="teaser-title">TextMyBus</h1> </a> </header> <div class="teaser-body"> <p>TextMyBus provides a simple text messaging service to relay real time transit information to riders.</p> <h2 class="text-whisper">Environment</h2> <p>Ruby on Rails with Ohana API backend</p> <h2 class="text-whisper">Redeploy</h2> <p>Programming and design skills</p> <p><a href="promptly/">Learn more about this app</a></p> </div> <footer class="teaser-footer"> <a href="promptly/" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/logo-textmybus.jpg" /> </a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser teaser-app"> <header class="teaser-header"> <a href="promptly/"> <h1 class="teaser-title">Localdata</h1> </a> </header> <div class="teaser-body"> <p>Localdata is a digital toolkit that allows organizers and canvassers to collect and manage place-based data.</p> <h2 class="text-whisper">Environment</h2> <p>Ruby on Rails with Ohana API backend</p> <h2 class="text-whisper">Redeploy</h2> <p>Programming and design skills</p> <p><a href="promptly/">Learn more about this app</a></p> </div> <footer class="teaser-footer"> <a href="promptly/" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/logo-localdata.jpg" /> </a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser teaser-app"> <header class="teaser-header"> <a href="promptly/"> <h1 class="teaser-title">Promptly</h1> </a> </header> <div class="teaser-body"> <p>Promptly text messages San Francisco Human Services Agency clients with important information to keep them enrolled in services.</p> <h2 class="text-whisper">Environment</h2> <p>Ruby on Rails with Ohana API backend</p> <h2 class="text-whisper">Redeploy</h2> <p>Programming and design skills</p> <p><a href="promptly/">Learn more about this app</a></p> </div> <footer class="teaser-footer"> <a href="promptly/" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/logo-promptly.jpg" /> </a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser teaser-app"> <header class="teaser-header"> <a href="promptly/"> <h1 class="teaser-title">Civic Insight</h1> </a> </header> <div class="teaser-body"> <p>Civic Insight (formerly BlightStatus) offers residents up-to-date information on the status of underutilized properties in their community.</p> <h2 class="text-whisper">Environment</h2> <p>Ruby on Rails with Ohana API backend</p> <h2 class="text-whisper">Redeploy</h2> <p>Programming and design skills</p> <p><a href="promptly/">Learn more about this app</a></p> </div> <footer class="teaser-footer"> <a href="promptly/" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/logo-civicinsight.jpg" /> </a> </footer> </article> </li> </ul> 
Usage:

  • Promptly

    Promptly text messages San Francisco Human Services Agency clients with important information to keep them enrolled in services.

    Environment

    Ruby on Rails with Ohana API backend

    Redeploy

    Programming and design skills

    Learn more about this app

  • Civic Insight

    Civic Insight (formerly BlightStatus) offers residents up-to-date information on the status of underutilized properties in their community.

    Environment

    Ruby on Rails with Ohana API backend

    Redeploy

    Programming and design skills

    Learn more about this app

  • TextMyBus

    TextMyBus provides a simple text messaging service to relay real time transit information to riders.

    Environment

    Ruby on Rails with Ohana API backend

    Redeploy

    Programming and design skills

    Learn more about this app

  • Localdata

    Localdata is a digital toolkit that allows organizers and canvassers to collect and manage place-based data.

    Environment

    Ruby on Rails with Ohana API backend

    Redeploy

    Programming and design skills

    Learn more about this app

  • Promptly

    Promptly text messages San Francisco Human Services Agency clients with important information to keep them enrolled in services.

    Environment

    Ruby on Rails with Ohana API backend

    Redeploy

    Programming and design skills

    Learn more about this app

  • Civic Insight

    Civic Insight (formerly BlightStatus) offers residents up-to-date information on the status of underutilized properties in their community.

    Environment

    Ruby on Rails with Ohana API backend

    Redeploy

    Programming and design skills

    Learn more about this app

teasers-blog # <ul class="teasers"> <li class="layout-crotchet"> <article class="teaser"> <header class="teaser-header"> <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html"> <h1 class="teaser-title">Why I'm mentoring for America, by Zacahry Townsend</h1> </a> </header> <div class="teaser-body"> <p>This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html">Read more</a></p> </div> <footer class="teaser-footer"> <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/big-data.jpg" /> <span class="teaser-type teaser-type-article">Article</span> </a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser"> <header class="teaser-header"> <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html"> <h1 class="teaser-title">Why I'm mentoring for America, by Zacahry Townsend</h1> </a> </header> <div class="teaser-body"> <p>This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html">Read more</a></p> </div> <footer class="teaser-footer"> <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/big-data.jpg" /> <span class="teaser-type teaser-type-article">Article</span> </a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser"> <header class="teaser-header"> <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html"> <h1 class="teaser-title">Why I'm mentoring for America, by Zacahry Townsend</h1> </a> </header> <div class="teaser-body"> <p>This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html">Read more</a></p> </div> <footer class="teaser-footer"> <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/big-data.jpg" /> <span class="teaser-type teaser-type-article">Article</span> </a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser"> <header class="teaser-header"> <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html"> <h1 class="teaser-title">Why I'm mentoring for America, by Zacahry Townsend</h1> </a> </header> <div class="teaser-body"> <p>This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html">Read more</a></p> </div> <footer class="teaser-footer"> <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/big-data.jpg" /> <span class="teaser-type teaser-type-article">Article</span> </a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser"> <header class="teaser-header"> <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html"> <h1 class="teaser-title">Why I'm mentoring for America, by Zacahry Townsend</h1> </a> </header> <div class="teaser-body"> <p>This post is part of an ongoing series by Code for America mentors. Zachary is a 2013 mentor at Code for America for the startups program. <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html">Read more</a></p> </div> <footer class="teaser-footer"> <a href="../2013/11/13/why-im-mentoring-for-america-by-zachary-townsend.html" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/big-data.jpg" /> <span class="teaser-type teaser-type-article">Article</span> </a> </footer> </article> </li> </ul> 
Usage:
teasers # <ul class="teasers"> <li class="layout-crotchet"> <article class="teaser"> <header class="teaser-header"> <a href="#"> <h1 class="teaser-title">Technology team is developing smart solutions to everyday city problems</h1> </a> </header> <div class="teaser-body"> <p>On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams [&hellip;] <a href="#">Read more</a></p> </div> <footer class="teaser-footer"> <a href="#" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/big-data.jpg" /> <span class="teaser-type teaser-type-article">Article</span> </a> <a href="#" class="teaser-source">The Boston Globe</a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser teaser-pdf"> <header class="teaser-header"> <a href="#"> <h1 class="teaser-title">Open Data Barometer – Open Data Research Network</h1> </a> </header> <div class="teaser-body"> <p>This project was supported with funding from the Open Data Institute</p> <a href="#">Download the PDF [18.3MB]</a></p> </div> <footer class="teaser-footer"> <a href="#" class="teaser-masthead"> <span class="teaser-type teaser-type-data">Open Data</span> </a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser teaser-video"> <header class="teaser-header"> <a href="#"> <h1 class="teaser-title">Technology team is developing smart solutions to everyday city problems</h1> </a> </header> <div class="teaser-body"> <p>On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams [&hellip;] <a href="#">Read more</a></p> </div> <footer class="teaser-footer"> <a href="#" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/big-data.jpg" /> <span class="teaser-action-play"></span> <span class="teaser-type teaser-type-data">Open Data</span> </a> <a href="#" class="teaser-source">The Boston Globe</a> </footer> </article> </li> <li class="layout-crotchet"> <article class="teaser"> <header class="teaser-header"> <a href="#"> <h1 class="teaser-title">Technology team is developing smart solutions to everyday city problems</h1> </a> </header> <div class="teaser-body"> <p>On a Friday in the middle of February, Michael Hughes, director of the Boston Public Schools Transportation Department, met with seven visiting fellows from Code for America, a new nonprofit organization that matches teams [&hellip;] <a href="#">Read more</a></p> </div> <footer class="teaser-footer"> <a href="#" class="teaser-masthead"> <img class="teaser-image" src="/_media/images/big-data.jpg" /> <span class="teaser-type teaser-type-data">Open data</span> </a> <a href="#" class="teaser-source">The Boston Globe</a> </footer> </article> </li> </ul> 
Usage:
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.

Find out more
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

Brigades Events

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.