This is the pattern library for the City of Boston. It’s currently a work in progress, but we’re adding to it every day. Currently, it powers much of and all of Boston’s 311 web portal.

Getting Started

To get started with Crispus, you’ll need to add the styles. This can be done with:

<link href=",400i|Montserrat:400,700" rel="stylesheet">
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="" />
<!--[if lt IE 10]>
  <link media="all" rel="stylesheet" href="">

This will give you all of the fonts that you need as well as all Crispus stylings.


While we strive for no required javascript, there are a few places where it is necessary. Some components like the nav and video use inline scripts. If integrating those, make sure to include those scripts (for now).

Other components can have their scripts included with:

<script src=""></script>

Application Wrapper also provides a prebuilt header / footer layout for use with your applications. This can be used from:

This template needs to be used in a dynamic manner. For example, during an application’s build process, the layout could be downloaded and applied to the application. An exmaple of this can be reviewed on Boston’s 311 website code.

The benefit of adding this into an application is that it will more seamlessly fit within the ecosystem and automatically includes Crispus.