Skip to content
UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
jeeyun docs(a11y): adding more detailed documentation on dropdown a11y
Signed-off-by: Jeeyun Lim <jeeyun.lim@gmail.com>
Latest commit 9ca4ca4 Aug 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github fix: attempt to fix github PR template Jul 11, 2019
gemini feat(tabs): key focus directive and tabs overflow focus management Aug 16, 2019
golden feat(tabs): key focus directive and tabs overflow focus management Aug 16, 2019
npm release 2.0-rc.1 Apr 30, 2019
scripts build(ks-app): remove ks-app Jul 31, 2019
src docs(a11y): adding more detailed documentation on dropdown a11y Aug 20, 2019
tests build(ks-app): remove ks-app Jul 31, 2019
.editorconfig [CORE] Adds Prettier.io (#2324) May 31, 2018
.gemini.conf.yml [NG] Datagrid Render Refactor (#2670) Oct 16, 2018
.gitignore [WEBSITE] adding the website to the main project (#2899) Dec 17, 2018
.npmrc [core] have NPM use exact versions and bump some dependencies (#2883) Nov 29, 2018
.nvmrc fix(website) remove the need to use SSR Jun 11, 2019
.prettierignore fix: clr-base imports and build Aug 6, 2019
.prettierrc [CORE] Adds Prettier.io (#2324) May 31, 2018
.stylelintrc build: update style lint Aug 5, 2019
.travis.yml [CHORE] add gemini tests back to build Jun 17, 2019
ATTRIBUTION.md [CORE] Format project files with prettier (#2327) May 31, 2018
BUILD.md build(ks-app): remove ks-app Jul 31, 2019
CHANGELOG.md chore: website update for 1.2.1 and 2.1.1 Aug 8, 2019
CODE_OF_CONDUCT.md [CORE] Format project files with prettier (#2327) May 31, 2018
CODING_GUIDELINES.md Update provider naming conventions (#3389) May 28, 2019
CONTRIBUTING.md [WEB] fix typos in CONTRIBUTING and Release Note Jun 12, 2019
Clarity_LICENSE file_SIL Open Font License.txt [CORE] Copyright Nov 16, 2016
Clarity_NOTICE.txt [CORE] Copyright Nov 16, 2016
DESIGN_CONTRIBUTION.md [CORE] feature(docs): Adds Design Contribution Guidelines. (#3216) Mar 20, 2019
DEVELOPMENT_CONTRIBUTION.md build(ks-app): remove ks-app Jul 31, 2019
LICENSE Issue/core copyright date updates (#1837) Jan 4, 2018
README.md [CORE] fix: Updates redme badges for travis migration. (#3336) May 6, 2019
angular.json fix: clr-base imports and build Aug 6, 2019
browserslist chore(core): Update packages for Angular v8.0.0 support (#3405) Jun 3, 2019
commitlint.config.js refactor(i18n): replace original provider with new implementation Aug 5, 2019
custom-webpack.config.js feat: added custom properties test page to dev app Aug 2, 2019
karma.conf.js [BUILD] add code coverage reporter and thresholds Jul 3, 2019
logo.png Logo image Oct 28, 2016
netlify.toml fix(website) remove the need to use SSR Jun 11, 2019
package-lock.json fix: improve screen reader behaviors on stack-view and modal Aug 15, 2019
package.json chore: delete unused ssr code Aug 12, 2019
postcss.config.js [CORE] Format project files with prettier (#2327) May 31, 2018
tsconfig.api-docs.json add api docs to website, no linking to it yet May 23, 2019
tsconfig.json fix: clr-base imports and build Aug 6, 2019
tsconfig.spec.json [CORE] Format project files with prettier (#2327) May 31, 2018
tslint.json [BUILD] This adds a custom TSLint rule for us to guard against barrel… Sep 13, 2018
webpack.icons.config.js [icons] reverting icon changes that supported proper treeshaking and … Nov 26, 2018

README.md

Clarity

Clarity Design System

Build Status

Build Status

Project Clarity is an open source design system that brings together UX guidelines, an HTML/CSS framework, and Angular components. This repository includes everything you need to build, customize, test, and deploy Clarity. For complete documentation, visit the Clarity website.

Getting Started

Clarity is published as three npm packages:

  • @clr/icons. Contains the custom element icons.
  • @clr/ui. Contains the static styles for building HTML components.
  • @clr/angular. Contains the Angular components. This package depends on @clr/ui for styles.

The easiest way to run a sample Angular application with Clarity is to use the Angular CLI and run ng add @clr/angular.

If you already have an Angular application, you can follow the installation steps below to include and use Clarity in your application.

Installing Clarity Icons

  1. Install Clarity Icons package through npm:

    npm install @clr/icons --save
  2. Install the polyfill for Custom Elements:

    npm install @webcomponents/custom-elements --save
  3. Include the clr-icons.min.css and clr-icons.min.js in your HTML. As clr-icons.min.js is dependent on the Custom Elements polyfill, make sure to include it 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>

    If your site is built with angular-cli you can achieve the above by adding the files to the styles array and scripts array in angular-cli.json:

    "styles": [
        ...
        "../node_modules/@clr/icons/clr-icons.min.css",
        ...
    ],
    "scripts": [
        ...
        "../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
        "../node_modules/@clr/icons/clr-icons.min.js"
        ...
    ]

Installing Clarity UI

  1. Install Clarity UI package through npm:

    npm install @clr/ui --save
  2. Include the clr-ui.min.css in your HTML file:

    <link rel="stylesheet" href="path/to/node_modules/@clr/ui/clr-ui.min.css">

    If your site is built with angular-cli, you can achieve the above by adding the file to the styles array in angular-cli.json:

    "styles": [
        ...
        "../node_modules/@clr/ui/clr-ui.min.css"
        ...
    ]
  3. Write your HTML with the Clarity CSS class names and markup.

Installing Clarity Angular

  1. Follow steps above to install Clarity Icons and Clarity UI.

  2. Install the clarity-angular package through npm:

    npm install @clr/angular --save
  3. Import the ClarityModule into your Angular application's module. Your application's main module might look like this:

    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 {    }

    If your application uses systemjs, add the configuration as in the example below.

    System.config({
    	...
    	map: {
    	   ...
    	   '@clr/angular': 'node_modules/@clr/angular/bundles/clr-angular.umd.js',
    	   '@clr/icons': 'node_modules/@clr/icons/bundles/clr-icons.umd.js',
    	},
    	...
    });
    

Documentation

For documentation on the Clarity Design System, including a list of components and example usage, see our website.

Contributing

The Clarity project team welcomes contributions from the community. For more detailed information, see CONTRIBUTING.md.

Licenses

  • The Clarity Design System is licensed under the MIT license.
  • The font is licensed under the Open Font License (OFL).

Feedback

If you find a bug or want to request a new feature, please open a GitHub issue.

Include a link to the reproduction scenario you created by forking one of the Clarity Stackblitz Templates for the version you are using at Clarity StackBlitz templates.

You can’t perform that action at this time.