chicago / design-system-site

This site is an example site for Chicago Digital Web Sites. It uses the latest public version of the Chicago Design System theme on our CDN.

City of Chicago Design System Site

This site is an example site for Chicago Digital Web Sites. It is the most recent published version of the Chicago Design System theme, found on our CDN. Our current stable version is 0.9.3.

Contents

In this sample site you'll find a series of template pages with the most common uses of our components and layout.

• General Landing Page.
• Department Landing Page.
• General Content page.
• Not Found page (404).
• Contac Us page.
• Forms and common uses.
• Grid layout examples (Bootstrap columns).
• Favicons.
• Social share cards and examples.

Quick start

Use the City of Chicago CDN as follows:

CSS

Copy and paste the stylesheet links into the of your site or before all other stylesheets to load our CSS. Our Bootstrap implementation:

• https://webapps1.chicago.gov/cdn/chiwds/0.9.3/css/main.min.css

Font Awesome icons (5.13.0):

• https://webapps1.chicago.gov/cdn/FontAwesome-5.13.0/css/all.min.css

Accessible datepicker:

• https://webapps1.chicago.gov/cdn/chiwds/0.9.3/css/main.min.css
• https://webapps1.chicago.gov/cdn/chiwds/0.9.3/css/main.min.css

JavaScripts

Because we are an implementation of Boostrap 4.x.x you will need to add the following javascripts in order to use all the components available for Bootstrap:

• https://webapps1.chicago.gov/cdn/jQuery-3.4.1/jquery-3.4.1.min.js
• https://webapps1.chicago.gov/cdn/Bootstrap-4.3.1/js/bootstrap.bundle.min.js
• https://webapps1.chicago.gov/cdn/chiwds/0.9.3/js/uswds.min.js

Accessible datepicker:

• https://webapps1.chicago.gov/cdn/chiwds/0.9.3/js/datepicker.js