nyc-planning-style-guide

<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NYC Planning Digital Style Guide</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> <link rel="stylesheet" href="../assets/css/nyc-planning.css"> <style> .header-logo { max-height: 4.5rem; } .code-example code { display: block; padding: 1rem; overflow-x: scroll; margin-bottom: 1.5rem; } .is-stuck{ max-height: 100vh; overflow: auto; } .code-example + .callout, .code-example + table { margin-top: calc(-1px - 1.5rem); } section + section { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #d3d5d9; } section h4 { margin-top: 1.5rem; } section .code-example + h4 { margin-top: 0; } .callout.clear { background-color: transparent; border-color: transparent; } .color-swatch { list-style: none; margin: 0; padding: 2.5rem 0.75rem 0.75rem; line-height: 1.4; } </style> </head> <body id="top"> <header class="xlarge-padding-top large-padding-bottom bg-white-smoke"> <div class="grid-container"> <div class="grid-x text-center medium-text-left align-middle"> <div class="cell medium-shrink"> <img class="header-logo medium-margin-right medium-margin-bottom" src="https://raw.githubusercontent.com/NYCPlanning/dcp-logo/master/dcp_logo_772.png" alt="NYC Planning" /> </div> <div class="cell medium-auto"> <h1 class="no-margin">Digital Style Guide</h1> Standards, Code Snippets, & Assets </div> <a href="https://github.com/NYCPlanning/nyc-planning-style-guide"> 1.0.7 </a> </div> </div> </header> <div id="main-content" class="grid-container"> <div class="grid-x grid-margin-x"> <div class="medium-8 large-9 cell medium-order-2 large-padding-top large-padding-bottom"> <h1 id="navigation" class="large-margin-bottom">Navigation</h1> <section> <h3 id="site-header">Site Header <a href="#site-header" class="silver"></a></h3> <div class="code-example"><pre><code class="html hljs"><header class="site-header" role="banner"> <a href="https://planninglabs.nyc/" class="labs-beta-notice hide-for-print">A beta project of NYC Planning</a> <div class="grid-x grid-padding-x"> <div class="branding cell medium-auto shrink"> <a href="http://www1.nyc.gov/site/planning/index.page" class="dcp-link"><img src="https://raw.githubusercontent.com/NYCPlanning/logo/master/dcp_logo_772.png" alt="NYC Planning" class="dcp-logo"></a> <a class="site-title">Product <small class="site-subtitle show-for-medium">Description of Product</small></a> </div> <div class="cell auto hide-for-medium text-right"> <button class="responsive-nav-toggler hide-for-print" data-toggle="menu">Menu</button> </div> <nav role="navigation" class="cell medium-shrink responsive show-for-medium hide-for-print" id="menu" data-toggler=".show-for-medium"> <ul class="menu vertical medium-horizontal"> <li><a href="/">One</a></li> <li><a href="/">Two</a></li> <li class="external-nav-item"><a href="mailto:email@example.org">Email</a></li> </ul> </nav> </div> </header></code></pre></div> <div class="callout"> <header class="site-header" role="banner"> <a href="https://planninglabs.nyc/" class="labs-beta-notice hide-for-print">A beta project of NYC Planning</a> <div class="grid-x grid-padding-x"> <div class="branding cell large-auto shrink"> <a href="http://www1.nyc.gov/site/planning/index.page" class="dcp-link"><img src="https://raw.githubusercontent.com/NYCPlanning/logo/master/dcp_logo_772.png" alt="NYC Planning" class="dcp-logo"></a> <a class="site-title">Product Description of Product</a> </div> <div class="cell auto hide-for-large text-right"> <button class="responsive-nav-toggler hide-for-print" data-toggle="responsive-nav">Menu</button> </div> <nav role="navigation" id="responsive-nav" class="cell large-shrink responsive show-for-large hide-for-print" data-toggler=".show-for-large"> <ul class="menu vertical large-horizontal"> <li><a href="/">One</a></li> <li><a href="/">Two</a></li> <li class="external-nav-item"><a href="mailto:email@example.org">Email</a></li> </ul> </nav> </div> </header> </div> </section> <section> <h3 id="buttons">Buttons <a href="#buttons" class="silver"></a></h3> Buttons can be created with minimal markup by adding the <code>.button</code> class. Primary buttons are <code>a11y-orange</code> with white text, and should be used sparingly for primary user actions that need to be very noticeable. For secondary tasks, add the <code>.secondary</code> class to make a light gray button with orange text. <div class="code-example"><pre><code class="html hljs"><a class="button" href="#">Primary action</a> <a class="button secondary" href="#">Secondary action</a></code></pre></div><div class="callout"> <a class="button no-margin" href="#">Primary action</a> <a class="button secondary no-margin" href="#">Secondary action</a> </div> Size classes can be added to your button to change its size. <div class="code-example"><pre><code class="html hljs"><a class="button tiny" href="#">Tiny</a> <a class="button small" href="#">Small</a> <a class="button" href="#">Default</a> <a class="button large" href="#">Large</a></code></pre></div><div class="callout"> <a class="button tiny" href="#">Tiny</a> <a class="button small" href="#">Small</a> <a class="button" href="#">Default</a> <a class="button large" href="#">Large</a> </div> The <code>.expanded</code> class makes the butto tak up the full width of its container. <div class="code-example"><pre><code class="html hljs"><a class="button expanded" href="#">Such Expand</a></code></pre></div><div class="callout"> <a class="button expanded" href="#">Such Expand</a> </div> <h4 id="-use-the-right-tag"> Use the right tag</h4> Since buttons can be used for many purposes, it's important to use the right tag. Use the <code><a></code> tag if the button is a link to a document, another page, or an anchor within the page. Use the <code><button></code> tag if the button performs an action that changes something on the current page. <h4 id="label-buttons-with-clear-actions">Label buttons with clear actions</h4> Generic or misleading button text can be frustrating for users. A button’s text should clearly describe its action. Use verbs whenever possible instead of "Yes" or "OK" so buttons don't rely on the context of titles or prompts. <div class="grid-x grid-margin-x medium-up-2"> <div class="cell"> Bad: <div class="callout"> Would you like to delete this? <button class="button small no-margin">OK</button> <button class="button small secondary no-margin">No</button> </div> </div> <div class="cell"> Good: <div class="callout"> Would you like to delete this? <button class="button small no-margin">Delete</button> <button class="button small secondary no-margin">Cancel</button> </div> </div> </div> <h4 id="disabled-buttons">Disabled buttons</h4> The <code>.disabled</code> gives buttons a faded appearance and the <code>not-allowed</code> cursor property. This only adds visual style; it doesn't disable any actions. For <code><button></code> elements, you can add the <code>disabled</code> attribute to both style and actually disable it. Mark links as disabled for assistive technology by adding the <code>aria-disabled</code> attribute. <div class="code-example"><pre><code class="html hljs"><a class="button disabled" href="#" aria-disabled>Disabled link</a> <button type="button" class="button" disabled>Disabled button</button></code></pre></div><div class="callout"> <a class="button disabled no-margin" href="#" aria-disabled>Disabled link</a> <button type="button" class="button no-margin" disabled>Disabled button</button> </div> </section> <section> <h3 id="button-groups">Button groups <a href="#button-groups" class="silver"></a></h3> Wrap buttons in a container with the <code>.button-group</code> class to associate a set of related actions. These buttons will be separated by a 1-pixel border. Size and color classes can be applied to the group as a whole. <div class="code-example"><pre><code class="html hljs"><div class="button-group small secondary"> <a class="button">One</a> <a class="button">Two</a> <a class="button">Three</a> </div></code></pre></div><div class="callout"> <div class="button-group small secondary"> <a class="button">One</a> <a class="button">Two</a> <a class="button">Three</a> </div> </div> <h4 id="expanded-button-groups">Expanded button groups</h4> The <code>.expanded</code> class will make the group fill the width of its container (maximum of six buttons). <div class="code-example"><pre><code class="html hljs"><div class="button-group small secondary expanded"> <a class="button">One</a> <a class="button">Two</a> <a class="button">Three</a> </div></code></pre></div><div class="callout"> <div class="button-group small secondary expanded"> <a class="button">One</a> <a class="button">Two</a> <a class="button">Three</a> </div> </div> <h4 id="stacked-button-groups">Stacked button groups</h4> Make a button group vertical with the <code>.stacked</code> class. The responsive <code>.stacked-for-small</code> class makes the group vertical on small screens only, and <code>.stacked-for-medium</code> makes the group vertical on medium and small screens. These classes are good for button groups confined to small spaces at certain screen sizes. <div class="code-example"><pre><code class="html hljs"><div class="button-group small secondary stacked"> <a class="button">One</a> <a class="button">Two</a> <a class="button">Three</a> </div></code></pre></div><div class="callout"> <div class="button-group small secondary stacked"> <a class="button">One</a> <a class="button">Two</a> <a class="button">Three</a> </div> </div> </section> <section> <h3 id="menus">Menus <a href="#menus" class="silver"></a></h3> Menus are lists of links. Add the <code>.menu</code> class to a <code><ul></code> element containing <code><li></code> elements containing bold links. <div class="code-example"><pre><code class="html hljs"><ul class="menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul></code></pre></div><div class="callout"> <ul class="menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> </div> <h4 id="active-menu-item">Active menu item</h4> Add the <code>.is-active</code> class to a menu's <code><li></code> to highlight that item as active. <div class="callout"> <ul class="menu"> <li><a href="#">One</a></li> <li class="is-active"><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> </div> <h4 id="menu-alignment">Menu alignment</h4> By default, menu items align to the left. They can also be aligned to the right with the <code>.align-right</code> class, aligned to the center with the <code>.align-center</code> class, or take up the full width with the <code>.expanded</code> class. <div class="code-example"><pre><code class="html hljs"><ul class="menu">...</ul></code></pre></div><div class="callout"> <ul class="menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> </div> <div class="code-example"><pre><code class="html hljs"><ul class="menu align-right">...</ul></code></pre></div><div class="callout"> <ul class="menu align-right"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> </div> <div class="code-example"><pre><code class="html hljs"><ul class="menu align-center">...</ul></code></pre></div><div class="callout"> <ul class="menu align-center"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> </div> <div class="code-example"><pre><code class="html hljs"><ul class="menu expanded">...</ul></code></pre></div><div class="callout"> <ul class="menu expanded"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> </div> <h4 id="menu-orientation">Menu orientation</h4> By default, menus are horizontally. Add the <code>.vertical</code> class to switch a menu's default orientation. The responsive <code>.[size]-[orientation]</code> classes allow you to re-orient a menu at different screen sizes. <div class="code-example"><pre><code class="html hljs"><ul class="menu vertical medium-horizontal large-vertical"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul></code></pre></div><div class="callout"> <ul class="menu vertical medium-horizontal large-vertical"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> </div> </section> <section> <h3 id="tabs">Tabs <a href="#tabs" class="silver"></a></h3> Use tabs to alternate between views within the same context. Keep tab labels short. All tab content should be related and logically divided so users can easily predict what's in a given tab. If there aren't clearly distinct groupings, tabs are likely the wrong UI for navigating the content. <div class="code-example"><pre><code class="html hljs"><ul class="tabs"> <li class="tabs-title"><a href="#">One</a></li> <li class="tabs-title is-active"><a href="#" aria-selected="true">Two</a></li> <li class="tabs-title"><a href="#">Three</a></li> <li class="tabs-title"><a href="#">Four</a></li> </ul></code></pre></div><div class="callout"> <ul class="tabs"> <li class="tabs-title"><a href="#">One</a></li> <li class="tabs-title is-active"><a href="#" aria-selected="true">Two</a></li> <li class="tabs-title"><a href="#">Three</a></li> <li class="tabs-title"><a href="#">Four</a></li> </ul> </div> Do not use tabs when users need to compare the info in multiple tabs. Having to switch back and forth puts an added burden on the user and lowers usability. Do not use tabs unless they all fit on one row at all screen sizes. <h4 id="switching-tabs">Switching tabs</h4> Tabs can be implemented by reloading the page with different content on click or by showing/hiding content with JavaScript. Reloading the page is less desirable, as it can cause the scroll position to jump. JavaScript improves the user's experience by seamlessly swapping the tabs content. Foundation's JavaScript makes switching tabs easy. Put all tabs content in a container with the <code>.tabs-content</code> class. Each piece of content in the container needs the <code>.tabs-panel</code> class and a unique ID. The <code>href</code> of each tab link should match the ID of a tab panel. Alternatively, the ID can be specified with the attribute <code>data-tabs-target</code>. <div class="code-example"><pre><code class="html hljs"><ul class="tabs" data-tabs id="example-tabs"> <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li> <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li> </ul> <div class="tabs-content" data-tabs-content="example-tabs"> <div class="tabs-panel is-active" id="panel1"> <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p> </div> <div class="tabs-panel" id="panel2"> <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p> </div> </div></code></pre></div><div class="callout"> <ul class="tabs" data-tabs id="example-tabs"> <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li> <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li> </ul> <div class="tabs-content" data-tabs-content="example-tabs"> <div class="tabs-panel is-active" id="panel1"> Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. </div> <div class="tabs-panel" id="panel2"> Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. </div> </div> </div> </section> <section> <h3 id="pagination">Pagination <a href="#pagination" class="silver"></a></h3> Pagination lets users click through related content, like search results or news posts. Add the class <code>.pagination</code> to a <code><ul></code> containing <code><li></code> elements containing <code><a></code> elements. Add the <code>.current</code> class to highlight the current list item, or <code>.disabled</code> to subdue it. Pagination should be centered with the <code>.text-center</code> class. Pagination should be nested inside a <code><nav></code> with the attributes <code>aria-label="Pagination"</code> to explain the purpose of the component to assistive technologies. Content with the <code>.show-for-sr</code> class should also be added to provide more context to screen readers. <div class="code-example"><pre><code class="html hljs"><nav aria-label="Pagination"> <ul class="pagination text-center"> <li class="pagination-previous disabled">Previous</li> <li class="current"><span class="show-for-sr">You're on page</span> 1</li> <li><a href="#" aria-label="Page 2">2</a></li> <li><a href="#" aria-label="Page 3">3</a></li> <li class="ellipsis"></li> <li><a href="#" aria-label="Page 42">42</a></li> <li><a href="#" aria-label="Page 43">43</a></li> <li><a href="#" aria-label="Page 44">44</a></li> <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li> </ul> </nav></code></pre></div><div class="callout"> <nav aria-label="Pagination"> <ul class="pagination text-center no-margin"> <li class="pagination-previous disabled">Previous</li> <li class="current">You're on page 1</li> <li><a href="#" aria-label="Page 2">2</a></li> <li><a href="#" aria-label="Page 3">3</a></li> <li class="ellipsis"></li> <li><a href="#" aria-label="Page 42">42</a></li> <li><a href="#" aria-label="Page 43">43</a></li> <li><a href="#" aria-label="Page 44">44</a></li> <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li> </ul> </nav> </div> </section>      </div> <div class="medium-4 large-3 cell medium-order-1" data-sticky-container> <div class="sticky large-padding-top large-padding-bottom" data-sticky data-margin-top="0" data-anchor="main-content">  <ul class="no-bullet" data-smooth-scroll data-animation-easing="swing"> <li> <a href="/" class="text-weight-bold display-inline-block ">Overview</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/getting-started" class="text-weight-bold display-inline-block ">Getting Started</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/logo" class="text-weight-bold display-inline-block ">Logo</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/color" class="text-weight-bold display-inline-block ">Color</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/icons" class="text-weight-bold display-inline-block ">Icons</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/typography" class="text-weight-bold display-inline-block ">Typography</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/forms" class="text-weight-bold display-inline-block ">Forms</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/navigation" class="text-weight-bold display-inline-block active">Navigation</a> <ul class="medium-margin-bottom text-small"> <li><a href="#site-header">Site Header</a></li> <li><a href="#buttons">Buttons</a></li> <li><a href="#button-groups">Button Groups</a></li> <li><a href="#menus">Menus</a></li> <li><a href="#tabs">Tabs</a></li> <li><a href="#pagination">Pagination</a></li> </ul> </li> <li> <a href="/accessibility" class="text-weight-bold display-inline-block ">Accessibility</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/layout" class="text-weight-bold display-inline-block ">Layout</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/maps" class="text-weight-bold display-inline-block ">Maps</a> <ul class="medium-margin-bottom text-small"> </ul> </li> <li> <a href="/voice-and-language" class="text-weight-bold display-inline-block ">Voice & Language</a> <ul class="medium-margin-bottom text-small"> </ul> </li> </ul> </div> </div> </div> </div> <script src="../assets/js/nyc-planning.js"></script> </body> </html>