access-nyc-patterns

<!DOCTYPE html> <html class="bg-color-white text-size-0" lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <link href="styles/site-default.css" rel="stylesheet" /> <title>Patterns</title> <noscript> <style> body { visibility: visible !important; } </style> </noscript> <script type="text/javascript"> function load() { document.body.style.visibility = 'visible' }; </script> </head> <body class="bg-color-white" onload="load()" style="visibility: hidden;"> <a class="sr-only" href="#main-content">Skip to main content</a> <div class="min-h-screen"> <header class="px-2"> <div class="border-b border-color-grey-light"> <div class="flex items-center justify-between p-2 screen-tablet:py-4 screen-tablet:px-2"> <div> <h1 class="m-0 p-0 leading-normal"> <a href="index"><span class="hidden">ACCESS NYC</span> <svg aria-hidden="true" class="icon-logo-mark screen-tablet:hidden"> <use xlink:href="#icon-logo-mark"></use> </svg> <svg aria-hidden="true" class="icon-logo-full--large text-color-blue-dark hidden screen-tablet:inline-block"> <use xlink:href="#icon-logo-full"></use> </svg> </a> </h1> </div> <div class="flex items-center"> <h2 class="text-font-size-small m-0 text-color-blue-dark screen-tablet:hidden">Patterns</h2> <h2 aria-hidden="true" class="type-h1 m-0 text-color-blue-dark hidden screen-tablet:inline-block">Patterns</h2> <nav class="text-font-size-small"> <a class="rounded-lg text-color-blue-dark border-2 no-underline px-1 ml-2 hidden screen-tablet:inline-block" href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS">0.0.11-11</a> <a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS">0.0.11-11</a> <a class="ml-1 screen-tablet:ml-2" data-js="toggle" href="#main-menu">Menu</a> </nav> </div> </div> </div> </header> <aside aria-hidden="true" class="text-font-size-small bg-color-blue-light hidden hidden:overflow animated" id="main-menu" style="position:relative;top:-1px"> <div class="page-wrapper"> <div class="screen-tablet:flex py-4"> <nav class="screen-tablet:flex-1 mb-1 px-2"><span class="screen-tablet:block screen-tablet:border-b border-color-white p-1">Main;</span> <a class="block p-1" href="index">Home</a> <a class="block p-1" href="https://www.npmjs.com/package/access-nyc-patterns">NPM</a> <a class="block p-1" href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS">GitHub</a> </nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="screen-tablet:block screen-tablet:border-b border-color-white p-1">Elements;</span> <a class="block p-1" href="buttons">Buttons</a> <a class="block p-1" href="checkboxes">Checkboxes</a> <a class="block p-1" href="colors">Colors</a> <a class="block p-1" href="dividers">Dividers</a> <a class="block p-1" href="icons">Icons</a> <a class="block p-1" href="inputs">Inputs</a> <a class="block p-1" href="layouts">Layouts</a> <a class="block p-1" href="links">Links</a> <a class="block p-1" href="lists">Lists</a> <a class="block p-1" href="nav">Nav</a> <a class="block p-1" href="program-labels">Program Labels</a> <a class="block p-1" href="radios">Radios</a> <a class="block p-1" href="tables">Tables</a> <a class="block p-1" href="tooltips">Tooltips</a> <a class="block p-1" href="toggles">Toggles</a> <a class="block p-1" href="typography">Typography</a> <a class="block p-1" href="selects">Selects</a> </nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="screen-tablet:block screen-tablet:border-b border-color-white p-1">Components;</span> <a class="block p-1" href="accordion">Accordion</a> <a class="block p-1" href="alert-box">Alert Box</a> <a class="block p-1" href="card">Card</a> <a class="block p-1" href="checklist">Checklist</a> <a class="block p-1" href="disclaimer">Disclaimer</a> <a class="block p-1" href="filter">Filter</a> <a class="block p-1" href="header">Header</a> <a class="block p-1" href="member-list">Member List</a> <a class="block p-1" href="nearby-stops">Nearby Stops</a> <a class="block p-1" href="text-controller">Text Controller</a> <a class="block p-1" href="share-form">Share Form</a> <a class="block p-1" href="side-nav">Side Nav</a> <a class="block p-1" href="question">Question</a> </nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="screen-tablet:block screen-tablet:border-b border-color-white p-1">Objects;</span> <a class="block p-1" href="announcements">Announcements</a> <a class="block p-1" href="banner">Banner</a> <a class="block p-1" href="card-list">Card Lists</a> <a class="block p-1" href="content">Content</a> <a class="block p-1" href="footer">Footer</a> <a class="block p-1" href="mobile-nav">Mobile Nav</a> <a class="block p-1" href="navigation">Navigation</a> <a class="block p-1" href="search-box">Search Box</a> </nav> </div> </div> </aside> <main class="pt-4" id="main-content"> <article class="py-4"> <header class="page-wrapper px-2 screen-desktop:px-0 layout--home-body"> <div class="my-0 w-full"> <h1 class="text-color-blue-dark px-2 m-0">Getting Started</h1> </div> </header> <section class="pb-4 mb-4" id="welcome"> <div class="page-wrapper"> <header class="layout--home-body"> <div class="my-0 pt-1 px-2 border-b border-color-grey-light"></div> </header> <div class="layout--home-body"> <div class="px-2 text-font-size-small"><h2>Styles</h2> <p>There are a few options when integrating the stylesheet.</p> <h3>Node Module (recommended)</h3> <p>This package is available as an NPM Module and can be included as a dependency with NPM...</p> <pre><code>$ npm install access-nyc-patterns -save</code></pre> <p>... or Yarn;</p> <pre><code>$ yarn add access-nyc-patterns</code></pre> <h3>Download</h3> <p> <a href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/archive/master.zip">Download an archive</a> of this repository to include within your project.</p> <h3>CDN</h3> <p>The global stylesheet (<code>style-default.css</code>) that includes all elements, components, objects, and utilities exists in the <a href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/tree/master/dist/styles"><code>dist/styles</code></a> directory. This includes the English (default) stylesheet as well as 10 other individual language stylesheets.</p> <p>You can pick which stylesheet to use by linking to it through <a href="https://rawgit.com/">RawGit</a>. For example, after pasting in the link of the v1.0.0 default stylesheet;</p> <pre><code>https://cdn.rawgit.com/CityOfNewYork/ACCESS-NYC-PATTERNS/v1.0.0/dist/styles/site-default.css</code></pre> <p>You will receive a CDN link;</p> <pre><code>https://cdn.rawgit.com/CityOfNewYork/ACCESS-NYC-PATTERNS/v1.0.0/dist/styles/site-default.css</code></pre> <p>Once you have the link, you can drop it into the <code>head</code> of your html document;</p> <pre><code><link href="https://cdn.rawgit.com/CityOfNewYork/ACCESS-NYC-PATTERNS/v1.0.0/dist/styles/site-default.css" rel="stylesheet"></code></pre> <p>All Components and Objects are distributed with their own styles and JavaScript dependencies in their corresponding <code>/dist</code> folder as well. For example, all of the accordion dependencies live in the <code>/dist/components/accordion</code> folder.</p> <h3>SASS Import</h3> <p>The ACCESS NYC main <a href="https://github.com/CityOfNewYork/ACCESS-NYC/blob/master/wp-content/themes/access/src/scss/_imports.scss">SASS import file</a> can give you an idea of how to include individual patterns into your project. Be sure to add <code>node_modules</code> to your include paths.</p> <h2>Javascript</h2> <p>The Javascript source is written as ES6 Modules. Using <a href="https://rollupjs.org">Rollup.js</a>, individual components with javascript dependencies are distributed as CommonJS and IFFE functions so that depending on the flavor of your project you can use import any of the three.</p> <h3>CommonJS and ES6 Component Import</h3> <p>Here is an example of importing the accordion component and initializing it.</p> <pre><code>import Accordion from 'components/accordion/accordion'; new Accordion();</code></pre> <h3>IFFE</h3> <p>Here is an example of the accordion IFFE script.</p> <pre><code><script src="dist/components/accordion.iffe.js"></script> <script type="text/javascript"> new Accordion(); </script></code></pre> <h3>Global Pattern Script</h3> <p>You may also import the main ACCESS NYC Patterns script with all of the dependencies in it. This script is exported as an IFFE function so it doesn't need to be compiled. Components must be initialized individually.</p> <pre><code><script src="dist/scripts/AccessNyc.js"></script> <script type="text/javascript"> var access = new AccessNyc(); access.accordion(); </script></code></pre> <p>The main <a href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/blob/master/src/js/main.js">Javascript import file</a> can give you an idea of how each component needs to be initialized.</p></div> </div> </div> </section> </article> </main> </div> <footer class="py-4 text-center bg-color-blue-dark text-color-white links-invert font-smooth"> <p class="m-0">Maintained by  <a href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">NYC Opportunity</a> </p> </footer> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Element.prototype.matches,Promise&flags=gated"></script> <script src="scripts/AccessNyc.js"></script> <script src="scripts/markdown.min.js"></script> <script type="text/javascript"> var access = new AccessNyc(); access.markdown(); access.icons(); access.toggle(); </script> </body> </html>