Browse files

update docs, move samples up,

  • Loading branch information...
1 parent 0a84929 commit da7d664eb8874e1a6085ef20d38c345580ae4eba @ndp committed Sep 28, 2010
Showing with 13 additions and 4 deletions.
  1. +8 −1 README.markdown
  2. +4 −2 demo.html
  3. +1 −1 src/sample.html → demo_chart.html
@@ -58,7 +58,7 @@ a way to order the hashes. For example:
Note that
-* property names are automatically converted to the correct format from camelcase. Feel free to quote them as well.
+* property names are automatically converted to hyphenated format from camelcase, so in many cases you can omit the quotation marks. ('float' needs to quoted since it's a reserved word.)
* all raw numbers are assumed to be "pixels" (or "px"), and rendered as such.
* any sort of selectors are allowed... they are just passed through to the stylesheet.
@@ -84,6 +84,12 @@ property names is used to identify properties right now, and otherwise it's cons
Csster supports SASS's "&" operator, to indicate that the selector should be combined with the parent selector.
Instead of the default "any descendent" space character being inserted, no space is inserted.
+Combined rules (with commas) are expanded as expected, so nested rules with commas have their parents expanded.
+By default, rules with multiple '#'s are simplified. For example, '#a #b #c' becomes '#c'. Usually this is what you will want, but if you need the specificity you can turn this off with <code>Csster.shortCircuitIds = false</code>
#### Functions
Most manipulations will fall into Javascript's language support, as far as any math or looping. Use Javascript to write necessary functions.
@@ -140,6 +146,7 @@ that returns a hash of values, for example:
[Demo of the color functions and macros](
+[Demo of using to build a chart](
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.
@@ -88,7 +88,7 @@{
'.box': {
- backgroundColor: 'blue',
+ backgroundColor: '#6c9',
width: 300,
height: 60,
margin: 20,
@@ -97,7 +97,9 @@
textAlign: 'center',
color: 'yellow',
fontWeight: 'bold',
- position: 'relative'
+ position: 'relative',
+ fontFamily: 'verdana',
+ fontSize: 12
'.smaller_box': {
backgroundColor: 'green',
@@ -2,7 +2,7 @@
<title>Example Graph</title>
- <script src="../csster.js"></script>
+ <script src="csster.js"></script>
<script src=""></script>
<script type="text/javascript">

0 comments on commit da7d664

Please sign in to comment.