This repository has been archived by the owner on Nov 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
Home
Harris Schneiderman edited this page Aug 4, 2017
·
15 revisions
A developer's guide to using the pattern library
If the application has dynamically loaded content a custom event will tell all of the pattern library's scripts to reassess everything. Just fire the "dqpl:ready" event like so:
// content is now loaded so tell the pattern library...
var e = new Event('dqpl:ready');
document.dispatchEvent(e);- Badges
- Buttons
- Checkboxes
- Definition Tooltips
- Fields
- Links
- Option Menus
- Radio Buttons
- Selects
- Toasts
The pattern library comes with the flexbox grid system 'flexboxgrid' (it is included in pattern-library.css). I suggest reading the flexgrid documentation
<body>
<div class="dqpl-skip-container" data-skip-to-text="Skip to" data-remove-tabindex-on-blur="true">
<a href="#" class="dqpl-skip-link">
<span class="dqpl-skip-one">Skip to</span>
<span class="dqpl-skip-two">Main content</span>
</a>
</div>
<div class="dqpl-top-bar">
<ul role="menubar">
<li class="dqpl-menu-trigger" role="menuitem" tabindex="0" aria-label="Menu" aria-controls="dqpl-side-bar" aria-haspopup="true">
<div class="fa fa-bars" role="presentation" aria-hidden="true"></div>
</li>
<li class="home-base" role="menuitem" tabindex="-1">
<a href="/" tabindex="-1">
<img src="/assets/img/logo.png" alt="Deque">
</a>
</li>
</ul>
</div>
<ul class="dqpl-side-bar dqpl-main-nav" id="dqpl-side-bar" role="menu">
<li role="menuitem" tabindex="0">Menu item #1</li>
<li role="menuitem" tabindex="-1">Menu item #2</li>
</ul>
<div class="dqpl-scrim" id="dqpl-side-bar-scrim"></div>
<div class="dqpl-layout">
<div class="dqpl-main-content" role="main" data-skip-to-name="Main Content">
<!-- put main content stuff here -->
</div>
</div>
<footer role="contentinfo"></footer>
<!-- assuming a build script put pattern-library.js in assets/js/ (if not, just point to wherever it is) -->
<script src="/assets/js/pattern-library.js"></script>
</body>When you install the pattern library you obviously get the javascript and css assets but it also comes with the variables.less which is extremely useful because it makes it easy to use stuff like colors / font-sizes / paddings / margins / z-indices / many many useful mixins that the pattern library uses.