Socket
Socket
Sign inDemoInstall

deque-pattern-library

Package Overview
Dependencies
0
Maintainers
2
Versions
37
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    deque-pattern-library

Deque Pattern Library


Version published
Weekly downloads
1.1K
decreased by-20%
Maintainers
2
Install size
14.5 MB
Created
Weekly downloads
 

Changelog

Source

7.0.0 (2019-09-03)

Features

  • implement smaller FTPO arrow (#125) (2fe8c60)
  • position ftpos absolutely (#126) (d9a2191)

BREAKING CHANGES

  • ftpos have been changed from relative to absolute position.
  • footprint of arrow has been changed to be smaller.

<a name="6.1.0"></a>

Readme

Source

Pattern Library CircleCI

Installation

NPM

$ npm install deque-pattern-library

Bower

$ bower install deque-pattern-library

CDN

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>

Fonts

Including font awesome (v4)

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

CDN

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

npm

$ npm install font-awesome --save

Including Roboto

The patterns look best when the roboto font is available.

CDN

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 it:

$ npm install typeface-roboto --save

include it (in your entry-point):

import 'typeface-roboto';

Usage

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?

  • 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.

Development

  • 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

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

Debugging

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'.

FAQs

Last updated on 03 Sep 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc