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="images/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" /> <link href="images/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" /> <link href="images/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" /> <link href="images/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="images/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" /> <link href="images/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="images/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" /> <link href="images/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="images/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="images/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" /> <link href="images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" /> <link href="images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" /> <link href="images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" /> <meta content="#112E51" name="msapplication-TileColor" /> <meta content="images/ms-icon-144x144.png" name="msapplication-TileImage" /> <link href="images/favicon.ico" rel="icon" type="image/x-icon" /> <link href="styles/site-default.css" rel="stylesheet" /> <title>Installation | ACCESS NYC 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-blue-dark" onload="load()" style="visibility: hidden;"><a class="sr-only" href="#main-content">Skip to main content</a> <div class="bg-color-white"> <header class="color-light-background 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/tree/v0.8.0">0.8.0</a><a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><button aria-controls="main-menu" aria-expanded="false" class="btn-link ml-1 screen-tablet:ml-2" data-js="toggle" id="main-menu-control">Menu</button></nav> </div> </div> </div> </header> <aside aria-hidden="true" aria-labelledby="main-menu-control" class="color-mid-background text-font-size-small hidden hidden:overflowFadeInUp animated relative" id="main-menu" role="region" style="top: -1px"> <div class="page-wrapper py-4 animated"> <div class="screen-tablet:flex"> <nav class="screen-tablet:flex-1 mb-1 px-2"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="index">Home</a><a class="block p-1" href="about">About</a><a class="block p-1" href="installation">Installation</a><a class="block p-1" href="design-tools">Design Tools</a><a class="block p-1 screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="developer-tools">Developer Tools</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="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 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="dividers">Dividers</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="selects">Selects</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 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="alert-banner">Alert Banner</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="share-form">Share Form</a><a class="block p-1" href="side-nav">Side Nav</a><a class="block p-1" href="text-controller">Text Controller</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="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 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="formstack">Formstack</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="newsletter">Newsletter</a><a class="block p-1" href="search-box">Search Box</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="utility">Utilities</a><a class="block p-1" href="accessibility">Accessibility</a><a class="block p-1" href="colors">Colors</a><a class="block p-1" href="cookie">Cookie</a><a class="block p-1" href="font">Fonts</a><a class="block p-1" href="icons">Icons</a><a class="block p-1" href="inherit">Inherit</a><a class="block p-1" href="language">Language</a><a class="block p-1" href="media">Media</a><a class="block p-1" href="text">Text</a><a class="block p-1" href="toggle">Toggle</a><a class="block p-1" href="typography">Typography</a></nav> </div> <div class="text-center"><button aria-controls="main-menu" aria-expanded="false" class="btn-link" data-js="toggle">Close Menu</button></div> </div> </aside> <main class="color-light-background pt-4" id="main-content"> <article class="pt-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 pb-4 mb-4">Installation</h1> </div> </header> <section class="pb-4 mb-4" id="npm-install"> <div class="page-wrapper px-2 screen-desktop:px-0"> <header class="layout--home-body"> <div class="my-0 px-2 border-b border-color-grey-light screen-tablet:flex screen-tablet:justify-between"> <h2 class="m-0 pt-1 pb-4"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#npm-install">NPM Install</a></h2> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>There are a few options when integrating the patterns, but using NPM Install is recommended.</p> <pre><code>$ npm install access-nyc-patterns</code></pre> <h3>Download</h3> <p>Optionally, you may <a href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/archive/master.zip">download an archive</a> of this repository to include in your project.</p> <h3>CDN</h3> <p>You can pick which files in the <a href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/tree/v0.1.0/dist">distribution folder of the repository</a> to use by linking to them through <a href="https://www.jsdelivr.com">JsDelivr</a>. For example, the link of the v0.1.0 default stylesheet:</p> <pre><code>https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.1.0/dist/styles/site-default.css</code></pre> <p>You can include this link in the <code><head></code> of your html document.</p> <pre><code><link href="https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.1.0/dist/styles/site-default.css" rel="stylesheet"></code></pre> <p>You can learn more about the different ways to use JsDelivr on it’s <a href="https://www.jsdelivr.com/features">feature page</a>. All Components and Objects are also distributed with their own styles and JavaScript dependencies in their corresponding <strong>/dist</strong> folder. For example, all of the accordion dependencies live in the <strong>/dist/components/accordion</strong> folder.</p> <p>Keep in mind, there are regular releases to the patterns which follow semantic versioning. You can follow the <a href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/releases">new releases on the repository releases page</a>.</p></div> </div> </div> </section> <section class="pb-4 mb-4" id="styles"> <div class="page-wrapper px-2 screen-desktop:px-0"> <header class="layout--home-body"> <div class="my-0 px-2 border-b border-color-grey-light screen-tablet:flex screen-tablet:justify-between"> <h2 class="m-0 pt-1 pb-4"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#styles">Styles</a></h2> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><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</a> provides and example of how to set up a stylesheet to cherry-pick individual patterns in a project.</p> <pre><code>@import 'node_modules/access-nyc-patterns/src/components/accordion/accordion';</code></pre> <p>All files can be imported directly from the source directory. The exception being <a href="/utility">Tailwind Utilities</a>, which are compiled to a Sass file in the distribution folder:</p> <pre><code>@import 'node_modules/access-nyc-patterns/dist/styles/_tailwind.scss';</code></pre> <h3>Asset Paths and CDN</h3> <p>The styles use the <code>url()</code> for loading webfonts, images, and svgs. By default, it is set to look for asset directories one directory up from the distributed stylesheet like so:</p> <pre><code>styles/site-default.scss images/.. fonts/.. svg/..</code></pre> <p>However, you can set the path to a different path that includes all of these files using the <code>$cdn</code> variable.</p> <pre><code>// $cdn: '../'; (default) $cdn: 'path/to/assets/';</code></pre> <p>The CDN can be set to another local path, or, it can be set to the remote url within the <code>$variables</code> map. This default uses <a href="https://www.jsdelivr.com/">jsDelivr</a> to pull the assets from the patterns GitHub repository and the tag of the installed version. ex;</p> <pre><code>@import 'config/variables'; $cdn: map-get($variables, 'cdn');</code></pre> <p>These are the default paths to the different asset types within the asset folder. Uncomment and set to override their defaults.</p> <pre><code>$path-to-fonts: 'fonts/'; $path-to-images: 'images/'; $path-to-svg: 'svg/';</code></pre> <h3>Include Paths</h3> <p>You can add <strong>node_modules/access-nyc-patterns/src</strong> to your “include” paths which will allow you to write the shorthand path;</p> <pre><code>@import 'components/accordion/accordion';</code></pre> <p>For example; the <a href="https://github.com/sass/node-sass">node-sass</a> <code>includePaths</code> option which is array of paths that attempt to resolve your <code>@import</code> declarations.</p> <pre><code>Sass.render({ file: './src/scss/site-default.scss', outFile: 'site-default.css', includePaths: [ './node_modules', './node_modules/access-nyc-patterns/src' ] }, (err, result) => { Fs.writeFile(`./dist/styles/site-default.css`, result.css); } });</code></pre> <p>Similar to the the <a href="https://www.npmjs.com/package/gulp-sass">gulp-sass</a> <code>includePaths</code> option.</p> <pre><code>gulp.task('sass', () => { return gulp.src('./sass/**/*.scss') .pipe(sass.({includePaths: [ 'node_modules', 'node_modules/access-nyc-patterns/src' ]})).pipe(gulp.dest('./css')); });</code></pre></div> </div> </div> </section> <section class="pb-4 mb-4" id="javascript"> <div class="page-wrapper px-2 screen-desktop:px-0"> <header class="layout--home-body"> <div class="my-0 px-2 border-b border-color-grey-light screen-tablet:flex screen-tablet:justify-between"> <h2 class="m-0 pt-1 pb-4"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#javascript">JavaScript</a></h2> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>The JavaScript source is written as ES6 Modules, and using <a href="https://rollupjs.org">Rollup.js</a>, individual components with JavaScript dependencies are distributed as CommonJS and IFFE functions. Depending on your project, you can import any of the three. Below are examples of importing only the accordion component and initializing it.</p> <h3>ES6 Component Import</h3> <pre><code>import Accordion from 'src/components/accordion/accordion'; new Accordion();</code></pre> <h3>CommonJS</h3> <pre><code>import Accordion from 'dist/components/accordion/accordion.common'; new Accordion();</code></pre> <h3>IFFE</h3> <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 but you may want to uglify it. Components must be initialized individually.</p> <pre><code><script src="dist/scripts/access-nyc.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> shows how each component needs to be initialized.</p></div> </div> </div> </section> <section class="pb-4 mb-4" id="polyfills"> <div class="page-wrapper px-2 screen-desktop:px-0"> <header class="layout--home-body"> <div class="my-0 px-2 border-b border-color-grey-light screen-tablet:flex screen-tablet:justify-between"> <h2 class="m-0 pt-1 pb-4"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#polyfills">Polyfills</a></h2> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>The Patterns include a polyfill bundle <a href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/blob/master/src/js/polyfills.js"><strong>dist/scripts/polyfill.js</strong></a> using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill">MDN Matches</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove#Polyfill">MDN Remove</a>, <a href="https://www.npmjs.com/package/whatwg-fetch">whatwg-fetch</a> and features from the <a href="https://github.com/zloirock/core-js">Core JS Standard Libary</a> (a dependency of <a href="https://babeljs.io/docs/en/babel-preset-env">@babel/preset-env</a>). However, because this bundle includes all required polyfills so it is recommended to build your own polyfill based on your browser coverage requirements.</p></div> </div> </div> </section> <div class="sticky bottom-0 bg-color-white shadow-up relative z-10 overflow-y-scroll whitespace-no-wrap animated fadeInUp"> <nav class="nav-inline text-font-size-small p-4"><span class="mr-4">Jump to:</span><a class="mr-4" href="#npm-install">NPM Install</a><a class="mr-4" href="#styles">Styles</a><a class="mr-4" href="#javascript">JavaScript</a><a class="mr-4" href="#polyfills">Polyfills</a></nav> </div> </article> </main> </div> <footer class="py-4 text-center color-dark-background"> <p> <nav><a class="px-1" href="index">Home</a><a class="px-1" href="about">About</a><a class="px-1" href="installation">Installation</a><a class="px-1" href="design-tools">Design Tools</a><a class="px-1" href="developer-tools">Developer Tools</a></nav> </p> <p>Maintained by <a href="https://nyc.gov/opportunity">NYC Opportunity</a></p> <p class="m-0"> <nav><a class="px-1" href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">GitHub</a><a class="px-1" href="https://twitter.com/nycopportunity">Twitter</a><a class="px-1" href="https://www.facebook.com/NYCOpportunity">Facebook</a><a class="px-1" href="https://www.instagram.com/nycopportunity">Instagram</a></nav> </p> </footer> <script src="scripts/polyfills.js"></script> <script src="scripts/access-nyc.js"></script> <script src="scripts/vue-components.js"></script> <script type="text/javascript"> var access = new AccessNyc(); var VueComponents = new VueComponents(); access.icons(); access.toggle(); access.alertBanner(); </script> </body> </html>