Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 106 lines (80 sloc) 2.66 kb
292b400 @ndp more formatting README
authored
1 # Csster
f531da7 @ndp update readme with the intent
authored
2
06de1e3 @ndp rename README and try to format
authored
3 Small libary to generate CSS style rules within Javascript.
4
292b400 @ndp more formatting README
authored
5 ## Usage
06de1e3 @ndp rename README and try to format
authored
6
292b400 @ndp more formatting README
authored
7 ### Creating CSS Rules
5b6d112 @ndp more formatting README
authored
8
9 (to be written)
10
292b400 @ndp more formatting README
authored
11 ### Format of CSS Rules
5b6d112 @ndp more formatting README
authored
12
de5d869 @ndp add some example documentation
authored
13 CSS rules are passed either as arrays or hashes, arrays just being
14 a way to order the hashes. For example:
15
16 <pre>
17 {
18 ul: {
19 margin: 5;
20 padding: 0;
21 }
5b6d112 @ndp more formatting README
authored
22 'ul li:first': {
de5d869 @ndp add some example documentation
authored
23 paddingLeft: 20px;
24 }
25 }
94279b6 @ndp add some example documentation
authored
26 </pre>
de5d869 @ndp add some example documentation
authored
27
28 Note that
292b400 @ndp more formatting README
authored
29 * property names are automatically converted to the correct format from camelcase. Feel free to quote them as well.
30 * raw numbers are assumed to be "pixels" (or "px"), and rendered as such.
31 * any sort of selectors are allowed... they are just passed through to the stylesheet.
32
33 #### Nesting
7726ab5 @ndp more formatting README
authored
34 Csster supports nesting of rules to keep things more concise:
de5d869 @ndp add some example documentation
authored
35 <pre>
36 {
37 ul: {
38 margin: 5;
39 li: {
40 paddingLeft: 20;
41 }
42 }
43 }
94279b6 @ndp add some example documentation
authored
44 </pre>
de5d869 @ndp add some example documentation
authored
45
46 The "li" property in this case might be a selector or might be a property name. A list of valid
47 property names is used to identify properties right now, and otherwise it's considered a sub-selector.
48 (Think about this.)
49
292b400 @ndp more formatting README
authored
50 #### Macros
7726ab5 @ndp more formatting README
authored
51 It's all Javascript, so macros and more complex functions are easy to write. Just create a function
5b6d112 @ndp more formatting README
authored
52 that returns a hash of values, for example:
de5d869 @ndp add some example documentation
authored
53
54 <pre>
55 function roundedCorners(radius) {
56 return {
57 '-webkit-border-radius': radius,
58 '-moz-border-radius': radius,
59 'border-radius': radius
60 }
61 }
62 </pre>
63
64 To "mix these in", use the "macro" key:
65
66 <pre>
67 {
68 'div#featured_box': {
69 backgroundColor: '#394c89';
70 macro: roundedCorner(5);
71 }
72 }
5b6d112 @ndp more formatting README
authored
73 </pre>
74
de5d869 @ndp add some example documentation
authored
75
292b400 @ndp more formatting README
authored
76 ## Todo
de5d869 @ndp add some example documentation
authored
77
5b6d112 @ndp more formatting README
authored
78 * Figure out output/page integration strategy
79 * Support more than one Macro
80 * Some color math
81 * Better name
06de1e3 @ndp rename README and try to format
authored
82
83
292b400 @ndp more formatting README
authored
84 ## Motivation
f531da7 @ndp update readme with the intent
authored
85
86 This project comes from my frustration of trying to build standalone Javascript widgets. Web
87 projects always involve the combination of HTML DOM, CSS and Javascript. It's often simpler to
88 generate the necessary DOM within your Javascript, removing any coupling (and a simpler calling
89 convention) to a specific web page. But most widgets have certain style rules. To avoid
90 any coupling with the CSS at all, styles can be included inline, but these gets bulky
91 and hard to read. The "rule" nature of CSS is nice. So widgets then have a Javascript
92 and CSS component. Wouldn't it be nice, though, to remove that CSS component.
93
94 With the advent of SASS, the coupling is even more complicated, as now there's some other
95 tool completely unrelated to your component, written in some other language. Wouldn't
96 a unified approach be nice?
97
98
292b400 @ndp more formatting README
authored
99 ## Similar projects
de5d869 @ndp add some example documentation
authored
100
06de1e3 @ndp rename README and try to format
authored
101 http://revnode.com/oss/css/
102
292b400 @ndp more formatting README
authored
103 ## Legal
de5d869 @ndp add some example documentation
authored
104
06de1e3 @ndp rename README and try to format
authored
105 Copyright (c) 2010 Andrew J. Peterson
106 All Rights Reserved.
Something went wrong with that request. Please try again.