nyc-planning-style-guide
Version:
Base styles for NYC Department of City Planning (using Foundation for Sites)
171 lines (164 loc) • 6.58 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="maps" class="large-margin-bottom">Maps</h1>
<section>
<h3 id="maps-standards-to-specific">Maps standards to specific <sup><a href="#maps-standards-to-specific" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<ul>
<li>Accessibility (particularly color)</li>
<li>Page layout</li>
<li>Prescribe how we do layout for full-page responsive web maps</li>
<li>Disabling scroll-to-zoom on non full-page maps</li>
<li>Basemap</li>
<li>Define the default NYC bbox() for maps</li>
<li>layer group toggle</li>
<li>layer groups container</li>
<li>legend item</li>
<li>legend icon</li>
</ul>
</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">
<!-- <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 ">Layout</a>
<ul class="medium-margin-bottom text-small">
</ul>
</li>
<li>
<a href="/maps" class="text-weight-bold display-inline-block active">Maps</a>
<ul class="medium-margin-bottom text-small">
<li><a href="#basemap">Basemap</a></li>
<li><a href="#accessibility-and-color">Accessibility & Color</a></li>
</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>