estidlore / bonbon

Simple but powerful styling tool

Bonbon

Simple but powerful styling tool
Report Bug

Table of contents

• Installation
• Import
• Documentation
• Contributing
• License
• Contact

Installation

Clone repo:

git clone https://github.com/estidlore/bonbon.git

Install with npm:

npm i @estidlore/bonbon

Install with yarn:

yarn add @estidlore/bonbon

Import

In your main file (i.e. src/index.js) write:

import "@estidlore/bonbon/dist/css/index.css";
import "@estidlore/bonbon/dist/css/animations.css";

or if you want to import the scss:

import "@estidlore/bonbon/scss/index.scss";
import "@estidlore/bonbon/scss/animations.scss";

Documentation

You can read the Bonbon's documentation at estidlore-bonbon.web.app/docs powered by React, Sass and, of course, Bonbon ;-)

IMPORTANT: Please, remember that Bonbon is still a "baby" project. New features, fixes and documentation are constantly being added, be patient.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Code and documentation copyright 2022 the Bonbon authors. Code released under the MIT License.

Contact

Estid Felipe Lozano Reyes

• GitHub: https://github.com/estidlore
• LinkedIn: https://www.linkedin.com/in/estidlore

bonbon's Issues

[FEAT] Snippet design

Problem

Snippet needs to be more readable

Proposal

• "Copy" button flex positioning, no borders, more spacing, and slightly bigger font
• Show snippet indentation correctly

[FEAT] Show overwritable scss variables in docs

Problem

Each doc needs to show the variable the developer can overwrite to make customizations

Proposal

Show a snippet for each doc showing the overwritable variables related to that styles

Links / References

See variables that use !default at: https://github.com/estidlore/bonbon/tree/main/scss