Harris Schneiderman edited this page Aug 4, 2017 · 15 revisions

Pattern Library Wiki

A developer's guide to using the pattern library

Dynamic content

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);

Components

Composites

Grid system

The pattern library comes with the flexbox grid system 'flexboxgrid' (it is included in pattern-library.css). I suggest reading the flexgrid documentation

Example Markup

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

What do I get with the pattern library?

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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.