@cobwds/components
v1.19.3
Published
City of Boston's web design system and code component library.
Readme
City of Boston Web Design System
This repository contains a library of reusable code components for building City of Boston applications and websites. These components are built using LitElement and styled with custom CSS properties (variables) for easy customization.
About the City of Boston Web Design System
Our mission is to standardize and elevate digital experiences across the City of Boston by providing scalable, accessible tools for building applications.
What’s Included?
- Components: Modular web components built with Lit for performance and flexibility.
- Styles: A foundational CSS framework, including design tokens and utility classes.
- Themes: Customizable agency-specific themes for adapting designs to organizational branding.
- Figma Libraries: Design libraries for prototyping that mirror the components and variables in code, promoting consistency between design and development.
Why Use COBWDS?
Key Benefits
- Accessibility: Every component is tested to meet WCAG 2.2 standards.
- Lit-based Web Components: Built on the powerful and lightweight Lit framework, web components are native code designed to work seamlessly across modern frameworks or standalone applications.
- Customizable Design Tokens: CSS variables that serve as a foundation for consistently building new components.
- Override-Friendly Architecture: Components are designed with built-in overrides, making it easy to styles and behavior to meet specific application needs.
Install the COBWDS
To start using the COBWDS in your project, you need to install the core libraries:
npm install @cobwds/components @cobwds/stylesReference the files in your application
<script type="module" src="[path-to-dir]/cobwds.js"></script>
<link rel="stylesheet" href="[path-to-dir]/cobwds-full.min.css" />