Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/suryarajendhran/change-css
A library to help modify CSS in all its forms easily.
https://github.com/suryarajendhran/change-css
css frontend modify
Last synced: 11 days ago
JSON representation
A library to help modify CSS in all its forms easily.
- Host: GitHub
- URL: https://github.com/suryarajendhran/change-css
- Owner: suryarajendhran
- License: mit
- Created: 2021-08-11T04:57:25.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-08T05:36:41.000Z (over 1 year ago)
- Last Synced: 2025-01-06T01:44:49.431Z (18 days ago)
- Topics: css, frontend, modify
- Language: JavaScript
- Homepage: https://github.com/suryarajendhran/change-css
- Size: 2.07 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
Change CSS
A library to help find, modify and work with css rules easily.
« Explore the docs »
·
Report Bug
·
Request Feature
·
## About The Project
Sometimes, swapping out classes is not enough so you can instead modify the stylesheets themselves. change-css is a library that can help you do just that. This can be a very easy path to theming a dynamic site, especially if the theme variables are generated through JS.
## Getting Started
To add the library to your project
### Prerequisites
The library has no dependencies, works with plain old HTML/CSS/JS.
### Installation
1. Install the package from npm
```sh
npm install --save change-css
```
2. Also available as a CDN download.
## Usage
### Usage as an ES6 module
#### Get a CSS Rule
Use getCSSRule() to search your document's stylesheets for a [CSS Rule](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule).
```js
import { getCSSRule } from 'change-css';
const CSSRule = getCSSRule('.text-base');
// Returns a CSSRule if such a rule exists
// in any of the stylesheets in your document
// else returns false.
```
#### Modify a CSS Rule
The modifyCSSRule() function makes it easier to modify a [CSS Rule](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule) with a single function call.
```js
import { modifyCSSRule } from 'change-css';
modifyCSSRule('body', { fontFamily: 'Inter' });
```
### Usage as a CDN script
From version 0.3, Change CSS can now be used in the browser environment. Usage example can be found on [codepen](https://codepen.io/suryarajendhran/pen/mdweBYm).
## Roadmap
See the [open issues](https://github.com/suryarajendhran/change-css/issues) for a list of proposed features (and known issues).
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
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
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Surya Rajendhran - [@SuryaRajendhran](https://twitter.com/SuryaRajendhran) - [email protected]
Project Link: [https://github.com/suryarajendhran/change-css](https://github.com/suryarajendhran/change-css)
## Acknowledgements
Thanks to
* This awesome [guide](https://zellwk.com/blog/publish-to-npm/) about publishing to NPM by [Zell Liew](https://github.com/zellwk).
[contributors-shield]: https://img.shields.io/github/contributors/suryarajendhran/change-css.svg?style=for-the-badge
[contributors-url]: https://github.com/suryarajendhran/change-css/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/suryarajendhran/change-css.svg?style=for-the-badge
[forks-url]: https://github.com/suryarajendhran/change-css/network/members
[stars-shield]: https://img.shields.io/github/stars/suryarajendhran/change-css.svg?style=for-the-badge
[stars-url]: https://github.com/suryarajendhran/change-css/stargazers
[issues-shield]: https://img.shields.io/github/issues/suryarajendhran/change-css.svg?style=for-the-badge
[issues-url]: https://github.com/suryarajendhran/change-css/issues
[license-shield]: https://img.shields.io/github/license/suryarajendhran/change-css.svg?style=for-the-badge
[license-url]: https://github.com/suryarajendhran/change-css/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/suryarajendhran