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>Readme | 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-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="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 border-b border-color-white" 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="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">Readme</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="o-content color-light-background px-2"><p>This project is under active development by the Product and Design team at <a href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">NYC Opportunity</a>. We are currently in the process of migrating styles into this repository and setting up templates for documentation. <a href="https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/wiki/Development">Learn more about the project development in the wiki</a>.</p> <p>ACCESS NYC Patterns is source for styles seen on <a href="https://access.nyc.gov">ACCESS NYC</a>. This repository utilizes the U.S. Web Design System, Bourbon SASS Toolset, and the Tailwind CSS Utility framework. It is available in 11 different languages including English (default), Spanish, French, Chinese, Russian, Arabic, Polish, Urdu, Bengla, Haitian Creole, and Korean.</p> <h1>About NYCO</h1> <p>NYC Opportunity is the <a href="http://nyc.gov/opportunity">New York City Mayor's Office for Economic Opportunity</a>. We are committed to sharing open source software that we use in our products. Feel free to ask questions and share feedback. Follow @nycopportunity on <a href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">Github</a>, <a href="https://twitter.com/nycopportunity">Twitter</a>, <a href="https://www.facebook.com/NYCOpportunity/">Facebook</a>, and <a href="https://www.instagram.com/nycopportunity/">Instagram</a>.</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>