Skip to content

Commit

Permalink
2.6.0-1
Browse files Browse the repository at this point in the history
  • Loading branch information
@devowhippit
devowhippit committed Jan 28, 2021
1 parent 0c27a98 commit 75451c3
Show file tree
Hide file tree
Showing 49 changed files with 57,138 additions and 26,241 deletions.
52 changes: 29 additions & 23 deletions dist/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link href="/images/favicon/favicon.ico" rel="shortcut icon" />
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script type="text/javascript">
var VERSION = '2.5.1';
var VERSION = '2.6.0-1';
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
Expand Down Expand Up @@ -55,17 +55,17 @@ <h1 class="o-header__main-title">
<use xlink:href="#icon-logo-nyco"></use>
</svg>
</h1>
<div aria-hidden="true" class="o-header__main-version">v2.5.1</div>
<div aria-hidden="true" class="o-header__main-version">v2.6.0-1</div>
</div>
<div class="o-header__banner-secondary color-dark-background">
<h1 class="o-header__secondary-title text-jumbo">Patterns</h1>
</div>
<div class="o-header__secondary-version color-dark-background">
<div>
<a class="btn flex items-center" href="https://github.com/CityOfNewYork/nyco-patterns/tree/v2.5.1">
<a class="btn flex items-center" href="https://github.com/CityOfNewYork/nyco-patterns/tree/v2.6.0-1">
<svg aria-hidden="true" class="icon-ui icon-3 mr-1">
<use xlink:href="#icon-ui-github"></use>
</svg>2.5.1
<use xlink:href="#feather-github"></use>
</svg>2.6.0-1
</a>
</div>
</div>
Expand All @@ -80,10 +80,9 @@ <h1 class="o-header__secondary-title text-jumbo">Patterns</h1>
<a class="o-navigation__link" href="installation">Installation</a>
<a class="o-navigation__link" href="about">About the Patterns</a>
<a class="o-navigation__link" href="prototyping">Prototyping</a>
</nav>
<nav>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Elements</span>
<a class="o-navigation__link" href="buttons">Buttons</a>
<a class="o-navigation__link" href="badge">Badge</a>
<a class="o-navigation__link" href="checkboxes">Checkboxes</a>
<a class="o-navigation__link" href="code">Code</a>
<a class="o-navigation__link" href="description-lists">Description Lists</a>
Expand All @@ -96,6 +95,7 @@ <h1 class="o-header__secondary-title text-jumbo">Patterns</h1>
<a class="o-navigation__link" href="tables">Tables</a>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Components</span>
<a class="o-navigation__link" href="card">Card</a>
<a class="o-navigation__link" href="record-hero">Record Hero</a>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Objects</span>
<a class="o-navigation__link" href="charts">Charts</a>
<a class="o-navigation__link" href="content">Content</a>
Expand Down Expand Up @@ -125,10 +125,9 @@ <h1 class="o-navigation__banner-title">Patterns</h1>
<a class="o-navigation__link" href="installation" tabindex="-1">Installation</a>
<a class="o-navigation__link" href="about" tabindex="-1">About the Patterns</a>
<a class="o-navigation__link" href="prototyping" tabindex="-1">Prototyping</a>
</nav>
<nav>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Elements</span>
<a class="o-navigation__link" href="buttons" tabindex="-1">Buttons</a>
<a class="o-navigation__link" href="badge" tabindex="-1">Badge</a>
<a class="o-navigation__link" href="checkboxes" tabindex="-1">Checkboxes</a>
<a class="o-navigation__link" href="code" tabindex="-1">Code</a>
<a class="o-navigation__link" href="description-lists" tabindex="-1">Description Lists</a>
Expand All @@ -141,6 +140,7 @@ <h1 class="o-navigation__banner-title">Patterns</h1>
<a class="o-navigation__link" href="tables" tabindex="-1">Tables</a>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Components</span>
<a class="o-navigation__link" href="card" tabindex="-1">Card</a>
<a class="o-navigation__link" href="record-hero" tabindex="-1">Record Hero</a>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Objects</span>
<a class="o-navigation__link" href="charts" tabindex="-1">Charts</a>
<a class="o-navigation__link" href="content" tabindex="-1">Content</a>
Expand All @@ -167,27 +167,33 @@ <h1 class="jumbo m-0 p-0 mt-2 max-w-600 mx-auto">About</h1>
<section class="mt-6" id="node_modules">
<div class="layout-content px-4 pb-4">
<div class="o-content mx-auto">
<nav>
<span>Contents:</span>
<a href="#heading-tokens">Tokens</a>
<a href="#heading-elements">Elements</a>
<a href="#heading-components">Components</a>
<a href="#heading-objects">Objects</a>
<a href="#heading-utilities">Utilities</a>
</nav>
<p>All of the Patterns source is organized into four directories: <a href="#heading-elements">Elements</a>, <a href="#heading-components">Components</a>, <a href="#heading-objects">Objects</a>, and <a href="#heading-utilities">Utilities</a>. This naming convention is influenced by “<a href="https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/">BEMIT: Taking the BEM Naming Convention a Step Further</a>.” Our four buckets included Elements, Components, Objects, and Utilities. If you are familiar with Brad Frost’s <a href="http://atomicdesign.bradfrost.com/chapter-2/">Atomic Design Methodology</a>, this structure will sound very familiar. All patterns are based on design <a href="#heading-tokens">tokens</a> that define visual properties on a micro scale.</p>
<p>
<a href="./readme.md#table-of-contents">← Table of Contents</a>
</p>
<h1 id="heading-patterns">Patterns</h1>
<p>All of the Patterns source is organized into four directories: <a href="#elements">Elements</a>, <a href="#components">Components</a>, <a href="#objects">Objects</a>, and <a href="#utilities">Utilities</a>. This naming convention is influenced by “<a href="https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/">BEMIT: Taking the BEM Naming Convention a Step Further</a>.” Our four buckets included Elements, Components, Objects, and Utilities. If you are familiar with Brad Frost’s <a href="http://atomicdesign.bradfrost.com/chapter-2/">Atomic Design Methodology</a>, this structure will sound very familiar.</p>
<p>
<img src="./images/naming-01.png" alt="Elements, Components, Objects">
<img src="https://raw.githubusercontent.com/cityofnewyork/patterns-docs/main/images/naming-01.png" alt="Elements, Components, Objects">
</p>
<h2 id="heading-tokens">Tokens</h2>
<p>Design Tokens are the variables that store visual properties such as color, spacing, typography styling, etc. They are shared from JavaScript to Sass files. They are also passed to the <a href="#heading-utilities">Utility</a> configuration for customization of CSS utilities.</p>
<h2 id="heading-elements">Elements</h2>
<p>Elements are the smallest building blocks and include colors, icons, buttons, links, layouts, and more. They can be seen within <a href="#components">Components</a> and <a href="#objects">Objects</a>. They are often customized default HTML tags (<code>&lt;button&gt;</code>, <code>&lt;table&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;a&gt;</code>, etc.). They require smaller amounts of markup and styling to customize.</p>
<p>Elements are the smallest building blocks and include colors, icons, buttons, links, layouts, and more. They can be seen within <a href="#heading-components">Components</a> and <a href="#heading-utilities">Utilities</a>. They are often customized default HTML tags (<code>&lt;button&gt;</code>, <code>&lt;table&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;a&gt;</code>, etc.). They require smaller amounts of markup and styling to customize.</p>
<h2 id="heading-components">Components</h2>
<p>Components are smaller patterns that require more complex markup and styling than elements. Often, they include multiple elements such as buttons, lists, links, etc.. Component CSS classes are denoted with the <code>.c-</code> prefix.</p>
<p>Components are smaller patterns that require more complex markup and styling than elements. They may appear more than once in a single view. Often, they include multiple elements such as buttons, lists, links, etc.. Component CSS classes are denoted with the <code>.c-</code> prefix.</p>
<h2 id="heading-objects">Objects</h2>
<p>Objects are the most complex patterns and require a great deal of custom styling and markup to function. They can be global elements (<code>&lt;footer&gt;</code>) or appear only in certain views. Object CSS classes are denoted with the <code>.o-</code> prefix.</p>
<p>Objects are the most complex patterns and require more custom styling, markup, and JavaScript to function. They may only appear once in a single view. They can be global elements (<code>&lt;footer&gt;</code>) or appear only in certain views. Object CSS classes are denoted with the <code>.o-</code> prefix.</p>
<p>
<img src="./images/naming-02.png" alt="Elements and Components within Objects">
<img src="https://raw.githubusercontent.com/cityofnewyork/patterns-docs/main/images/naming-02.png" alt="Elements and Components within Objects">
</p>
<h2 id="heading-utilities">Utilities</h2>
<p>Utilities are reusable single-attribute styles used to customize markup so that fewer patterns need to be written. They are not tied to any element, component, or object, but they can help override styling in certain contexts and build views more efficiently. It is recommended to use the <a href="https://tailwindcss.com/">Tailwind CSS Framework</a>, however it is optional.</p>
<p>Utilities are reusable single-attribute styles used to customize markup so that fewer patterns need to be written. They are not tied to any element, component, or object, but they can help override styling in certain contexts and build views more efficiently. It is recommended to use the <a href="https://tailwindcss.com/">Tailwindcss Utility Framework</a> for creating utilities based on design <a href="#heading-tokens">tokens</a>, however, it is optional.</p>
<p>
<img src="./images/naming-03.png" alt="Utilities">
<img src="https://raw.githubusercontent.com/cityofnewyork/patterns-docs/main/images/naming-03.png" alt="Utilities">
</p>
</div>
</div>
Expand Down Expand Up @@ -218,7 +224,7 @@ <h2 id="heading-utilities">Utilities</h2>
<div>
<p>NYC Opportunity is the <a href='http://nyc.gov/opportunity'>New York City Mayor's Office for Economic Opportunity</a>. We are committed to sharing open source software that we use in our products. Feel free to ask questions and share feedback. Follow @nycopportunity on&nbsp;<a href='https://twitter.com/nycopportunity' target='_blank' rel='nofollow noopener'>Twitter</a>,&nbsp;<a href='https://www.facebook.com/NYCOpportunity/' target='_blank' rel='nofollow noopener'>Facebook</a>,&nbsp;<a href='https://medium.com/@nycopportunity' target='_blank' rel='nofollow noopener'>Medium</a>, and&nbsp;<a href='' target='_blank' rel='nofollow noopener' title='Viewable by github.com/orgs/CityOfNewYork/ members.'>Github</a>.</p>
</div>
<div class="desktop:text-right">
<div class="desktop:text-end">
<small>© City of New York, 2021 All Rights Reserved.
<br>NYC is a trademark and service mark of the City of New York.
</small>
Expand All @@ -232,7 +238,7 @@ <h2 id="heading-utilities">Utilities</h2>
var nyco = new NYCO();
nyco.copy();
nyco.icons();
nyco.icons('svg/feather.svg');
nyco.toggle();
</script>
<script src="/reload/reload.js"></script>
</body>
24 changes: 12 additions & 12 deletions dist/animate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link href="/images/favicon/favicon.ico" rel="shortcut icon" />
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script type="text/javascript">
var VERSION = '2.5.1';
var VERSION = '2.6.0-1';
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(event) {
Expand Down Expand Up @@ -55,17 +55,17 @@ <h1 class="o-header__main-title">
<use xlink:href="#icon-logo-nyco"></use>
</svg>
</h1>
<div aria-hidden="true" class="o-header__main-version">v2.5.1</div>
<div aria-hidden="true" class="o-header__main-version">v2.6.0-1</div>
</div>
<div class="o-header__banner-secondary color-dark-background">
<h1 class="o-header__secondary-title text-jumbo">Patterns</h1>
</div>
<div class="o-header__secondary-version color-dark-background">
<div>
<a class="btn flex items-center" href="https://github.com/CityOfNewYork/nyco-patterns/tree/v2.5.1">
<a class="btn flex items-center" href="https://github.com/CityOfNewYork/nyco-patterns/tree/v2.6.0-1">
<svg aria-hidden="true" class="icon-ui icon-3 mr-1">
<use xlink:href="#icon-ui-github"></use>
</svg>2.5.1
<use xlink:href="#feather-github"></use>
</svg>2.6.0-1
</a>
</div>
</div>
Expand All @@ -80,10 +80,9 @@ <h1 class="o-header__secondary-title text-jumbo">Patterns</h1>
<a class="o-navigation__link" href="installation">Installation</a>
<a class="o-navigation__link" href="about">About the Patterns</a>
<a class="o-navigation__link" href="prototyping">Prototyping</a>
</nav>
<nav>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Elements</span>
<a class="o-navigation__link" href="buttons">Buttons</a>
<a class="o-navigation__link" href="badge">Badge</a>
<a class="o-navigation__link" href="checkboxes">Checkboxes</a>
<a class="o-navigation__link" href="code">Code</a>
<a class="o-navigation__link" href="description-lists">Description Lists</a>
Expand All @@ -96,6 +95,7 @@ <h1 class="o-header__secondary-title text-jumbo">Patterns</h1>
<a class="o-navigation__link" href="tables">Tables</a>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Components</span>
<a class="o-navigation__link" href="card">Card</a>
<a class="o-navigation__link" href="record-hero">Record Hero</a>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Objects</span>
<a class="o-navigation__link" href="charts">Charts</a>
<a class="o-navigation__link" href="content">Content</a>
Expand Down Expand Up @@ -125,10 +125,9 @@ <h1 class="o-navigation__banner-title">Patterns</h1>
<a class="o-navigation__link" href="installation" tabindex="-1">Installation</a>
<a class="o-navigation__link" href="about" tabindex="-1">About the Patterns</a>
<a class="o-navigation__link" href="prototyping" tabindex="-1">Prototyping</a>
</nav>
<nav>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Elements</span>
<a class="o-navigation__link" href="buttons" tabindex="-1">Buttons</a>
<a class="o-navigation__link" href="badge" tabindex="-1">Badge</a>
<a class="o-navigation__link" href="checkboxes" tabindex="-1">Checkboxes</a>
<a class="o-navigation__link" href="code" tabindex="-1">Code</a>
<a class="o-navigation__link" href="description-lists" tabindex="-1">Description Lists</a>
Expand All @@ -141,6 +140,7 @@ <h1 class="o-navigation__banner-title">Patterns</h1>
<a class="o-navigation__link" href="tables" tabindex="-1">Tables</a>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Components</span>
<a class="o-navigation__link" href="card" tabindex="-1">Card</a>
<a class="o-navigation__link" href="record-hero" tabindex="-1">Record Hero</a>
<span class="o-navigation__link-header text-blue-70t border-blue-30t">Objects</span>
<a class="o-navigation__link" href="charts" tabindex="-1">Charts</a>
<a class="o-navigation__link" href="content" tabindex="-1">Content</a>
Expand Down Expand Up @@ -169,7 +169,7 @@ <h1 class="jumbo m-0 p-0 mt-2 max-w-600 mx-auto">Animate</h1>
<div class="o-content mx-auto flex items-center mb-3">
<a class="flex no-underline" href="#heading-animate">
<svg aria-hidden="true" class="icon-ui-anchor">
<use xlink:href="#icon-ui-anchor"></use>
<use xlink:href="#feather-anchor"></use>
</svg>&nbsp;<span class="sr-only underline">Anchor</span>
</a>&nbsp;<h2 class="capitalize m-0" id="heading-animate">Animate CSS</h2>
</div>
Expand Down Expand Up @@ -236,7 +236,7 @@ <h2 id="heading-default-animations">Default Animations</h2>
<div>
<p>NYC Opportunity is the <a href='http://nyc.gov/opportunity'>New York City Mayor's Office for Economic Opportunity</a>. We are committed to sharing open source software that we use in our products. Feel free to ask questions and share feedback. Follow @nycopportunity on&nbsp;<a href='https://twitter.com/nycopportunity' target='_blank' rel='nofollow noopener'>Twitter</a>,&nbsp;<a href='https://www.facebook.com/NYCOpportunity/' target='_blank' rel='nofollow noopener'>Facebook</a>,&nbsp;<a href='https://medium.com/@nycopportunity' target='_blank' rel='nofollow noopener'>Medium</a>, and&nbsp;<a href='' target='_blank' rel='nofollow noopener' title='Viewable by github.com/orgs/CityOfNewYork/ members.'>Github</a>.</p>
</div>
<div class="desktop:text-right">
<div class="desktop:text-end">
<small>© City of New York, 2021 All Rights Reserved.
<br>NYC is a trademark and service mark of the City of New York.
</small>
Expand All @@ -250,7 +250,7 @@ <h2 id="heading-default-animations">Default Animations</h2>
var nyco = new NYCO();
nyco.copy();
nyco.icons();
nyco.icons('svg/feather.svg');
nyco.toggle();
</script>
<script src="/reload/reload.js"></script>
</body>
Loading

0 comments on commit 75451c3

Please sign in to comment.