City of LA Open Sources Web Style Guide

Hack for LA works with the City of Los Angeles to identify civic tech needs and opportunities for collaboration.  We're really excited that the City's Information Technology Agency has reached out to the Hack for LA community for feedback and participation in the new citywide web style guide.  This style guide/ design template will be used to transition more than 20 City department websites off of obsolete platforms and onto Drupal - and it's giving the City the opportunity to rethink its visual identity online.  We want the design to be functional, beautiful, and prioritize accessibility and usability.  LA has some of the best designers on the planet - and we want our City websites to be the best they can be - to do that, we need your input!

Here's the style guide:

Here are ways you can participate in this process


  1. The City has set up an account on Git (works like GitHub) where you can make suggestions to the style guide directly - Instructions are below (or under the "eye" symbol in the upper right of the style guide nav menu)
  2. If you're a designer who's not comfortable with using git, or writing the html/css, you can send ideas, thoughts, mockups, etc. to  We'll compile your comments and share with the City on Friday

Contributing to the City's Style Guide

Software Requirements

Install the following in the order listed:

  • Git
    For Windows : Make sure you select “Use Git from the Windows Command Prompt”

  • PHP 5.3+
    For Windows:
    For Mac OS X, PHP already installed

  • Ruby

  • Sass

  • Compass Instructions

  1. Create a free account and sign in

  2. Go to the ITA LA City Patterns Repo

  3. Fork the repo to your account ( The Fork link is in the top right of the page )

  4. Run the following Git Commands from the command line
    Bring in the forked repo locally
      git clone [fork-repo-url]
    Branch off of Master with your own branch 
      git checkout -b [branch-name]
    Add an Upstream Remote
      git remote add upstream

Pattern Lab Instructions

The LA City Style Guide is built using Pattern Lab.  Those new to Pattern Lab should get more acquainted with its structure with the instructions below:

  • Go to the Pattern Lab site for documentation
  • Once the LACity Patterns repo is cloned locally open the “lacitypatterns” folder
    rename the “_public” folder to “public”
  • Use the command line to run Compass Watch on the “source” folder in “lacitypatterns”
    compass watch
    Leave the Compass watch terminal window open
  • Use the command line to generate and watch the “lacitypatterns” folder
    php core/builder.php -w -r
    Leave the PHP watch command terminal window open
  • Edit the files in the “source” folder ONLY 
  • Work on LACity Patterns files. Upon save, the Compass and PHP watch commands will run and rewrite the “public” folder
  • Run the following Git Commands from the command line
    Commit your changes to your own forked repo
      git add [files-to-add] or git add -A
      git commit -m "Commit message"
      git push origin [branch-name] -u

Showing 1 reaction

Please check your e-mail for a link to activate your account.
  • Max Pittsley
    commented 2015-07-08 20:51:26 -0700
    Drupal is practically obsolete itself! It’s been called out as a stale solution years ago, which is understandable given its age.

    Wanting to go with something that has history is understandable, but Django would fit that bill. If forward-thinking is the goal, Meteor or even a backendless solution (e.g. Angular) would be the way to go.

    I hope it’s not too late to change the target platform, I worry that Drupal would limit the city’s ability to hire developers. It could be that I don’t understand the industry well enough, but I was learning Drupal 9 years ago – I don’t know of any fellow developers who would consider touching it.

    The style guide itself, however, looks like it’s coming along quite well. It will be interesting to see an open-source project that’s more about visuals than functionality! (of course, recognizing that there is function to visual guidelines)