nyc-planning-style-guide
Version:
Base styles for NYC Department of City Planning (using Foundation for Sites)
227 lines (217 loc) • 12.6 kB
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">
<h1 id="layout" class="large-margin-bottom">Layout</h1>
<section>
<h3 id="responsive-layouts">Responsive layouts <sup><a href="#responsive-layouts" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Our products should support any type of device, any size screen, and any resolution. They should fit various screens automatically, displaying content in a way that optimizes the user experience on any device.</p>
<h4>
“There is no device.”
<small class="text-dark-gray">
<i class="fas fa-desktop fa-2x"></i>
<i class="fas fa-laptop fa-lg"></i>
<i class="fas fa-tablet-alt fa-lg"></i>
<i class="fas fa-tablet-alt"></i>
<i class="fas fa-tablet-alt fa-sm"></i>
<i class="fas fa-mobile-alt"></i>
<i class="fas fa-mobile-alt fa-xs"></i>
</small>
</h4>
<h4 id="relative-units">Relative units</h4>
<p>absolute units vs relative units… rem preferred… em nesting troubles… px breaks zoom…</p>
</section>
<section>
<h3 id="whitespace-and-boxes">Whitespace & boxes <sup><a href="#whitespace-and-boxes" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Avoid putting content into lots of boxes. Instead, use whitespace to separate pieces of content and create visual hierarchy. When creating boxes, avoid rounded corners. Boxes should have squared corners.</p>
<div class="grid-x grid-margin-x">
<div class="cell medium-shrink callout" style="border-radius:1rem;">
<i class="fas fa-ban fuchsia"></i> Avoid rounded corners.
</div>
<div class="cell medium-shrink callout">
<i class="fas fa-check fa-fw green-dark"></i> Use squared corners.
</div>
</div>
</section>
<section>
<h3 id="drop-shadows">Drop shadows <sup><a href="#drop-shadows" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Drop shadows are used very sparingly and subtly. Do not apply drop shadows to content elements like buttons or text. Drop shadows should only be applied to the layout's primary containers. Shadows should not have any blur, they should retain sharp edges. The color of a shadow should be <code>rgba(0,0,0,0.1)</code>, or pure black at 10 percent opacity.</p>
</section>
<section>
<h3 id="tables">Tables <sup><a href="#tables" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section>
<h3 id="responsive-embeds">Responsive embeds <sup><a href="#responsive-embeds" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>To make sure embedded content maintains its aspect ratio at various screen sizes, wrap the <code>iframe</code>, <code>object</code>, <code>embed</code>, or <code>video</code> in a container with the <code>.responsive-embed</code> class.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"responsive-embed widescreen"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">iframe</span> <span class="hljs-attribute">width</span>=<span class="hljs-value">"560"</span> <span class="hljs-attribute">height</span>=<span class="hljs-value">"315"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"https://www.youtube.com/embed/6QJYgm0fRHk"</span> <span class="hljs-attribute">frameborder</span>=<span class="hljs-value">"0"</span> <span class="hljs-attribute">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-title">iframe</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code></pre></div><div class="callout">
<div class="responsive-embed widescreen">
<iframe width="560" height="315" src="https://www.youtube.com/embed/6QJYgm0fRHk" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<h4 id="embedded-videos">Embedded videos</h4>
<p><strong>Disable autoplay.</strong> All embedded media should be started by an explicit user action. Autoplay is a bad idea for accessibility, usability, and general sanity. Unexpected sound can conflict with other sounds or quiet environments. W3C discourages the use of autoplay, as it affects a user’s ability to stop it with a screen reader since they navigate by listening.</p>
<p><strong>Make sure text is legible.</strong> When displaying text in videos, make sure that it's reasonably large, uses high-contrast colours, and remains on screen for long enough to be read.</p>
<p><strong>Provide subtitles.</strong> A lot of video is watched without sound (as much as 85 percent on Facebook). This also makes the vides accessibility for users with auditory disabilities.</p>
</section>
<section>
<h3 id="visibility">Visibility <sup><a href="#visibility" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section>
<h3 id="print-styles">Print styles <sup><a href="#print-styles" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<!-- float classes -->
<!-- sticky -->
</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">
<!-- <input id="showCodesCheckbox" type="checkbox"><label for="showCodesCheckbox">Show Code Examples</label> -->
<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 ">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 active">Layout</a>
<ul class="medium-margin-bottom text-small">
<li><a href="#there-is-no-device">There is no device</a></li>
<li><a href="#whitespace-and-boxes">Whitespace & boxes</a></li>
<li><a href="#drop-shadows">Drop shadows</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#responsive-embeds">Responsive embeds</a></li>
<li><a href="#visibility">Visibility</a></li>
<li><a href="#print-styles">Print styles</a></li>
</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>