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
-
Install the package from npm
npm install --save change-css
-
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.
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 with a single function call.
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.
Roadmap
See the open 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.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.
Contact
Surya Rajendhran - @SuryaRajendhran - suryarajendhran@outlook.com
Project Link: https://github.com/suryarajendhran/change-css
Acknowledgements
Thanks to