Skip to content
This repository
Newer
Older
100644 154 lines (117 sloc) 4.442 kb
292b4000 »
2010-09-11 more formatting README
1 # Csster
f531da7b »
2010-09-10 update readme with the intent
2
b6d72d81 »
2010-09-13 update readme
3 Generate CSS style rules within Javascript.
06de1e37 »
2010-09-11 rename README and try to format
4
292b4000 »
2010-09-11 more formatting README
5 ## Usage
06de1e37 »
2010-09-11 rename README and try to format
6
e1387e28 »
2010-09-11 more formatting README
7 <pre>
8 require('csster.js'); // however you manage dependencies
9
67b54b4c »
2010-09-11 figure out how to insert styles into the document
10 Csster.style({
e1387e28 »
2010-09-11 more formatting README
11 h1: {
12 fontSize: 18,
13 color: 'red'
14 }
15 });
16
17 ...
18 </pre>
19
b6d72d81 »
2010-09-13 update readme
20 Result, inserted in DOM automatically at the bottom of the &lt;head&gt; element:
21 <pre>
22 ...
e4cf4758 »
2010-09-13 update readme
23 &lt;style type="text/stylesheet"&gt;
b6d72d81 »
2010-09-13 update readme
24 h1 {
25 font-size: 18px;
26 color: red;
27 }
e4cf4758 »
2010-09-13 update readme
28 &lt;/style&gt;
29 &lt;/head&gt;
b6d72d81 »
2010-09-13 update readme
30 ...
31 </pre>
32
292b4000 »
2010-09-11 more formatting README
33 ### Format of CSS Rules
5b6d1124 »
2010-09-11 more formatting README
34
67b54b4c »
2010-09-11 figure out how to insert styles into the document
35 The *style* method accepts CSS rules passed either as arrays or hashes, arrays just being
de5d8699 »
2010-09-11 add some example documentation
36 a way to order the hashes. For example:
37
38 <pre>
39 {
40 ul: {
cb8d55f2 »
2010-09-18 update readme
41 margin: 5,
42 padding: 0,
de5d8699 »
2010-09-11 add some example documentation
43 }
5b6d1124 »
2010-09-11 more formatting README
44 'ul li:first': {
cb8d55f2 »
2010-09-18 update readme
45 paddingLeft: 20px
de5d8699 »
2010-09-11 add some example documentation
46 }
47 }
94279b68 »
2010-09-11 add some example documentation
48 </pre>
de5d8699 »
2010-09-11 add some example documentation
49
50 Note that
588af516 »
2010-09-11 more formatting README
51
292b4000 »
2010-09-11 more formatting README
52 * property names are automatically converted to the correct format from camelcase. Feel free to quote them as well.
53 * raw numbers are assumed to be "pixels" (or "px"), and rendered as such.
54 * any sort of selectors are allowed... they are just passed through to the stylesheet.
55
56 #### Nesting
7726ab58 »
2010-09-11 more formatting README
57 Csster supports nesting of rules to keep things more concise:
de5d8699 »
2010-09-11 add some example documentation
58 <pre>
59 {
60 ul: {
cb8d55f2 »
2010-09-18 update readme
61 margin: 5,
de5d8699 »
2010-09-11 add some example documentation
62 li: {
80353b1a »
2010-09-18 rename macro to has
63 paddingLeft: 20,
64 '&:hover': {
65 color: 'red'
66 }
de5d8699 »
2010-09-11 add some example documentation
67 }
68 }
69 }
94279b68 »
2010-09-11 add some example documentation
70 </pre>
de5d8699 »
2010-09-11 add some example documentation
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 (Think about this.)
75
80353b1a »
2010-09-18 rename macro to has
76 Csster supports SASS's "&" operator, to indicate that the selector should be combined with the parent selector.
77 Instead of the default "any descendent" space character being inserted, no space is inserted.
78
1703d0ac »
2010-09-13 update readme
79 #### Functions
80353b1a »
2010-09-18 rename macro to has
80 Use Javascript to write necessary functions.
81
82 function/color.js contains SASS-like functions:
8f276b66 »
2010-09-18 update readme
83
2488413f »
2010-09-18 update readme
84 * <code>darken(hex string, %)</code> -- make color darker by given percent
85 * <code>lighten(hex string, %)</code> -- make color lighter by given percent
cb8d55f2 »
2010-09-18 update readme
86 * <code>saturate(hex string, %)</code> -- make color more saturated by given percent. To *desaturate*, use negative values for the percent. Note that <code>saturate(c,-100)</code> renders in grayscale.
1703d0ac »
2010-09-13 update readme
87
80353b1a »
2010-09-18 rename macro to has
88 #### Macros using "has" key
1703d0ac »
2010-09-13 update readme
89 It's all Javascript, so macros and more complex functions are easy to write. To mix in a set of values, create a function
5b6d1124 »
2010-09-11 more formatting README
90 that returns a hash of values, for example:
de5d8699 »
2010-09-11 add some example documentation
91
92 <pre>
93 function roundedCorners(radius) {
94 return {
95 '-webkit-border-radius': radius,
96 '-moz-border-radius': radius,
97 'border-radius': radius
98 }
99 }
100 </pre>
101
80353b1a »
2010-09-18 rename macro to has
102 To "mix these in", use the "has" key:
de5d8699 »
2010-09-11 add some example documentation
103
104 <pre>
105 {
106 'div#featured_box': {
cb8d55f2 »
2010-09-18 update readme
107 backgroundColor: '#394c89',
108 has: roundedCorner(5)
de5d8699 »
2010-09-11 add some example documentation
109 }
110 }
5b6d1124 »
2010-09-11 more formatting README
111 </pre>
112
80353b1a »
2010-09-18 rename macro to has
113 Multiple mix-ins can be included by making that a list, eg. <code>has: [roundedCorners(5), dropShadow()]</code>.
114
2488413f »
2010-09-18 update readme
115 There are a host of pre-made macros that may be useful:
80353b1a »
2010-09-18 rename macro to has
116
2488413f »
2010-09-18 update readme
117 * <code>roundedCorners(radius)</code> -- add rounded corners on all sides
118 * <code>roundedCorners(side, radius)</code> -- add rounded corners on specified side: <code>'top'</code>, <code>'left'</code>, <code>'bottom'</code> or <code>'right'</code>
119 * <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>
120 * <code>phark(width, height, img, imgXPosition=0, imgYPosition=0)</code> -- standard phark image replacement with optional background image offset.
80353b1a »
2010-09-18 rename macro to has
121
de5d8699 »
2010-09-11 add some example documentation
122
292b4000 »
2010-09-11 more formatting README
123 ## Todo
de5d8699 »
2010-09-11 add some example documentation
124
5b6d1124 »
2010-09-11 more formatting README
125 * Support more than one Macro
126 * Some color math
ee77c602 »
2010-09-13 start to add color functions
127 * Fix license
5b6d1124 »
2010-09-11 more formatting README
128 * Better name
06de1e37 »
2010-09-11 rename README and try to format
129
130
ee77c602 »
2010-09-13 start to add color functions
131
292b4000 »
2010-09-11 more formatting README
132 ## Motivation
f531da7b »
2010-09-10 update readme with the intent
133
134 This project comes from my frustration of trying to build standalone Javascript widgets. Web
135 projects always involve the combination of HTML DOM, CSS and Javascript. It's often simpler to
136 generate the necessary DOM within your Javascript, removing any coupling (and a simpler calling
137 convention) to a specific web page. But most widgets have certain style rules. To avoid
138 any coupling with the CSS at all, styles can be included inline, but these gets bulky
139 and hard to read. The "rule" nature of CSS is nice. So widgets then have a Javascript
140 and CSS component. Wouldn't it be nice, though, to remove that CSS component.
141
142 With the advent of SASS, the coupling is even more complicated, as now there's some other
143 tool completely unrelated to your component, written in some other language. Wouldn't
144 a unified approach be nice?
145
146
292b4000 »
2010-09-11 more formatting README
147 ## Similar projects
de5d8699 »
2010-09-11 add some example documentation
148
06de1e37 »
2010-09-11 rename README and try to format
149 http://revnode.com/oss/css/
150
292b4000 »
2010-09-11 more formatting README
151 ## Legal
de5d8699 »
2010-09-11 add some example documentation
152
06de1e37 »
2010-09-11 rename README and try to format
153 Copyright (c) 2010 Andrew J. Peterson
154 All Rights Reserved.
Something went wrong with that request. Please try again.