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> <p class="medium-margin-bottom">Standards, Code Snippets, & Assets</p> </div> <p class="cell medium-shrink no-margin show-for-medium"> <a href="https://github.com/NYCPlanning/nyc-planning-style-guide"> <i class="fab fa-github fa-2x small-margin text-light-gray"></i> 1.0.7 </a> </p> </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"> <section> <p class="lead">NYC Planning's Digital Style Guide defines standards for the creation, formatting, and design of our digital products. These best practices and UI patterns ensure consistency both within specific applications, and throughout our products and services. </p> <div class="grid-x text-center align-center align-middle xlarge-margin-top medium-margin-bottom"> <div class="cell medium-shrink"> <p> <i class="fas fa-pen-alt fa-2x small-margin text-light-gray"></i> <span class="display-block text-weight-bold">Content</span> </p> </div> <div class="cell medium-shrink"> <i class="fas fa-plus fa-lg large-margin text-light-gray"></i> </div> <div class="cell medium-shrink"> <p> <i class="fas fa-drafting-compass fa-2x small-margin text-light-gray"></i> <span class="display-block text-weight-bold">Design</span> </p> </div> <div class="cell medium-shrink"> <i class="fas fa-plus fa-lg large-margin text-light-gray"></i> </div> <div class="cell medium-shrink"> <p> <i class="fas fa-laptop-code fa-2x small-margin text-light-gray"></i> <span class="display-block text-weight-bold">Development</span> </p> </div> </div> <p>User experience is directly affected by how digital content is planned and structured. For this reason, this style guide is aimed at not only designers and developers, but also content creators. In addition to code samples and rules of aesthetics, this guide also defines best practices for creating content that's clear, concise, and user-friendly.</p> <p class="large-margin-top"><em>Note: This style guide is built upon the Foundation front-end framework. For an exhaustive list of features, components, or modules not covered here, please see the <strong><a href="https://foundation.zurb.com/sites/docs/">Foundation for Sites documentation <i class="fas fa-external-link-alt"></i></a></strong>.</em></p> </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 active">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 ">Navigation</a> <ul class="medium-margin-bottom text-small"> </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>