Skip to content
This repository
Newer
Older
100644 221 lines (152 sloc) 7.87 kb
292b4000 »
2010-09-11 more formatting README
1 # Csster
f531da7b »
2010-09-10 update readme with the intent
2
bdbc77c0 »
2010-09-24 add demos to the web
3 Concisely generate CSS style rules within Javascript. Features:
4
27ae3c68 »
2010-09-24 add demos to the web
5 * standard "object literal"/JSON format with good editor support
bdbc77c0 »
2010-09-24 add demos to the web
6 * nesting to DRY up stylesheets
27ae3c68 »
2010-09-24 add demos to the web
7 * color functions like <code>darken</code> and <code>saturate</code>
8 * built-in macros for common CSS idioms like *clearfix*, *rounded corners*, *drop shadows*.
4c0cb017 »
2010-10-30 add comment about extensibility
9 * extension points for custom behavior or cross-browser support.
27ae3c68 »
2010-09-24 add demos to the web
10 * and all the plain old Javascript behavior: functions, data structures, looping, Math operations, etc.
0bdd67f0 »
2010-09-24 add demos to the web
11
12
292b4000 »
2010-09-11 more formatting README
13 ## Usage
06de1e37 »
2010-09-11 rename README and try to format
14
de891fa7 »
2010-09-24 add demos to the web
15 All code is packaged into a single Javascript file download, [csster.js](http://ndpsoftware.com/csster/csster.js). There are no external dependencies. The project itself is hosted on [GitHub](http://github.com/ndp/csster).
bdbc77c0 »
2010-09-24 add demos to the web
16
e1387e28 »
2010-09-11 more formatting README
17 <pre>
18 require('csster.js'); // however you manage dependencies
19
67b54b4c »
2010-09-11 figure out how to insert styles into the document
20 Csster.style({
e1387e28 »
2010-09-11 more formatting README
21 h1: {
22 fontSize: 18,
23 color: 'red'
24 }
25 });
26
27 ...
28 </pre>
29
b6d72d81 »
2010-09-13 update readme
30 Result, inserted in DOM automatically at the bottom of the &lt;head&gt; element:
31 <pre>
32 ...
e4cf4758 »
2010-09-13 update readme
33 &lt;style type="text/stylesheet"&gt;
b6d72d81 »
2010-09-13 update readme
34 h1 {
35 font-size: 18px;
36 color: red;
37 }
e4cf4758 »
2010-09-13 update readme
38 &lt;/style&gt;
39 &lt;/head&gt;
b6d72d81 »
2010-09-13 update readme
40 ...
41 </pre>
42
292b4000 »
2010-09-11 more formatting README
43 ### Format of CSS Rules
5b6d1124 »
2010-09-11 more formatting README
44
67b54b4c »
2010-09-11 figure out how to insert styles into the document
45 The *style* method accepts CSS rules passed either as arrays or hashes, arrays just being
de5d8699 »
2010-09-11 add some example documentation
46 a way to order the hashes. For example:
47
48 <pre>
49 {
50 ul: {
cb8d55f2 »
2010-09-18 update readme
51 margin: 5,
52 padding: 0,
de5d8699 »
2010-09-11 add some example documentation
53 }
5b6d1124 »
2010-09-11 more formatting README
54 'ul li:first': {
cb8d55f2 »
2010-09-18 update readme
55 paddingLeft: 20px
de5d8699 »
2010-09-11 add some example documentation
56 }
57 }
94279b68 »
2010-09-11 add some example documentation
58 </pre>
de5d8699 »
2010-09-11 add some example documentation
59
60 Note that
588af516 »
2010-09-11 more formatting README
61
da7d664e »
2010-09-27 update docs, move samples up,
62 * 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.)
f99a96e4 »
2010-09-24 work on readme
63 * all raw numbers are assumed to be "pixels" (or "px"), and rendered as such.
292b4000 »
2010-09-11 more formatting README
64 * any sort of selectors are allowed... they are just passed through to the stylesheet.
65
66 #### Nesting
7726ab58 »
2010-09-11 more formatting README
67 Csster supports nesting of rules to keep things more concise:
de5d8699 »
2010-09-11 add some example documentation
68 <pre>
69 {
70 ul: {
cb8d55f2 »
2010-09-18 update readme
71 margin: 5,
de5d8699 »
2010-09-11 add some example documentation
72 li: {
80353b1a »
2010-09-18 rename macro to has
73 paddingLeft: 20,
74 '&:hover': {
75 color: 'red'
76 }
de5d8699 »
2010-09-11 add some example documentation
77 }
78 }
79 }
94279b68 »
2010-09-11 add some example documentation
80 </pre>
de5d8699 »
2010-09-11 add some example documentation
81
82 The "li" property in this case might be a selector or might be a property name. A list of valid
83 property names is used to identify properties right now, and otherwise it's considered a sub-selector.
84
80353b1a »
2010-09-18 rename macro to has
85 Csster supports SASS's "&" operator, to indicate that the selector should be combined with the parent selector.
86 Instead of the default "any descendent" space character being inserted, no space is inserted.
87
da7d664e »
2010-09-27 update docs, move samples up,
88 Combined rules (with commas) are expanded as expected, so nested rules with commas have their parents expanded.
89
90
91
92
1703d0ac »
2010-09-13 update readme
93 #### Functions
b50ec798 »
2010-09-19 improve docs on functions
94 Most manipulations will fall into Javascript's language support, as far as any math or looping. Use Javascript to write necessary functions.
80353b1a »
2010-09-18 rename macro to has
95
b50ec798 »
2010-09-19 improve docs on functions
96 function/color.js contains SASS-like color functions:
8f276b66 »
2010-09-18 update readme
97
b50ec798 »
2010-09-19 improve docs on functions
98 * <code>"#ab342c".darken(%)</code> -- make color darker by given percent
99 * <code>"#ab342c".lighten(%)</code> -- make color lighter by given percent
100 * <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.
101
102 There are also color conversion routines if you want to build your own manipulation.
103
104 * <code>"#ab342c".toRGB()</code>
105 * <code>"#ab342c".toHSL()</code>
106 * <code>Csster.hslToHexColor(h,s,l)</code>
107
108 Opacity is currently not supported by the color model.
1703d0ac »
2010-09-13 update readme
109
80353b1a »
2010-09-18 rename macro to has
110 #### Macros using "has" key
de5d8699 »
2010-09-11 add some example documentation
111
717a1e37 »
2010-09-24 work on readme
112 There are a host of pre-made macros that may be useful:
113
114 * <code>roundedCorners(radius)</code> -- add rounded corners on all sides
115 * <code>roundedCorners(side, radius)</code> -- add rounded corners on specified side: <code>'top'</code>, <code>'left'</code>, <code>'bottom'</code> or <code>'right'</code>
116 * <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>
117 * <code>phark(width, height, img, imgXPosition=0, imgYPosition=0)</code> -- standard phark image replacement with optional background image offset.
118 * <code>boxShadow([xoffset, yoffset], radius, color)</code>
119 * <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
f99a96e4 »
2010-09-24 work on readme
120 * <code>clearfix()</code> -- standard clearfix
de5d8699 »
2010-09-11 add some example documentation
121
80353b1a »
2010-09-18 rename macro to has
122 To "mix these in", use the "has" key:
de5d8699 »
2010-09-11 add some example documentation
123
124 <pre>
125 {
126 'div#featured_box': {
cb8d55f2 »
2010-09-18 update readme
127 backgroundColor: '#394c89',
128 has: roundedCorner(5)
de5d8699 »
2010-09-11 add some example documentation
129 }
130 }
5b6d1124 »
2010-09-11 more formatting README
131 </pre>
132
27ae3c68 »
2010-09-24 add demos to the web
133 Multiple macros can be included by making that a list, eg. <code>has: [roundedCorners(5), dropShadow()]</code>.
80353b1a »
2010-09-18 rename macro to has
134
717a1e37 »
2010-09-24 work on readme
135 It's all Javascript, so macros and more complex functions are easy to write. To mix in a set of values, create a function
136 that returns a hash of values, for example:
137
138 <pre>
139 function roundedCorners(radius) {
140 return {
141 '-webkit-border-radius': radius,
142 '-moz-border-radius': radius,
143 'border-radius': radius
144 }
145 }
146 </pre>
147
27ae3c68 »
2010-09-24 add demos to the web
148 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.
149
150
d8837737 »
2010-10-10 Add note about extending and contributing.
151
152 ## Extending Csster
153
154 Csster is built as an extensible system.
155
7bb35d1b »
2010-10-10 formatting
156 ### Adding Custom Property Names
34efeab7 »
2010-10-10 clarify docs
157 Use <code>Csster.addPropertyNames</code> to add any non-standard property names you'd like to be considered valid. The build-in tool rejects non-standard property names, although by default popular "-moz" and "-webkit" properties are added.
d8837737 »
2010-10-10 Add note about extending and contributing.
158
34efeab7 »
2010-10-10 clarify docs
159 ### Pre-process rules
160 Functions called before properties are processed stored in <code>Csster.propertyPreprocessors</code>. Callback is provided a hash of properties to values, which it modifies in any way it wants. This is used to interpret macros.
effb732f »
2010-10-10 Document extensibility.
161
7bb35d1b »
2010-10-10 formatting
162 ### Post-processing
34efeab7 »
2010-10-10 clarify docs
163 Functions called after rules are processed stored in <code>Csster.rulesPostProcessors</code>. Called with an array of processed rules. Can be used to eliminate duplicates, modify selectors, etc. Standard list simplifies overly complex selectors with multiple IDs.
effb732f »
2010-10-10 Document extensibility.
164
89e7fb7d »
2010-10-18 Pull out optional functionality.
165 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>.
166
167
7bb35d1b »
2010-10-10 formatting
168 ### Inserting into the DOM
34efeab7 »
2010-10-10 clarify docs
169 Function that outputs a set of rules into the DOM is <code>Csster.insertStylesheet</code> and can be replaced if desired.
d8837737 »
2010-10-10 Add note about extending and contributing.
170
171 ## Contributing
172
46bdfe6d »
2010-10-10 more spelling corrections.
173 Fork on Github and send back a merge request.
d8837737 »
2010-10-10 Add note about extending and contributing.
174
175
69363d2d »
2010-09-27 update links
176 ## Links
177
178 * [Demo of the color functions and macros](http://ndpsoftware.com/csster/demo.html)
179 * [Demo of using to build a chart](http://ndpsoftware.com/csster/demo_chart.html)
180 * [Blog post](http://ndpsoft.blogspot.com/2010/09/introducing-csster.html)
181
182
183
632baa2a »
2010-09-24 add demos to the web
184
b5f9f8bb »
2010-09-24 add demos to the web
185 ## TDD
632baa2a »
2010-09-24 add demos to the web
186
27ae3c68 »
2010-09-24 add demos to the web
187 The design was driven by [the specs](http://ndpsoftware.com/csster/spec_runner.html).
80353b1a »
2010-09-18 rename macro to has
188
de5d8699 »
2010-09-11 add some example documentation
189
292b4000 »
2010-09-11 more formatting README
190 ## Todo
de5d8699 »
2010-09-11 add some example documentation
191
c56959da »
2010-09-24 add centering and clearfix
192 * decompile existing stylesheets
193 * jQuery rules
ee77c602 »
2010-09-13 start to add color functions
194 * Fix license
5b6d1124 »
2010-09-11 more formatting README
195 * Better name
06de1e37 »
2010-09-11 rename README and try to format
196
197
ee77c602 »
2010-09-13 start to add color functions
198
292b4000 »
2010-09-11 more formatting README
199 ## Motivation
f531da7b »
2010-09-10 update readme with the intent
200
201 This project comes from my frustration of trying to build standalone Javascript widgets. Web
202 projects always involve the combination of HTML DOM, CSS and Javascript. It's often simpler to
203 generate the necessary DOM within your Javascript, removing any coupling (and a simpler calling
204 convention) to a specific web page. But most widgets have certain style rules. To avoid
205 any coupling with the CSS at all, styles can be included inline, but these gets bulky
206 and hard to read. The "rule" nature of CSS is nice. So widgets then have a Javascript
207 and CSS component. Wouldn't it be nice, though, to remove that CSS component.
208
209 With the advent of SASS, the coupling is even more complicated, as now there's some other
210 tool completely unrelated to your component, written in some other language. Wouldn't
211 a unified approach be nice?
212
213
292b4000 »
2010-09-11 more formatting README
214 ## Similar projects
de5d8699 »
2010-09-11 add some example documentation
215
06de1e37 »
2010-09-11 rename README and try to format
216 http://revnode.com/oss/css/
217
292b4000 »
2010-09-11 more formatting README
218 ## Legal
de5d8699 »
2010-09-11 add some example documentation
219
06de1e37 »
2010-09-11 rename README and try to format
220 Copyright (c) 2010 Andrew J. Peterson
221 All Rights Reserved.
Something went wrong with that request. Please try again.