Project Clarity is an open source design system that brings together UX guidelines, an HTML/CSS framework, and Angular components. Clarity is for both designers and developers.
Clarity’s designs stem from continuous exploration and research. These designs are built into our HTML/CSS components, which can be used any web UI, regardless of the underlying JavaScript framework. Clarity also offers a set of well-designed and implemented data-bound components built on top of Angular, one of the most popular JavaScript frameworks in the industry.
We offer three approaches for utilizing Clarity: UX, UX and UI, and Angular.
Jumpstart your project with one of our Sketch-based design resources. Start by downloading the Metropolis fonts . Then download your resource of choice.
For a new project, the best approach is to clone the Clarity seed project and modify it to fit your needs. The seed project is integrated with @clr/ui and @clr/angular, so you don’t need to install Clarity separately.
git clone https://github.com/vmware/clarity-seed.git
npm install
npm start
You can build an Angular app, then install Clarity onto your project.
Clarity is published as three separate packages on NPM:
npm install @clr/icons --save
npm install @webcomponents/custom-elements@1.0.0 --save
clr-icons.min.css
and clr-icons.min.js
.
Also, make sure to include custom-elements.min.js
, the Custom Elements
polyfill before clr-icons.min.js
:
<link rel="stylesheet" href="path/to/node_modules/@clr/icons/clr-icons.min.css">
<script src="path/to/node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
<script src="path/to/node_modules/@clr/icons/clr-icons.min.js"></script>
Visit the Clarity Icons section for more installation information.
npm install @clr/ui --save
<link rel="stylesheet" href="path/to/node_modules/@clr/ui/clr-ui.min.css">
angular-cli.json
:
"styles": [
...
"../node_modules/@clr/ui/clr-ui.min.css",
...
]
npm install @clr/angular --save
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { ClarityModule } from "@clr/angular";
import { AppComponent } from "./app.component";
@NgModule({
imports: [
BrowserModule,
ClarityModule,
...
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
npm start
* - Note that Clarity only supports the latest two versions of the listed browsers, with the exception of Internet Explorer.
The Clarity team welcomes contributions from the community. See our contribution guidelines on GitHub.
Ongoing work and feature requests are tracked using GitHub Issues. Please feel free to file an issue.
When submitting issues please provide a minimal app that demonstrates the issue by forking one of the Clarity Stackblitz projects. Since it depends on your issue starting with the correct Clarity version and theme will help us deliver support:
Ask questions on StackOverflow with the vmware-clarity tag to get the community's attention faster. You can also view FAQs by filtering on the vmware-clarity tag on StackOverflow.
See the legal attributions for third party software included in Clarity.