nyc-planning-style-guide
Version:
Base styles for NYC Department of City Planning (using Foundation for Sites)
211 lines (200 loc) • 11.2 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="icons" class="large-margin-bottom">Icons</h1>
<section>
<h3 id="font-awesome">Font Awesome <sup><a href="#font-awesome" class="silver"><i class="fas fa-link"></i></a></sup></h3>
<div class="grid-x text-large small-up-3 medium-up-4 large-up-8 text-charcoal medium-margin-bottom">
<div class="cell large-padding"><i class="fas fa-search fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-map-marker-alt fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-external-link-alt fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-exclamation-triangle fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-info-circle fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-check fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-file fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-copy fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-users fa-2x"></i></div>
<div class="cell large-padding"><i class="far fa-hand-pointer fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-envelope fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-draw-polygon fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-pencil-alt fa-2x"></i></div>
<div class="cell large-padding"><i class="far fa-calendar fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-comment fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-share-square fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-arrow-down fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-cogs fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-edit fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-building fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-undo fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-chart-pie fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-bus-alt fa-2x"></i></div>
<div class="cell large-padding"><i class="fas fa-bicycle fa-2x"></i></div>
</div>
<p>NYC Planning products use the <a href="https://fontawesome.com/">Font Awesome</a> free, open-source, vector icon set. You can easily tweak these icons. Easily add color, change the size, rotate, animate, and even combine/stack them.</p>
<div class="code-example"><pre><code class="html hljs"><span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search text-blue"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search fa-xs"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search fa-2x"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-search fa-rotate-270"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-cog fa-spin"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fa-stack fa-2x"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"font-size:0.5em;"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-comment fa-stack-2x text-charcoal"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"><<span class="hljs-title">i</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fas fa-bicycle fa-stack-1x text-blue-light"</span>></span><span class="hljs-tag"></<span class="hljs-title">i</span>></span>
<span class="hljs-tag"></<span class="hljs-title">span</span>></span></code></pre></div>
<div class="callout text-xlarge text-charcoal">
<i class="fas fa-search"></i>
<i class="fas fa-search text-blue"></i>
<i class="fas fa-search fa-xs"></i>
<i class="fas fa-search fa-2x"></i>
<i class="fas fa-search fa-rotate-270"></i>
<i class="fas fa-cog fa-spin"></i>
<span class="fa-stack fa-2x" style="font-size:0.5em;">
<i class="fas fa-comment fa-stack-2x text-charcoal"></i>
<i class="fas fa-bicycle fa-stack-1x text-blue-light"></i>
</span>
</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">
<!-- <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 active">Icons</a>
<ul class="medium-margin-bottom text-small">
<li><a href="#font-awesome">Font Awesome</a></li>
</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>