Skip to content
JavaScript CSS HTML
Branch: master
Clone or download

Pattern Library CircleCI



$ npm install deque-pattern-library


$ bower install deque-pattern-library


Thanks to unpkg, you can link directly to deque pattern library files.

<link rel="stylesheet" href="" />
<!-- or -->
<link rel="stylesheet" href="" />
<script src=""></script>
<!-- or -->
<script src=""></script>


Including font awesome (v4)

The pattern library relies on font awesome meaning including it is required.


You can include it using a CDN (see font awesome getting started docs)


$ npm install font-awesome --save

Including Roboto

The patterns look best when the roboto font is available.


You can include it using a CDN, like so:

<link rel="stylesheet" href=",300,400,500,700">


install it:

$ npm install typeface-roboto --save

include it (in your entry-point):

import 'typeface-roboto';


Just drop the css and js into your page:

    <link rel="stylesheet" href="./node_modules/deque-pattern-library/dist/css/pattern-library.min.css" />
    <script src="./node_modules/deque-pattern-library/dist/js/pattern-library.min.js"></script>

What is included?

  • css
    • pattern-library.css
    • pattern-library.min.css
  • js
    • pattern-library.js
    • pattern-library.min.js
  • less
    • variables.less: All of the pattern library's colors and mixins

Getting started

Please refer to the wiki

Adding new components/composites

All additions must be approved by our UX team so before working on anything, please create an Issue including a detailed description on the requested pattern and several use cases for it.


  • npm install
  • npm run build or for development - npm run dev which will rebuild when files are changed

NOTE: if a new component or composite is added, remember to create a quick wiki entry explaining what is absolutely necessary in using this widget.


Testing is done using mochify along with the 'chai' assertion library (assert.isFalse(!!0)). The test/ directory structure matches the lib/ directory. This means that if you're testing lib/components/foo/index.js, you would create a test in test/components/foo/index.js. See the test/ directory for examples. The tests are browserified and transpiled before running in the phantomjs headless browser so you can require / import stuff and use ES6 syntax in the tests.

$ npm test

or to have a watcher re-run tests every time you add a new test:

$ npm run test:dev


The pattern library uses the debug module. To turn all debugging on, execute: localStorage.debug = 'dqpl:*' and refresh the page. The directory structure of lib is used as the debug naming convention. For example, to specifically debug the "selects" component, execute: localStorage.debug = 'dqpl:components:selects'.

You can’t perform that action at this time.