sonar-ui

A framework-agnostic components and styling library.

Table of Contents

1. Installation
2. Features
3. Advantages
4. Documentation
5. Contributing
6. Sponsor
7. Maintainers
8. License

Installation

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

Contributing

You're free to contribute to this project by submitting issues and/or pull requests. For more information, please read the Contribution guide.

Sponsor

Love this project and want to support it? You can buy me a coffee :)

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

Matthieu Jabbour

License

MIT

Copyright (c) Matthieu Jabbour. All Rights Reserved.