⚠️ DEPRECATION NOTICE ⚠️
$ 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="https://unpkg.com/deque-pattern-library/dist/css/pattern-library.min.css" /> <!-- or --> <link rel="stylesheet" href="https://unpkg.com/deque-pattern-library/dist/css/pattern-library.css" />
<script src="https://unpkg.com/deque-pattern-library/dist/js/pattern-library.min.js"></script> <!-- or --> <script src="https://unpkg.com/deque-pattern-library/dist/js/pattern-library.js"></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
The patterns look best when the roboto font is available.
You can include it using a CDN, like so:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700">
$ npm install typeface-roboto --save
include it (in your entry-point):
Just drop the css and js into your page:
<html> <head> ... <link rel="stylesheet" href="./node_modules/deque-pattern-library/dist/css/pattern-library.min.css" /> </head> <body> ... <script src="./node_modules/deque-pattern-library/dist/js/pattern-library.min.js"></script> </body> </html>
What is included?
variables.less: All of the pattern library's colors and mixins
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 run buildor for development -
npm run devwhich 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 (
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
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'.