UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences
TypeScript HTML CSS JavaScript
Clone or download
hippee-lee fix(CORE): Update travis secure token and fix slack integration. (#2467)
Signed-off-by: Matt Hippely <mhippely@vmware.com>
Latest commit 86992a8 Jul 17, 2018
Permalink
Failed to load latest commit information.
.github [CORE] Format project files with prettier (#2327) May 31, 2018
gemini [CHORE] proxy status of test to travis (#2461) Jul 16, 2018
npm [CORE] Format project files with prettier (#2327) May 31, 2018
scripts [CHORE] proxy status of test to travis (#2461) Jul 16, 2018
src [CHORE] proxy status of test to travis (#2461) Jul 16, 2018
tests [CORE] Format project files with prettier (#2327) May 31, 2018
.editorconfig [CORE] Adds Prettier.io (#2324) May 31, 2018
.gemini.conf.yml [CORE] setup saucelabs with travis, fix code coverage (#1978) Feb 28, 2018
.gitignore [CORE] setup saucelabs with travis, fix code coverage (#1978) Feb 28, 2018
.prettierignore [CORE] Adds Prettier.io (#2324) May 31, 2018
.prettierrc [CORE] Adds Prettier.io (#2324) May 31, 2018
.travis.yml fix(CORE): Update travis secure token and fix slack integration. (#2467) Jul 17, 2018
ATTRIBUTION.md [CORE] Format project files with prettier (#2327) May 31, 2018
BUILD.md [CORE] Format project files with prettier (#2327) May 31, 2018
CODE_OF_CONDUCT.md [CORE] Format project files with prettier (#2327) May 31, 2018
CODING_GUIDELINES.md [NG] clrInput and form control validation components (#2295) Jun 6, 2018
CONTRIBUTING.md [CORE] Format project files with prettier (#2327) May 31, 2018
Clarity_LICENSE file_SIL Open Font License.txt [CORE] Copyright Nov 16, 2016
Clarity_NOTICE.txt [CORE] Copyright Nov 16, 2016
DEVELOPMENT_CONTRIBUTION.md [NG] release v0.12.3-patch.2 Jul 6, 2018
LICENSE Issue/core copyright date updates (#1837) Jan 4, 2018
README.md [CORE] Format project files with prettier (#2327) May 31, 2018
angular.json [CORE] remove code-highlight from dev app Jul 2, 2018
karma.conf.js [UI] fix build for 0.12 where relative paths cause issues for theming ( Jun 6, 2018
logo.png Logo image Oct 28, 2016
package-lock.json [NG] release v0.12.3-patch.2 Jul 6, 2018
package.json [CORE] Release 0.12.4 Jul 12, 2018
postcss.config.js [CORE] Format project files with prettier (#2327) May 31, 2018
tsconfig.json [CORE] Format project files with prettier (#2327) May 31, 2018
tsconfig.spec.json [CORE] Format project files with prettier (#2327) May 31, 2018
tslint.json [CORE] Adds Prettier.io (#2324) May 31, 2018
webpack.icons.config.js [CORE] Format project files with prettier (#2327) May 31, 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 Clarity Seed.

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 clarity-angular configuration as in the example below.

    System.config({
    	...
    	map: {
    	   ...
    	   '@clr/angular': 'node_modules/@clr/angular/bundles/clr-angular.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.