https://github.com/maheshwaghmare/jstyler
jQuery CSS style generator
https://github.com/maheshwaghmare/jstyler
Last synced: 28 days ago
JSON representation
jQuery CSS style generator
- Host: GitHub
- URL: https://github.com/maheshwaghmare/jstyler
- Owner: maheshwaghmare
- Created: 2015-11-28T12:53:30.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-11-30T18:34:09.000Z (over 9 years ago)
- Last Synced: 2025-01-31T06:06:46.020Z (3 months ago)
- Language: JavaScript
- Size: 2.93 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jStyler
jQuery is used for CSS generator. It's used for applications which are related with UI / UX. To apply CSS for user selected values to the targeted element.
## Is this Usefull?
This is usefull in case:
-- If you get `background-color`, `color`, `font-size`, `line-height` etc from user and apply this in your output generate file. Then, This code is the prototyp for FrontEnd & BackEnd.
- Extend the flexibility of existing code.
## How to use?
Add the data data attribute `data-jstyler` to the targeted element.
###### Objectives:
- It apply either `self` (default) or `targeted css selector`
- Use generated CSS for `normal` (default) or `hover` view.
*Eg.*
#### A) BASIC:
This apply `normal` CSS to `self`
<div data-jstyler='{"background-color":"red","color":"orange"}'> jStyler </div>
Same with `ShortHand`
<div data-jstyler='{"bg":"red","c":"orange"}'> jStyler </div>
##### A.1) `JSON` Object for `normal`
This apply CSS with `JSON` object `normal` to `self`
<div data-jstyler='{normal:{bg:"green",c:"red",}'> jStyler </div>
##### A.2) `JSON` Object for `normal` & `hover`
This apply CSS with `JSON` object `normal` & `hover` to `self`
<div data-jstyler='{normal:{bg:"green",c:"red",},hover:{bg:"red",c:"green",}'> jStyler </div>
#### B) CSS SELECTOR:
This apply CSS to `self` for CSS selector `.abc`
<div data-jstyler='{"background-color":"red","color":"orange"}' data-jstyler-selector=".abc"> jStyler </div>