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

   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.

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.

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 - [email protected]

Project Link: https://github.com/suryarajendhran/change-css

Acknowledgements

Thanks to

• This awesome guide about publishing to NPM by Zell Liew.