https://github.com/rootstrap/rootstrap-ui
Rootstrap's UI Components & Styles
https://github.com/rootstrap/rootstrap-ui
Last synced: 8 months ago
JSON representation
Rootstrap's UI Components & Styles
- Host: GitHub
- URL: https://github.com/rootstrap/rootstrap-ui
- Owner: rootstrap
- License: mit
- Created: 2019-08-29T18:10:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-10T23:22:46.000Z (about 4 years ago)
- Last Synced: 2025-06-12T01:05:09.189Z (8 months ago)
- Language: CSS
- Homepage: https://rootstrap.github.io/rootstrap-ui
- Size: 2.74 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Rootstrap UI 🎨
[](https://npmjs.org/package/rootstrap-ui)
[](https://circleci.com/gh/rootstrap/rootstrap-ui)
[](https://github.com/rootstrap/rootstrap-ui/blob/master/LICENSE.md)
Rootstrap UI is the components & styles library to build user interfaces in Rootstrap's projects.
Includes:
- Internal, generic and extensible components
- Core styles
- Design guidelines
Goals:
- Unify shared components implementation
- Define style standard for Engineering & Design
- Create Design Systems for specific projects using `rootstrap-ui` as a start point
- Generate guidelines documentation
## Getting started
Rootstrap UI is available as an NPM package. To install the package in your project use `npm` or `yarn`.
```bash
yarn add rootstrap-ui
npm install rootstrap-ui
```
### Styles
Import the style library in your SCSS files after defining the custom variables.
```scss
@import 'your-custom-variables';
@import '~rootstrap-ui/dist/styles/scss/index';
```
## Motivation
Moving from nothing to have a DS for each project is unrealistic. After a discussion with Design + Engineering, we decided to implement internal and reusable components/mixins and define guidelines. All the components must be validated with the design team and be as generic as possible.
Guidelines or design rules will be discussed and documented. Then Design + Engineering teams should be aligned with these rules. For some design rules, we will create a Figma template, so it's easier to adopt them in all the projects.
_For example: After defining a typography system, we create a Figma template page for typography with examples, rules, and modifiers. Then the designer can use this template to create custom typography for a specific project just changing a few things, and it will be aligned with the typography system._
## License
Rootstrap UI is available under the MIT license. See the LICENSE file for more info.
## Credits
**Rootstrap** is maintained by [Rootstrap](http://www.rootstrap.com) with the help of our [contributors](https://github.com/rootstrap/rootstrap-ui/contributors).
[
](http://www.rootstrap.com)