-
Notifications
You must be signed in to change notification settings - Fork 54
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for retrieving all styles added via JSS, fix issues in Fi…
…refox and update README
- Loading branch information
Showing
5 changed files
with
155 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,61 @@ | ||
# JSS | ||
|
||
A simple JavaScript library for getting/setting CSS stylesheet rules. | ||
A simple JavaScript library for retrieving and setting CSS stylesheet rules. | ||
|
||
* Tiny - ~250 lines of code. | ||
* No dependencies. | ||
* MIT Licensed. | ||
* Tiny - ~200 lines of code | ||
* No dependencies | ||
* MIT Licensed | ||
|
||
Why generate CSS with JavaScript? | ||
|
||
* To set styles that need to be calculated or retrieved | ||
* To set behavioural styles for your widget or plugin so that consumers aren't forced to include a stylesheet for core functionality | ||
* To dynamically apply styles without cluttering your HTML (as is the case with inline styles) | ||
* To set styles on all current and future elements | ||
|
||
## Usage | ||
|
||
Download and include `jss.js` in your HTML: | ||
|
||
<script type="text/javascript" src="jss.js"></script> | ||
|
||
Add new rule (or extend existing rule): | ||
**jss.set(selector, properties)** to add a new rule or extend an existing rule: | ||
|
||
jss.set('.special', { | ||
color: 'red', | ||
fontSize: '2em', | ||
padding: '10px' | ||
jss.set('.demo', { | ||
'font-size': '15px', | ||
'color': 'red' | ||
}); | ||
|
||
Retrieve existing rule: | ||
|
||
jss.get('.special'); | ||
**jss.get([selector])** to retrieve rules added via JSS: | ||
|
||
// Returns: | ||
jss.get('.demo'); | ||
// returns the following: | ||
{ | ||
'color': 'red', | ||
'font-size': '2em', | ||
'padding-bottom': '10px', | ||
'padding-left': '10px', | ||
'padding-right': '10px', | ||
'padding-top': '10px' | ||
'font-size': '15px', | ||
'color': 'red' | ||
} | ||
|
||
jss.get(); | ||
// returns the following: | ||
{ | ||
'.demo': { | ||
'font-size': '15px', | ||
'color': 'red' | ||
} | ||
} | ||
|
||
|
||
Remove existing rule: | ||
**jss.getAll(selector)** to retrieve all rules that are specified using the selector (not necessarily added via JSS): | ||
|
||
jss.remove('.special'); | ||
jss.getAll('.demo'); | ||
// returns the following: | ||
{ | ||
'font-size': '15px', | ||
'color': 'red', | ||
'font-weight': 'bold' | ||
} | ||
|
||
## Why generate CSS with JS? | ||
**jss.remove([selector])** to remove rules added via JSS: | ||
|
||
* To set styles that must be calculated or retrieved - for example, setting the user's preferred font-size or color from a cookie. | ||
* To set behavioural, rather than aesthetic, styles (especially for UI widget/plugin developers). Tabs, carousels, tooltips, etc. often require some basic CSS simply to function. Users of the code should not be *forced* to include a stylesheet for core functionality. Eye-candy CSS, of course, should still be added through regular stylesheets. | ||
* It's better than inline styles since CSS rules apply to all current and future elements, and don't clutter the HTML when viewing in Firebug / Developer Tools. | ||
jss.remove('.demo'); // removes all JSS styles matching the selector | ||
jss.remove(); // removes all JSS styles |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<style> | ||
body { | ||
font: 16px sans-serif; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,22 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<link rel="stylesheet" href="qunit.css" type="text/css"/> | ||
<script src="qunit.js"></script> | ||
<script src="../jss.js"></script> | ||
<script src="test-jss.js"></script> | ||
<style> | ||
#qunit-fixture { | ||
display: none; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<h1 id="qunit-header">Test JSS</h1> | ||
<h2 id="qunit-banner"></h2> | ||
<h2 id="qunit-userAgent"></h2> | ||
<ol id="qunit-tests"></ol> | ||
<div id="qunit-fixture"></div> | ||
</body> | ||
<meta charset="UTF-8"> | ||
<link rel="stylesheet" href="qunit.css" type="text/css"/> | ||
<script src="qunit.js"></script> | ||
<script src="../jss.js"></script> | ||
<script src="test-jss.js"></script> | ||
<style> | ||
#jss-test { | ||
display: none; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<h1 id="qunit-header">Test JSS</h1> | ||
<h2 id="qunit-banner"></h2> | ||
<h2 id="qunit-userAgent"></h2> | ||
<ol id="qunit-tests"></ol> | ||
<div id="jss-test"></div> | ||
</body> | ||
</html> |