The 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.
Pattern libraries unify the experience of user interfaces because they can be integrated into different service delivery channels.
The public does not perceive the parts that make up digital government services as distinct products the way civil servants do. Websites, forms, mobile apps, dashboards, email newsletters, etc. are often perceived as a single entity. The more consistent these are from a user interface (UI) and user experience (UX) perspective the better the service delivery will be for end-users.
They reduce the amount of work that is required by designers and developers to implement new services.
By using patterns we can strive toward “making the right thing to do the easiest thing to do.” We can use tools that help developers become better at writing error free code, ensure the team adheres to accessibility standards, and create UIs that have been proven to work and can adapt to the changing times.
They create a common and accessible language for the organization to approach digital service delivery.
“Language is fundamental to collaboration. If you work in a team, your design language needs to be shared among the people involved in the creation of the product. Without a shared language, a group of people can’t create effectively together – each person will have a different mental model of what they’re trying to achieve.” - Design Systems by Alla Kholmatova.
Atomic Design and Utility-first - A pattern library starts with simple design tokens such as color, typographic features, and spacing values then scales up from there. Design tokens are used to build out more complex components, scripts, and utilities that retain modularity.
Framework Agnostic - Use React, Svelte, or Vue.js to add reactivity to user interface components. Manage your own copy of Bootstrap, Material UI, Foundation, or any of the many component libraries of choice.
Scaffold your own library or project by running the following command.
npx @nycopportunity/pttrn scaffold && npm i && npx pttrn build && npm start
This will install the Patterns Command Line Interface described below, scaffold a new static library project, and start the development server.
But I don’t write code!
No worries! Then perhaps try documenting your pattern library specs in a Figma design file first and share this with your development team.
The Patterns Framework Core Modules
These repositores help development teams create and maintain pattern libraries.
These modules provide support for the integration of the patterns framework in developer team projects.
Patterns CLI Plugins
These modules extend the functionality of the Patterns CLI via the custom commands API.
UI Pattern Components
These reusable user interface (UI) components can be implemented in different projects.
Pattern Libraries and Projects
These sites and libraries have been built using various modules in the NYCO Patterns Framework.
Link to roadmap Roadmap
Elements; one repository with all of the elements. Can be customized by CSS Custom Properties / Design Tokens for a particular product. Complete
Follow design token specification/standards determined by the Design Tokens W3C Community Group. TBD
Create Pug.js Pattern CLI plugin to replace slm-lang. TBD
Explore Mitosis as shared component specification. TBD
Release Patterns CLI Properties Plugin. Converts Design tokens managed by the Patterns CLI into CSS custom properties. Proof-of-concept for expressing design tokens as CSS custom properties. Complete
Refine Module Accessibility. Work with MOPD to document and address module issues. On-going
Draft architecture for additional shared pattern modules. Complete
Release Navigation Pattern. Complete
Release Modal Pattern. Complete
Release Menu Pattern. Complete
Release Attribution Pattern. Complete
Move to releasing shared pattern modules. Continue to support integrations and contributions. On-going
Release v1 of the Patterns CLI. v1 culminated a long effort to standardize the way our pattern libraries were created. We went from desperate NPM scripts and configurations to a standard set of packages and tools for building and maintaining patterns for different products and audiences. This development period was a heavy focus on developer tooling and support while also beginning to involve designers in the process of contributing. Complete
Link to support Support
Getting Help (how do I do the thing?)
First, check out the documentation for the module you have a question about. They are all GitHub repositories with readme files. If the documentation isn’t sufficient create a new issue or reach out to firstname.lastname@example.org.
Contributing (how to I add the thing?)
We manage planning and a backlog for all of the modules in the framework using Jira. Reach out to email@example.com if you are interested in contributing.
New York City UI Repositories
We draw inspiraction from the NYC Civic Tech community. This is a non-exaustive list of other open-source NYC user-interface resources. If you know of an open-source resource that should be featured please let us know at firstname.lastname@example.org.
Last updated January 3, 2023