Permalink
Browse files

add jQuery plugin

  • Loading branch information...
ndp committed Dec 24, 2010
1 parent b7ca267 commit e764fbfdbc5f7df5967a1d21c500cccf4917fde3
Showing with 6,368 additions and 1 deletion.
  1. +33 −0 README.markdown
  2. +1 −1 csster.js
  3. +6,240 −0 lib/jquery-1.4.2.js
  4. +30 −0 spec/core_spec.js
  5. +2 −0 spec_runner.html
  6. +52 −0 src/ie/rounded_corners.js
  7. +10 −0 src/jquery.js
View
@@ -148,6 +148,22 @@ that returns a hash of values, for example:
A macro's properties will be overwritten by properties within including selector (or later included macros), similar to how the cascade takes the last defined value.
+## jQuery Integration
+
+If jQuery is loaded first, Csster provides a "csster" method:
+
+<pre>
+ $('.sidebar').csster({ border: '5px solid green', padding: 10 });
+</pre>
+
+As expected, this adds a rule to the document with the ".sidebar" selector.
+In general, this can be called identically to the <code>css()</code> function.
+This is useful is the DOM on the page is dynamic and when a rule is more efficient than applying
+a style repeatedly to all the DOM nodes.
+
+There are a few limitations: Currently a "context" is not supported.
+And be careful, since not all jQuery selectors are valid CSS selectors--
+nothing is done to convert or report unsupported selectors (just like regular CSS).
## Extending Csster
@@ -164,6 +180,23 @@ Functions called after rules are processed stored in <code>Csster.rulesPostProce
A convenient built-in function is <code>compressSelectors</code>. Using this processor, rules with multiple '#'s are simplified. For example, '#a #b #c' becomes '#c'. Usually this is what you will want, so include it with <code>Csster.rulePostProcessors.push(Csster.compressSelectors);</code>.
+This is used to write custom browser overrides. For example, this one makes opacity work for IE:
+
+<pre>
+ Csster.rulesPostProcessors.push(function ieOpacity(rules) {
+ // http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
+ if (Csster.browser.msie) {
+ for (var i = 0; i < rules.length; i++) {
+ var rule = rules[i];
+ var value = rule.props['opacity']
+ if (value) {
+ value = Math.round(value * 100.0);
+ rules[i].props['filter'] = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + value + ')';
+ }
+ }
+ }
+ });
+</pre>
### Inserting into the DOM
Function that outputs a set of rules into the DOM is <code>Csster.insertStylesheet</code> and can be replaced if desired.
View
@@ -4,7 +4,7 @@
//
// See http://github.com/ndp/csster
//
-// Generated Sun Nov 14 15:28:45 PST 2010
+// Generated Thu Dec 23 21:27:14 PST 2010
//
//
if (!Csster) {
Oops, something went wrong.

0 comments on commit e764fbf

Please sign in to comment.