NYCO UI Patterns Framework

Role: Lead Developer and Digital Product Designer

nycopportunity.github.io/patterns-framework

The NYCO Patterns Framework is a collection of tools and principles used to make creating pattern libraries fun for developers, transparent for teams, and sustainable beyond the lifecycle of digital products. I started the framework with support and feedback from my team and our fellows while building the ACCESS NYC UI Pattern Library. It includes front-end development tools such as the Patterns Command Line Interface (CLI) and technical guidelines for internally constructing UIs.

$ npm run styles
⚫ Tokens in @pttrn/config/tokens.js out ./src/config/_tokens.scss
🤓 Lint suggestions for ./src/scss/default.scss
💅 Sass in ./src/scss/default.scss out ./dist/css/default.css
💅 PostCSS on ./dist/css/default.css
✨ Styles finished
The first version of the ACCESS Patterns included npm scripts and a local Node.js application for distributing the source code to static JavaScript, CSS, and HTML.

$ npm run make component accordion

✨ Created ./src/components/accordion/accordion.slm
✨ Created ./src/components/accordion/accordion.md
✨ Created ./src/components/accordion/_accordion.scss

💅 Include the accordion stylesheet in your main Sass entry point. To create an independent distribution (optional) add the accordion stylesheet to your Sass configuration.

❓ Make a config file for accordion? y/n ↵

The ACCESS Patterns could also scaffold new components by creating the source files needed to style, script, and document their HTML specifications.
bin/...
config/...
README.md
LICENSE
package-lock.json
package.json
config/
  make/...
  scaffold/...
  _sample.js
  alerts.js
  global.js
  lint.js
  make.js
  pa11y.js
  postcss.js
  publish.js
  rollup.js
  sass.js
  slm.js
  svgs.js
  tailwindcss.js
  tokens.js
bin/
  util/...
  _sample.js
  cli.js
  default.js
  lint.js
  make.js
  pa11y.js
  postcss.js
  publish.js
  rollup.js
  sass.js
  scaffold.js
  serve.js
  slm.js
  styles.js
  svgs.js
  tokens.js
The npm scripts and local Node.js applicaton became the basis for the Patterns Command Line Interface (CLI) which helped my team and I to design, develop, and maintain 4 additional product pattern libraries.

This font-end developer tooling helped my team and I to design, develop, and maintain 4 additional product pattern libraries, including the Working NYC Patterns, Growing Up NYC Patterns, Generation NYC Patterns, and NYC Opportunity Common Agency Patterns.

ACCESS NYC Patterns

The ACCESS NYC UI Patterns became the basis for front-end developer tools called the NYCO UI Patterns Framework that would help build and maintain other pattern libraries for our products.

Working NYC Patterns

I used the NYCO UI Patterns Framework to design Working NYC in-code and ship its pattern library simultaneously with the launch of the product.

Growing Up NYC Patterns

The NYCO UI Patterns Framework supported the development of the Growing Up and Generation NYC Patterns by other members of my team.

NYC Opportunity Common Agency Patterns

I used the NYCO UI Patterns Framework to create common agency patterns for my organization (The Mayor's Office for Economic Opportunity) with many design and development contributions from my team.

Product managers, designers, and engineers have used the tools and libraries in multiple internal and external projects, greatly expanding our capacity for more complex design challenges. I used them to stand up the static documentation site for the NYC Benefits Screening API as well as build and launch the Mental Health for All website.

NYC Benefits Platform Screening API

I used the NYCO Common Agency Patterns and the Patterns CLI to design and build the NYC Benefits Platform Screening API documentation.

Mental Health for All Website

I used the Growing Up NYC Patterns and the Patterns CLI to design and build the Mental Health for All website.