UCD Marketing Policies and Procedure

UCD Marketing Policies and Procedure:

All usage of UCD branding must abide by Policy 310-65:

License for "Proxima Nova" web font

WARNING! In order for the Proxima Nova font to render, the site must have the domain name For development purposes, .local and *localhost will also work.

Getting Started


If you are a Windows user then it is recommended you use Git for Windows.

You'll need node.js.

After installing Node you should install Gulp and Bower globally

$ sudo npm install --global gulp bower

Install and setup

After cloning and changing into that directory, run this to install dependencies (you may need to use sudo if you get errors):

$ npm install
$ bower install

You may have to run that again for updates; so it may be wise to save this: $ npm install && bower install. If you have any problems; this is the first thing to run.

Finally, to do an initial build of the site and start watching for changes run gulp

$ gulp

Assets (CSS & JS)

To add either CSS or JS to Pattern Lab, use one of these methods:


Bower is a package manager for the web. It is useful for adding third party libraries for both development and site inclusion.

Install any Bower component with the --save or --save-dev flag. You can search for anything that Bower can install and run:

$ bower install {thing} --save

Use --save when a package needs to be added as a dependency to the browser such as using jQuery. The js and css in these packages will automatically be compiled to the scripts.js and vendor.css files.

Use --save-dev when a package is specifically for development purposes like when using a Sass library such as Breakpoint

Bower Overrides

If a Bower package does not specify all the assets you need in its "main" property, then you can add or delete other assets it has packaged with an override. You can also remove any dependencies that it might want to include. This is useful if a package adds more files than you need or you want to use a different file they offer rather than the default.

Add overrides to the bower.json file.

  "overrides": {
    "package-name": {
      "main": ["file-you-want-included.js"],
      "dependencies": {}

Bower Include Paths

If Bower is used to add dependencies and libraries for Sass then it is helpful to add it's includePaths to the gulp-config.yml file. This allows shorter import names to work in Sass files.

With an includePaths added to the gulp-config.yml file a simple @import "breakpoint"; can be used instead of @import "../bower_components/breakpoint-sass/stylesheets/breakpoint";".

This also helps with any dependencies that Bower package might rely on.

Editing the head or foot partial

If you want to add custom scripts or tags into the header or footer then you can use these files:

  • pattern-lab/source/_patterns/00-atoms/00-meta/_00-head.mustache
  • pattern-lab/source/_patterns/00-atoms/00-meta/_01-foot.mustache

About Gulp

Gulp is a task/build runner for development. It allows you to do a lot of stuff within your development workflow. You can compile sass files, uglify and compress js files and much more.

Local Gulp Configuration

Gulp configuration can be customized to a local environment by creating a gulp-config--custom.yml file. Any custom config specific to a local setup can be placed in here and it will not be committed to Git.

Default configuration is found in gulp-config.yml. You can copy out config you want to change into your custom file.

Gulp Tasks

There are 4 main gulp tasks you should be aware of. Just add gulp before each task like $ gulp help.

  1. Help - Displays a list of all the available tasks with a brief discription of each
  2. Default - Generate the entire site and start watching for changes to live reload in the browser
  3. Compile - Generate the entire site with all assets such as css and js
  4. Validate - Validate CSS and JS by linting

$ gulp is the one most often used and is the same as $ gulp default

Using Gulp with PHPStorm

PHPStorm has Gulp Tool Window for easy use of Gulp tasks. Right-click on the gulpfile.js file and choose Show Gulp Tasks to open the window.

Double click default to start gulp and begin watching files for changes.

You can double click help to see descriptions of available tasks


BrowserSync is being used by Gulp to allow live reloading so that changes will be injected automatically into the site without having to reload.

Export and Sync styles into a New Site

New Site Starterkit

You can wire up a new site with all the styles, config, gulp tasks, and directory structure with a simple Gulp command. However, first you need to add some custom config so that it knows where to stick your new code.

  1. Create a gulp-config--custom.yml file and add the following code with the dest set to the location for where you want the code to go:
  enabled: true
  newsite: true
  dest: ~/location/to/stick/the/code
  1. Now you can just run a simple Gulp command to generate all the starterkit code.

    $ gulp newsite

  2. Finally, edit the package.json and bower.json files to customize to your site. As well, you can edit the gulp-config.yml file to your specs.

Sync Pattern Lab styles into an external site's theme

  1. Add the following code into a gulp-config--custom.yml file and set the dest to the location for where you want the code to go:
  enabled: true
  dest: ~/location/to/stick/the/code
  1. Run the theme sync gulp task:

    $ gulp themesync

About Pattern Lab

The PHP version of Pattern Lab is, at its core, a static site generator. It combines platform-agnostic assets, like the Mustache-based patterns and the JavaScript-based viewer, with a PHP-based "builder" that transforms and dynamically builds the Pattern Lab site. By making it a static site generator, Pattern Lab strongly separates patterns, data, and presentation from build logic.


You can play with a demo of the front-end of Pattern Lab at

Getting Started

Working with Patterns

Patterns are the core element of Pattern Lab. Understanding how they work is the key to getting the most out of the system. Patterns use Mustache so please read Mustache's docs as well.

Creating & Working With Dynamic Data for a Pattern

The PHP version of Pattern Lab utilizes Mustache as the template language for patterns. In addition to allowing for the inclusion of one pattern within another it also gives pattern developers the ability to include variables. This means that attributes like image sources can be centralized in one file for easy modification across one or more patterns. The PHP version of Pattern Lab uses a JSON file, source/_data/data.json, to centralize many of these attributes.

Using Pattern Lab's Advanced Features

By default, the Pattern Lab assets can be manually generated and the Pattern Lab site manually refreshed but who wants to waste time doing that? Here are some ways that Pattern Lab can make your development workflow a little smoother: