https://github.com/wervice/jcss
CSS manipulation & Theming using JavaScript
https://github.com/wervice/jcss
css css-in-js css-theme css-themes css-theming design html javascript library manipulation styling-css-in-js theming webdesign
Last synced: 19 days ago
JSON representation
CSS manipulation & Theming using JavaScript
- Host: GitHub
- URL: https://github.com/wervice/jcss
- Owner: Wervice
- License: lgpl-2.1
- Created: 2023-04-29T18:32:19.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-22T19:03:53.000Z (almost 3 years ago)
- Last Synced: 2025-09-22T04:02:00.646Z (8 months ago)
- Topics: css, css-in-js, css-theme, css-themes, css-theming, design, html, javascript, library, manipulation, styling-css-in-js, theming, webdesign
- Language: CSS
- Homepage: https://wervice.github.io
- Size: 32.2 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jCSS
## CSS Mainipulation library for client-side JavaScript
Using jCSS you can manipulate the style on your website easily from your JavaScript code.
jCSS also comes with some custom themes to quickly give your frontend a nice look.
jCSS is licensed under LGPL 2.1.
## Contents
- [Use CSS manipulation](#how-can-i-use-jcss)
- [Apply and swizch a theme](#how-can-i-use-a-theme)
## How can I use jCSS
You need to copy the code from the `jcss.js` file to your code.
When you're done with that step, you can uses the features of jCSS.
Here is a table of all functions and the usescases:
|Function|Usecase|
|-|-|
|**jcss_background**|Edit the background color an object|
|**jcss_color**|Edit the font color an object|
|**jcss_font**|Edit the font size, font family, font weight and font style|
|**jcss_size**|Edit the height and width of an object|
|**jcss_position**|Edit the css position value of an object|
|**jcss_border**|Edit the border color, border style, border width and border radius of an object|
|**jcss_boxshadow**|Edit the box shadow of an object|
|**jcss_read**|Read a css value of an object|
### How can I use a theme
To apply one of the themes from jCSS to your website, you need to copy the file to your code folder.
Now you can need to link to it using the ``-tag.
Here are the themes you can use:
|Name|Description|File Name|
|-|-|-|
|**Clean**|A very basic sans-serif black-and-white theme with rounded buttons and inputs|``clean.css``|
|**Sharp**|A sans-serif black-and-white theme with sharp buttons and inputs|``sharp.css``|
|**Thin**|A sans-serif theme with sharp buttons & inputs and thin black lines|``thin.css``|
|**Night Blue**|A dark sans-serif blue sharp theme|``nightblue.css``|
In case you want to use the theme_switching function to, so you can change the theme from your JavaScript code, you need to add `id=css-theme` to your link tag.
And these are the functions for theme switching
Now you can use the functions
```
jcss_set_theme_to_x(x)
```
To open another style sheet
and
```
jcss_set_theme_to_normal()
```
to return to the previous theme