vmware/clarity


UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences

http://clarity.design

License: Other

Language: TypeScript

Keywords: angular, clarity, component-library, css, design-system, typescript, ui, ux


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.

Project Statistics

Sourcerank 16
Repository Size 444 MB
Stars 5,397
Forks 553
Watchers 237
Open issues 423
Dependencies 1,739
Contributors 67
Tags 320
Created
Last updated
Last pushed

Top Contributors See all

Matt Hippely Jeremy Wilken Shijir Tsogoo jeeyun Scott Mathis Cory Rylan Eudes Petonnet-Vincent Ivan Donchev Aditya Bhandari Bozhidar Dryanovski chunghha Victor Mejia bdunkz bdunkz VMware GitHub Bot Cotton Hou Alex Mellnik Jeremy Canady David Herges Ryan Kent

Packages Referencing this Repo

l-clarity-angular
Angular components for Clarity
Latest release 0.10.16 - Updated - 5.4K stars
l-clarity-icons
Custom Element Icons for Clarity
Latest release 0.10.16 - Updated - 5.4K stars
l-clarity-ui
CSS for Clarity
Latest release 0.10.16 - Updated - 5.4K stars
clarity-icons-dev
Custom Element Icons for Clarity
Latest release 0.0.8 - Updated - 5.4K stars
u-clarity-angular
1. Install Clarity Icons package through npm: ``` npm install clarity-icons ```
Latest release 0.10.0-alpha.23 - Updated - 5.4K stars
u-clarity-icons
Custom Element Icons for Clarity
Latest release 0.10.0-alpha.11 - Updated - 5.4K stars
u-clarity-ui
CSS for Clarity
Latest release 0.10.0-alpha.11 - Updated - 5.4K stars
clarity-demos
Angular 2 demo components for Clarity
Latest release 0.7.6 - Updated - 5.4K stars
clarity-ui
CSS for Clarity
Latest release 0.10.28 - Updated - 5.4K stars
clarity-icons
Custom Element Icons for Clarity
Latest release 0.10.28 - Updated - 5.4K stars
@clr/icons
Custom Element Icons for Clarity
Latest release 3.0.0-next.4 - Updated - 5.4K stars
@clr/core
Custom Elements for Clarity
Latest release 3.0.0-next.4 - Updated - 5.4K stars
@clr/angular
Angular components for Clarity
Latest release 3.0.0-next.4 - Updated - 5.4K stars
@clr/ui
CSS for Clarity
Latest release 3.0.0-next.4 - Updated - 5.4K stars
clarity-angular
Angular components for Clarity
Latest release 0.10.28 - Updated - 5.4K stars

Recent Tags See all

v2.3.3 December 05, 2019
3.0.0-next.3 November 19, 2019
v2.3.2 November 14, 2019
v3.0.0-next.2 October 18, 2019
v2.3.0 October 18, 2019
v2.2.2 October 03, 2019
v1.3.2 October 03, 2019
v2.2.0 September 05, 2019
v1.3.0 September 05, 2019
v1.2.2 August 22, 2019
v2.1.2 August 22, 2019
v1.2.1 August 08, 2019
v2.1.1 August 08, 2019
2.1.0 July 25, 2019
v1.2.0 July 25, 2019

Interesting Forks See all

marvinosswald/clarity
UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional e...
TypeScript - Last pushed - 1 stars - 2 forks
ajaykumarmeher/clarity
UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional e...
TypeScript - Updated - 1 stars
CNXTEoE/clarity
UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional e...
TypeScript - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-08-22 17:06:24 UTC

Login to resync this repository