patterns's Introduction

patterns

Phila.gov Pattern Library

Using Phila.gov Patterns

The patterns CSS includes a customized 24-column grid version of Foundation 5.5.2. Just add a few lines to <head>. For a sticky footer, also include the patterns.min.js file.

The bare minimum

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cityofphiladelphia.github.io/patterns/dist/0.11.1/css/patterns.css">
<script type='text/javascript' src='//cityofphiladelphia.github.io/patterns/dist/0.11.1/js/patterns.min.js'></script>

Also recommended

Ionicons are used in alerts and modernizr is included for sad, old browsers.

<link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js?ver=2.8.3'></script>

Local Setup

Phila.gov Patterns uses Jekyll to generate pattern files.

Install Jekyll $ gem install jekyll
Clone this repository
cd into the patterns directory
Run: $ jekyll serve --baseurl ''
Navigate to http://localhost:4000

Versioning

Phila.gov Patterns will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:

{major}.{minor}.{patch}

###Guidelines

Breaking backward compatibility bumps the major (and resets the minor and patch)
New patterns (without breaking backward compatibility) bumps the minor (and resets the patch)
Bug fixes and misc changes bumps the patch

For more information on SemVer, please visit http://semver.org.

Recommend Projects