Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 170 lines (127 sloc) 5.229 kb
292b400 @ndp more formatting README
authored
1 # Csster
f531da7 @ndp update readme with the intent
authored
2
f99a96e @ndp work on readme
authored
3 Concisely generate CSS style rules within Javascript.
06de1e3 @ndp rename README and try to format
authored
4
292b400 @ndp more formatting README
authored
5 ## Usage
06de1e3 @ndp rename README and try to format
authored
6
e1387e2 @ndp more formatting README
authored
7 <pre>
8 require('csster.js'); // however you manage dependencies
9
67b54b4 @ndp figure out how to insert styles into the document
authored
10 Csster.style({
e1387e2 @ndp more formatting README
authored
11 h1: {
12 fontSize: 18,
13 color: 'red'
14 }
15 });
16
17 ...
18 </pre>
19
b6d72d8 @ndp update readme
authored
20 Result, inserted in DOM automatically at the bottom of the &lt;head&gt; element:
21 <pre>
22 ...
e4cf475 @ndp update readme
authored
23 &lt;style type="text/stylesheet"&gt;
b6d72d8 @ndp update readme
authored
24 h1 {
25 font-size: 18px;
26 color: red;
27 }
e4cf475 @ndp update readme
authored
28 &lt;/style&gt;
29 &lt;/head&gt;
b6d72d8 @ndp update readme
authored
30 ...
31 </pre>
32
292b400 @ndp more formatting README
authored
33 ### Format of CSS Rules
5b6d112 @ndp more formatting README
authored
34
67b54b4 @ndp figure out how to insert styles into the document
authored
35 The *style* method accepts CSS rules passed either as arrays or hashes, arrays just being
de5d869 @ndp add some example documentation
authored
36 a way to order the hashes. For example:
37
38 <pre>
39 {
40 ul: {
cb8d55f @ndp update readme
authored
41 margin: 5,
42 padding: 0,
de5d869 @ndp add some example documentation
authored
43 }
5b6d112 @ndp more formatting README
authored
44 'ul li:first': {
cb8d55f @ndp update readme
authored
45 paddingLeft: 20px
de5d869 @ndp add some example documentation
authored
46 }
47 }
94279b6 @ndp add some example documentation
authored
48 </pre>
de5d869 @ndp add some example documentation
authored
49
50 Note that
588af51 @ndp more formatting README
authored
51
292b400 @ndp more formatting README
authored
52 * property names are automatically converted to the correct format from camelcase. Feel free to quote them as well.
f99a96e @ndp work on readme
authored
53 * all raw numbers are assumed to be "pixels" (or "px"), and rendered as such.
292b400 @ndp more formatting README
authored
54 * any sort of selectors are allowed... they are just passed through to the stylesheet.
55
56 #### Nesting
7726ab5 @ndp more formatting README
authored
57 Csster supports nesting of rules to keep things more concise:
de5d869 @ndp add some example documentation
authored
58 <pre>
59 {
60 ul: {
cb8d55f @ndp update readme
authored
61 margin: 5,
de5d869 @ndp add some example documentation
authored
62 li: {
80353b1 @ndp rename macro to has
authored
63 paddingLeft: 20,
64 '&:hover': {
65 color: 'red'
66 }
de5d869 @ndp add some example documentation
authored
67 }
68 }
69 }
94279b6 @ndp add some example documentation
authored
70 </pre>
de5d869 @ndp add some example documentation
authored
71
72 The "li" property in this case might be a selector or might be a property name. A list of valid
73 property names is used to identify properties right now, and otherwise it's considered a sub-selector.
74
80353b1 @ndp rename macro to has
authored
75 Csster supports SASS's "&" operator, to indicate that the selector should be combined with the parent selector.
76 Instead of the default "any descendent" space character being inserted, no space is inserted.
77
1703d0a @ndp update readme
authored
78 #### Functions
b50ec79 @ndp improve docs on functions
authored
79 Most manipulations will fall into Javascript's language support, as far as any math or looping. Use Javascript to write necessary functions.
80353b1 @ndp rename macro to has
authored
80
b50ec79 @ndp improve docs on functions
authored
81 function/color.js contains SASS-like color functions:
8f276b6 @ndp update readme
authored
82
b50ec79 @ndp improve docs on functions
authored
83 * <code>"#ab342c".darken(%)</code> -- make color darker by given percent
84 * <code>"#ab342c".lighten(%)</code> -- make color lighter by given percent
85 * <code>"#ab342c".saturate(%)</code> -- make color more saturated by given percent. To *desaturate*, use negative values for the percent. Note that <code>"#ab342c".saturate(-100)</code> renders in grayscale.
86
87 There are also color conversion routines if you want to build your own manipulation.
88
89 * <code>"#ab342c".toRGB()</code>
90 * <code>"#ab342c".toHSL()</code>
91 * <code>Csster.hslToHexColor(h,s,l)</code>
92
93 Opacity is currently not supported by the color model.
1703d0a @ndp update readme
authored
94
80353b1 @ndp rename macro to has
authored
95 #### Macros using "has" key
de5d869 @ndp add some example documentation
authored
96
717a1e3 @ndp work on readme
authored
97 There are a host of pre-made macros that may be useful:
98
99 * <code>roundedCorners(radius)</code> -- add rounded corners on all sides
100 * <code>roundedCorners(side, radius)</code> -- add rounded corners on specified side: <code>'top'</code>, <code>'left'</code>, <code>'bottom'</code> or <code>'right'</code>
101 * <code>roundedCorners(corner, radius)</code> -- add rounded corners to a specified corner: <code>'tl'</code>, <code>'tr'</code>, <code>'bl'</code> or <code>'br'</code>
102 * <code>phark(width, height, img, imgXPosition=0, imgYPosition=0)</code> -- standard phark image replacement with optional background image offset.
103 * <code>boxShadow([xoffset, yoffset], radius, color)</code>
104 * <code>verticalCentering(height)</code> and <code>horizontalCentering(width)</code> -- center using the top 50% / margin-top -width/2 technique. See http://stackoverflow.com/questions/148251/css-centering-tricks
f99a96e @ndp work on readme
authored
105 * <code>clearfix()</code> -- standard clearfix
de5d869 @ndp add some example documentation
authored
106
80353b1 @ndp rename macro to has
authored
107 To "mix these in", use the "has" key:
de5d869 @ndp add some example documentation
authored
108
109 <pre>
110 {
111 'div#featured_box': {
cb8d55f @ndp update readme
authored
112 backgroundColor: '#394c89',
113 has: roundedCorner(5)
de5d869 @ndp add some example documentation
authored
114 }
115 }
5b6d112 @ndp more formatting README
authored
116 </pre>
117
80353b1 @ndp rename macro to has
authored
118 Multiple mix-ins can be included by making that a list, eg. <code>has: [roundedCorners(5), dropShadow()]</code>.
119
717a1e3 @ndp work on readme
authored
120 It's all Javascript, so macros and more complex functions are easy to write. To mix in a set of values, create a function
121 that returns a hash of values, for example:
122
123 <pre>
124 function roundedCorners(radius) {
125 return {
126 '-webkit-border-radius': radius,
127 '-moz-border-radius': radius,
128 'border-radius': radius
129 }
130 }
131 </pre>
132
80353b1 @ndp rename macro to has
authored
133
134
de5d869 @ndp add some example documentation
authored
135
292b400 @ndp more formatting README
authored
136 ## Todo
de5d869 @ndp add some example documentation
authored
137
c56959d @ndp add centering and clearfix
authored
138 * decompile existing stylesheets
139 * support comma in rules
140 * different way to concatenate selectors
141 * jQuery rules
142 * naming stylesheets so they can be updated.
ee77c60 @ndp start to add color functions
authored
143 * Fix license
5b6d112 @ndp more formatting README
authored
144 * Better name
06de1e3 @ndp rename README and try to format
authored
145
146
ee77c60 @ndp start to add color functions
authored
147
292b400 @ndp more formatting README
authored
148 ## Motivation
f531da7 @ndp update readme with the intent
authored
149
150 This project comes from my frustration of trying to build standalone Javascript widgets. Web
151 projects always involve the combination of HTML DOM, CSS and Javascript. It's often simpler to
152 generate the necessary DOM within your Javascript, removing any coupling (and a simpler calling
153 convention) to a specific web page. But most widgets have certain style rules. To avoid
154 any coupling with the CSS at all, styles can be included inline, but these gets bulky
155 and hard to read. The "rule" nature of CSS is nice. So widgets then have a Javascript
156 and CSS component. Wouldn't it be nice, though, to remove that CSS component.
157
158 With the advent of SASS, the coupling is even more complicated, as now there's some other
159 tool completely unrelated to your component, written in some other language. Wouldn't
160 a unified approach be nice?
161
162
292b400 @ndp more formatting README
authored
163 ## Similar projects
de5d869 @ndp add some example documentation
authored
164
06de1e3 @ndp rename README and try to format
authored
165 http://revnode.com/oss/css/
166
292b400 @ndp more formatting README
authored
167 ## Legal
de5d869 @ndp add some example documentation
authored
168
06de1e3 @ndp rename README and try to format
authored
169 Copyright (c) 2010 Andrew J. Peterson
170 All Rights Reserved.
Something went wrong with that request. Please try again.