# sonar-ui

A framework-agnostic components and styling library.

[![Build Status](https://travis-ci.org/openizr/sonar-ui.svg?branch=master)](https://travis-ci.org/openizr/sonar-ui)
[![Coverage Status](https://coveralls.io/repos/github/openizr/sonar-ui/badge.svg)](https://coveralls.io/github/openizr/sonar-ui)
[![npm](https://img.shields.io/npm/v/sonar-ui.svg)](https://www.npmjs.com/package/sonar-ui)
[![node](https://img.shields.io/node/v/sonar-ui.svg)](https://nodejs.org)
[![Downloads](https://img.shields.io/npm/dm/sonar-ui.svg)](https://www.npmjs.com/package/sonar-ui)


## Table of Contents

1. [Installation](#Installation)
2. [Features](#Features)
3. [Advantages](#Advantages)
4. [Documentation](#Documentation)
5. [Contributing](#Contributing)
6. [Sponsor](#Sponsor)
7. [Maintainers](#Maintainers)
8. [License](#License)


## Installation

```bash
yarn add sonar-ui
```


## Features

- A complete list of HTML specs for reusable components, using BEM conventions, performance, accessibility friendly and SEO optimized
- An implementation of those components in popular frontend frameworks (React, VueJS)
- A SASS library containing a small set of useful and essential mixins and classes to build awesome UIs
- A pack of SASS templates for easily implementing your own design system for reusable components, using those mixins
- A list of implemented, ready to use popular CSS design systems (Material, Semantic, Primer, ...)
- A set of SASS variables common to all design systems to tweak them and make your own theme, in minutes, with almost no knowledge


## Advantages
- Performance-focused (light HTML, 100% CSS for design)
- Separation of concerns, dev/graphic designer (no CSS in JS)
- W3C-compliant, accessibility-enabled and SEO friendly
- Easy to use, for both dev (components implemented in popular frameworks) and graphic designer (SASS mixins, variables)
- Framework and design system agnostic - you can implement components in any framework, you can implement your own design system
- Only the essential components, no templates, complex or customized stuff
- Best practices compliant


## Documentation

The complete documentation is available [here](https://matthieu-jabbour.gitbook.io/sonar-ui/)


## Contributing

You're free to contribute to this project by submitting [issues](https://github.com/openizr/sonar-ui/issues) and/or [pull requests](https://github.com/sonar-ui/sonar-ui/pulls). For more information, please read the [Contribution guide](https://github.com/openizr/sonar-ui/blob/master/CONTRIBUTING.md).


## Sponsor

Love this project and want to support it? You can [buy me a coffee](https://www.buymeacoffee.com/matthieujabbour) :)

Or just sending me a quick message saying "Thanks" is also very gratifying, and keeps me motivated to maintain open-source projects I work on!


## Maintainers

<table>
  <tbody>
    <tr>
      <td align="center">
        <img width="150" height="150" src="https://avatars.githubusercontent.com/u/29428247?v=4&s=150">
        </br>
        <a href="https://github.com/matthieujabbour">Matthieu Jabbour</a>
      </td>
    </tr>
  <tbody>
</table>


## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) Matthieu Jabbour. All Rights Reserved.