csster 1.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE +202 -0
- data/README.md +305 -0
- data/lib/csster.rb +8 -0
- data/lib/csster/version.rb +3 -0
- data/vendor/assets/javascripts/csster.js +1442 -0
- metadata +62 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: d82632c37cb32738b8993eef7fb7ff350729ffef
|
4
|
+
data.tar.gz: 87ca49392d6e8be6387fc41777a4ea8ca0f25ae4
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 61b42ab7e1b06a81deebe3730b055f7d573e3af3fb68f868c5113e37b89213414d00379569bd96d482ce5d10001746f13135c2beb8842f287ce87775170dd312
|
7
|
+
data.tar.gz: 0f5f3577b761eda7720e3c20929c41cd3434da334722136f172c742eaea7024b66bbab5d17bcc50f73842648196c2ec26bc61fe45da5006ef54b52ca58e65f3c
|
data/LICENSE
ADDED
@@ -0,0 +1,202 @@
|
|
1
|
+
|
2
|
+
Apache License
|
3
|
+
Version 2.0, January 2004
|
4
|
+
http://www.apache.org/licenses/
|
5
|
+
|
6
|
+
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
7
|
+
|
8
|
+
1. Definitions.
|
9
|
+
|
10
|
+
"License" shall mean the terms and conditions for use, reproduction,
|
11
|
+
and distribution as defined by Sections 1 through 9 of this document.
|
12
|
+
|
13
|
+
"Licensor" shall mean the copyright owner or entity authorized by
|
14
|
+
the copyright owner that is granting the License.
|
15
|
+
|
16
|
+
"Legal Entity" shall mean the union of the acting entity and all
|
17
|
+
other entities that control, are controlled by, or are under common
|
18
|
+
control with that entity. For the purposes of this definition,
|
19
|
+
"control" means (i) the power, direct or indirect, to cause the
|
20
|
+
direction or management of such entity, whether by contract or
|
21
|
+
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
22
|
+
outstanding shares, or (iii) beneficial ownership of such entity.
|
23
|
+
|
24
|
+
"You" (or "Your") shall mean an individual or Legal Entity
|
25
|
+
exercising permissions granted by this License.
|
26
|
+
|
27
|
+
"Source" form shall mean the preferred form for making modifications,
|
28
|
+
including but not limited to software source code, documentation
|
29
|
+
source, and configuration files.
|
30
|
+
|
31
|
+
"Object" form shall mean any form resulting from mechanical
|
32
|
+
transformation or translation of a Source form, including but
|
33
|
+
not limited to compiled object code, generated documentation,
|
34
|
+
and conversions to other media types.
|
35
|
+
|
36
|
+
"Work" shall mean the work of authorship, whether in Source or
|
37
|
+
Object form, made available under the License, as indicated by a
|
38
|
+
copyright notice that is included in or attached to the work
|
39
|
+
(an example is provided in the Appendix below).
|
40
|
+
|
41
|
+
"Derivative Works" shall mean any work, whether in Source or Object
|
42
|
+
form, that is based on (or derived from) the Work and for which the
|
43
|
+
editorial revisions, annotations, elaborations, or other modifications
|
44
|
+
represent, as a whole, an original work of authorship. For the purposes
|
45
|
+
of this License, Derivative Works shall not include works that remain
|
46
|
+
separable from, or merely link (or bind by name) to the interfaces of,
|
47
|
+
the Work and Derivative Works thereof.
|
48
|
+
|
49
|
+
"Contribution" shall mean any work of authorship, including
|
50
|
+
the original version of the Work and any modifications or additions
|
51
|
+
to that Work or Derivative Works thereof, that is intentionally
|
52
|
+
submitted to Licensor for inclusion in the Work by the copyright owner
|
53
|
+
or by an individual or Legal Entity authorized to submit on behalf of
|
54
|
+
the copyright owner. For the purposes of this definition, "submitted"
|
55
|
+
means any form of electronic, verbal, or written communication sent
|
56
|
+
to the Licensor or its representatives, including but not limited to
|
57
|
+
communication on electronic mailing lists, source code control systems,
|
58
|
+
and issue tracking systems that are managed by, or on behalf of, the
|
59
|
+
Licensor for the purpose of discussing and improving the Work, but
|
60
|
+
excluding communication that is conspicuously marked or otherwise
|
61
|
+
designated in writing by the copyright owner as "Not a Contribution."
|
62
|
+
|
63
|
+
"Contributor" shall mean Licensor and any individual or Legal Entity
|
64
|
+
on behalf of whom a Contribution has been received by Licensor and
|
65
|
+
subsequently incorporated within the Work.
|
66
|
+
|
67
|
+
2. Grant of Copyright License. Subject to the terms and conditions of
|
68
|
+
this License, each Contributor hereby grants to You a perpetual,
|
69
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
70
|
+
copyright license to reproduce, prepare Derivative Works of,
|
71
|
+
publicly display, publicly perform, sublicense, and distribute the
|
72
|
+
Work and such Derivative Works in Source or Object form.
|
73
|
+
|
74
|
+
3. Grant of Patent License. Subject to the terms and conditions of
|
75
|
+
this License, each Contributor hereby grants to You a perpetual,
|
76
|
+
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
77
|
+
(except as stated in this section) patent license to make, have made,
|
78
|
+
use, offer to sell, sell, import, and otherwise transfer the Work,
|
79
|
+
where such license applies only to those patent claims licensable
|
80
|
+
by such Contributor that are necessarily infringed by their
|
81
|
+
Contribution(s) alone or by combination of their Contribution(s)
|
82
|
+
with the Work to which such Contribution(s) was submitted. If You
|
83
|
+
institute patent litigation against any entity (including a
|
84
|
+
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
85
|
+
or a Contribution incorporated within the Work constitutes direct
|
86
|
+
or contributory patent infringement, then any patent licenses
|
87
|
+
granted to You under this License for that Work shall terminate
|
88
|
+
as of the date such litigation is filed.
|
89
|
+
|
90
|
+
4. Redistribution. You may reproduce and distribute copies of the
|
91
|
+
Work or Derivative Works thereof in any medium, with or without
|
92
|
+
modifications, and in Source or Object form, provided that You
|
93
|
+
meet the following conditions:
|
94
|
+
|
95
|
+
(a) You must give any other recipients of the Work or
|
96
|
+
Derivative Works a copy of this License; and
|
97
|
+
|
98
|
+
(b) You must cause any modified files to carry prominent notices
|
99
|
+
stating that You changed the files; and
|
100
|
+
|
101
|
+
(c) You must retain, in the Source form of any Derivative Works
|
102
|
+
that You distribute, all copyright, patent, trademark, and
|
103
|
+
attribution notices from the Source form of the Work,
|
104
|
+
excluding those notices that do not pertain to any part of
|
105
|
+
the Derivative Works; and
|
106
|
+
|
107
|
+
(d) If the Work includes a "NOTICE" text file as part of its
|
108
|
+
distribution, then any Derivative Works that You distribute must
|
109
|
+
include a readable copy of the attribution notices contained
|
110
|
+
within such NOTICE file, excluding those notices that do not
|
111
|
+
pertain to any part of the Derivative Works, in at least one
|
112
|
+
of the following places: within a NOTICE text file distributed
|
113
|
+
as part of the Derivative Works; within the Source form or
|
114
|
+
documentation, if provided along with the Derivative Works; or,
|
115
|
+
within a display generated by the Derivative Works, if and
|
116
|
+
wherever such third-party notices normally appear. The contents
|
117
|
+
of the NOTICE file are for informational purposes only and
|
118
|
+
do not modify the License. You may add Your own attribution
|
119
|
+
notices within Derivative Works that You distribute, alongside
|
120
|
+
or as an addendum to the NOTICE text from the Work, provided
|
121
|
+
that such additional attribution notices cannot be construed
|
122
|
+
as modifying the License.
|
123
|
+
|
124
|
+
You may add Your own copyright statement to Your modifications and
|
125
|
+
may provide additional or different license terms and conditions
|
126
|
+
for use, reproduction, or distribution of Your modifications, or
|
127
|
+
for any such Derivative Works as a whole, provided Your use,
|
128
|
+
reproduction, and distribution of the Work otherwise complies with
|
129
|
+
the conditions stated in this License.
|
130
|
+
|
131
|
+
5. Submission of Contributions. Unless You explicitly state otherwise,
|
132
|
+
any Contribution intentionally submitted for inclusion in the Work
|
133
|
+
by You to the Licensor shall be under the terms and conditions of
|
134
|
+
this License, without any additional terms or conditions.
|
135
|
+
Notwithstanding the above, nothing herein shall supersede or modify
|
136
|
+
the terms of any separate license agreement you may have executed
|
137
|
+
with Licensor regarding such Contributions.
|
138
|
+
|
139
|
+
6. Trademarks. This License does not grant permission to use the trade
|
140
|
+
names, trademarks, service marks, or product names of the Licensor,
|
141
|
+
except as required for reasonable and customary use in describing the
|
142
|
+
origin of the Work and reproducing the content of the NOTICE file.
|
143
|
+
|
144
|
+
7. Disclaimer of Warranty. Unless required by applicable law or
|
145
|
+
agreed to in writing, Licensor provides the Work (and each
|
146
|
+
Contributor provides its Contributions) on an "AS IS" BASIS,
|
147
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
148
|
+
implied, including, without limitation, any warranties or conditions
|
149
|
+
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
150
|
+
PARTICULAR PURPOSE. You are solely responsible for determining the
|
151
|
+
appropriateness of using or redistributing the Work and assume any
|
152
|
+
risks associated with Your exercise of permissions under this License.
|
153
|
+
|
154
|
+
8. Limitation of Liability. In no event and under no legal theory,
|
155
|
+
whether in tort (including negligence), contract, or otherwise,
|
156
|
+
unless required by applicable law (such as deliberate and grossly
|
157
|
+
negligent acts) or agreed to in writing, shall any Contributor be
|
158
|
+
liable to You for damages, including any direct, indirect, special,
|
159
|
+
incidental, or consequential damages of any character arising as a
|
160
|
+
result of this License or out of the use or inability to use the
|
161
|
+
Work (including but not limited to damages for loss of goodwill,
|
162
|
+
work stoppage, computer failure or malfunction, or any and all
|
163
|
+
other commercial damages or losses), even if such Contributor
|
164
|
+
has been advised of the possibility of such damages.
|
165
|
+
|
166
|
+
9. Accepting Warranty or Additional Liability. While redistributing
|
167
|
+
the Work or Derivative Works thereof, You may choose to offer,
|
168
|
+
and charge a fee for, acceptance of support, warranty, indemnity,
|
169
|
+
or other liability obligations and/or rights consistent with this
|
170
|
+
License. However, in accepting such obligations, You may act only
|
171
|
+
on Your own behalf and on Your sole responsibility, not on behalf
|
172
|
+
of any other Contributor, and only if You agree to indemnify,
|
173
|
+
defend, and hold each Contributor harmless for any liability
|
174
|
+
incurred by, or claims asserted against, such Contributor by reason
|
175
|
+
of your accepting any such warranty or additional liability.
|
176
|
+
|
177
|
+
END OF TERMS AND CONDITIONS
|
178
|
+
|
179
|
+
APPENDIX: How to apply the Apache License to your work.
|
180
|
+
|
181
|
+
To apply the Apache License to your work, attach the following
|
182
|
+
boilerplate notice, with the fields enclosed by brackets "[]"
|
183
|
+
replaced with your own identifying information. (Don't include
|
184
|
+
the brackets!) The text should be enclosed in the appropriate
|
185
|
+
comment syntax for the file format. We also recommend that a
|
186
|
+
file or class name and description of purpose be included on the
|
187
|
+
same "printed page" as the copyright notice for easier
|
188
|
+
identification within third-party archives.
|
189
|
+
|
190
|
+
Copyright [yyyy] [name of copyright owner]
|
191
|
+
|
192
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
193
|
+
you may not use this file except in compliance with the License.
|
194
|
+
You may obtain a copy of the License at
|
195
|
+
|
196
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
197
|
+
|
198
|
+
Unless required by applicable law or agreed to in writing, software
|
199
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
200
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
201
|
+
See the License for the specific language governing permissions and
|
202
|
+
limitations under the License.
|
data/README.md
ADDED
@@ -0,0 +1,305 @@
|
|
1
|
+
# Csster
|
2
|
+
|
3
|
+
<a href="https://travis-ci.org/ndp/csster" id="status-image-popup" title="build status image" name="status-images" class="open-popup">
|
4
|
+
<img src="https://travis-ci.org/ndp/csster.svg" >
|
5
|
+
</a>
|
6
|
+
|
7
|
+
Concisely generate CSS style rules within Javascript. Features:
|
8
|
+
|
9
|
+
* standard "object literal"/JSON format with good editor support
|
10
|
+
* nesting to DRY up stylesheets
|
11
|
+
* color functions like <code>darken</code> and <code>saturate</code>
|
12
|
+
* built-in macros for common CSS idioms like *clearfix*, *rounded corners*, *drop shadows*.
|
13
|
+
* extension points for custom behavior or cross-browser support.
|
14
|
+
* and all the plain old Javascript behavior: functions, data structures, looping, Math operations, etc.
|
15
|
+
|
16
|
+
Slideshow introduction: https://docs.google.com/present/view?id=dfm357b6_49c4d3fpdm&interval=15
|
17
|
+
|
18
|
+
## Usage
|
19
|
+
|
20
|
+
### Bundler (Rails) Installation
|
21
|
+
|
22
|
+
Add this line to your application's Gemfile:
|
23
|
+
|
24
|
+
gem 'csster'
|
25
|
+
|
26
|
+
And then execute:
|
27
|
+
|
28
|
+
$ bundle
|
29
|
+
|
30
|
+
Or install it yourself as:
|
31
|
+
|
32
|
+
$ gem install csster
|
33
|
+
|
34
|
+
Within your `application.js`, add
|
35
|
+
|
36
|
+
//= require csster
|
37
|
+
|
38
|
+
|
39
|
+
### Node NPM Install
|
40
|
+
|
41
|
+
npm install csster
|
42
|
+
|
43
|
+
### Creating Stylesheets (Brower/Client Side)
|
44
|
+
|
45
|
+
All code is packaged into a single Javascript file download, [csster.js](http://ndpsoftware.com/csster/csster.js). There are no external dependencies.
|
46
|
+
|
47
|
+
```javascript
|
48
|
+
require('csster.js'); // however you manage dependencies
|
49
|
+
|
50
|
+
Csster.style({
|
51
|
+
h1: {
|
52
|
+
fontSize: 18,
|
53
|
+
color: 'red'
|
54
|
+
}
|
55
|
+
});
|
56
|
+
```
|
57
|
+
|
58
|
+
The result is inserted in DOM automatically at the bottom of the <head> element:
|
59
|
+
|
60
|
+
```html
|
61
|
+
...
|
62
|
+
<style type="text/stylesheet">
|
63
|
+
h1 {
|
64
|
+
font-size: 18px;
|
65
|
+
color: red;
|
66
|
+
}
|
67
|
+
</style>
|
68
|
+
</head>
|
69
|
+
...
|
70
|
+
```
|
71
|
+
|
72
|
+
### Format of CSS Rules
|
73
|
+
|
74
|
+
The *style* method accepts CSS rules passed either as arrays or hashes, arrays just being
|
75
|
+
a way to order the hashes. For example:
|
76
|
+
|
77
|
+
<pre>
|
78
|
+
{
|
79
|
+
ul: {
|
80
|
+
margin: 5,
|
81
|
+
padding: 0,
|
82
|
+
}
|
83
|
+
'ul li:first': {
|
84
|
+
paddingLeft: 20px
|
85
|
+
}
|
86
|
+
}
|
87
|
+
</pre>
|
88
|
+
|
89
|
+
Note that
|
90
|
+
|
91
|
+
* 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.)
|
92
|
+
* all raw numbers are assumed to be "pixels" (or "px"), and rendered as such.
|
93
|
+
* any sort of selectors are allowed... they are just passed through to the stylesheet.
|
94
|
+
|
95
|
+
#### Nesting
|
96
|
+
Csster supports nesting of rules to keep things more concise:
|
97
|
+
<pre>
|
98
|
+
{
|
99
|
+
ul: {
|
100
|
+
margin: 5,
|
101
|
+
li: {
|
102
|
+
paddingLeft: 20,
|
103
|
+
'&:hover': {
|
104
|
+
color: 'red'
|
105
|
+
}
|
106
|
+
}
|
107
|
+
}
|
108
|
+
}
|
109
|
+
</pre>
|
110
|
+
|
111
|
+
The "li" property in this case might be a selector or might be a property name. A list of valid
|
112
|
+
property names is used to identify properties right now, and otherwise it's considered a sub-selector.
|
113
|
+
|
114
|
+
Csster supports SASS's "&" operator, to indicate that the selector should be combined with the parent selector.
|
115
|
+
Instead of the default "any descendent" space character being inserted, no space is inserted.
|
116
|
+
|
117
|
+
Combined rules (with commas) are expanded as expected, so nested rules with commas have their parents expanded.
|
118
|
+
|
119
|
+
|
120
|
+
|
121
|
+
|
122
|
+
#### Functions
|
123
|
+
Most manipulations will fall into Javascript's language support, as far as any math or looping. Use Javascript to write necessary functions.
|
124
|
+
|
125
|
+
functions/color.es6 contains SASS-like color functions mixed into the base String object:
|
126
|
+
|
127
|
+
* <code>"#ab342c".darken(%)</code> -- make color darker by given percent
|
128
|
+
* <code>"#ab342c".lighten(%)</code> -- make color lighter by given percent
|
129
|
+
* <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.
|
130
|
+
|
131
|
+
There are also color conversion routines if you want to build your own manipulation.
|
132
|
+
|
133
|
+
* <code>"#ab342c".toRGB()</code>
|
134
|
+
* <code>"#ab342c".toHSL()</code>
|
135
|
+
* <code>Csster.hslToHexColor(h,s,l)</code>
|
136
|
+
|
137
|
+
Opacity is currently not supported by the color model.
|
138
|
+
|
139
|
+
#### Macros using "has" key
|
140
|
+
|
141
|
+
There are a host of pre-made macros that may be useful:
|
142
|
+
|
143
|
+
* <code>roundedCorners(radius)</code> -- add rounded corners on all sides
|
144
|
+
* <code>roundedCorners(side, radius)</code> -- add rounded corners on specified side: <code>'top'</code>, <code>'left'</code>, <code>'bottom'</code> or <code>'right'</code>
|
145
|
+
* <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>
|
146
|
+
* <code>imageReplacement(width, height, img, imgXPosition=0, imgYPosition=0)</code> -- phark image replacement with optional background image offset.
|
147
|
+
* <code>boxShadow([xoffset, yoffset], radius, color)</code>
|
148
|
+
* <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
|
149
|
+
* <code>clearfix()</code> -- standard clearfix
|
150
|
+
|
151
|
+
To "mix these in", use the "has" key:
|
152
|
+
|
153
|
+
<pre>
|
154
|
+
{
|
155
|
+
'div#featured_box': {
|
156
|
+
backgroundColor: '#394c89',
|
157
|
+
has: roundedCorner(5)
|
158
|
+
}
|
159
|
+
}
|
160
|
+
</pre>
|
161
|
+
|
162
|
+
Multiple macros can be included by making that a list, eg. <code>has: [roundedCorners(5), dropShadow()]</code>.
|
163
|
+
|
164
|
+
It's all Javascript, so macros and more complex functions are easy to write. To mix in a set of values, create a function
|
165
|
+
that returns a hash of values, for example:
|
166
|
+
|
167
|
+
<pre>
|
168
|
+
function roundedCorners(radius) {
|
169
|
+
return {
|
170
|
+
'-webkit-border-radius': radius,
|
171
|
+
'-moz-border-radius': radius,
|
172
|
+
'border-radius': radius
|
173
|
+
}
|
174
|
+
}
|
175
|
+
</pre>
|
176
|
+
|
177
|
+
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.
|
178
|
+
|
179
|
+
|
180
|
+
## jQuery Integration
|
181
|
+
|
182
|
+
If jQuery is loaded first, Csster provides a "csster" method:
|
183
|
+
|
184
|
+
<pre>
|
185
|
+
$('.sidebar').csster({ border: '5px solid green', padding: 10 });
|
186
|
+
</pre>
|
187
|
+
|
188
|
+
As expected, this adds a rule to the document with the ".sidebar" selector.
|
189
|
+
In general, this can be called identically to the <code>css()</code> function.
|
190
|
+
This is useful is the DOM on the page is dynamic and when a rule is more efficient than applying
|
191
|
+
a style repeatedly to all the DOM nodes.
|
192
|
+
|
193
|
+
There are a few limitations: Currently a "context" is not supported.
|
194
|
+
And be careful, since not all jQuery selectors are valid CSS selectors--
|
195
|
+
nothing is done to convert or report unsupported selectors (just like regular CSS).
|
196
|
+
|
197
|
+
## Extending Csster
|
198
|
+
|
199
|
+
Csster is built as an extensible system.
|
200
|
+
|
201
|
+
### Adding Custom Property Names
|
202
|
+
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.
|
203
|
+
|
204
|
+
### Pre-process rules
|
205
|
+
<del>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.</del>
|
206
|
+
|
207
|
+
<del>### Post-processing
|
208
|
+
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.
|
209
|
+
|
210
|
+
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>.
|
211
|
+
|
212
|
+
This is used to write custom browser overrides. For example, this one makes opacity work for IE:
|
213
|
+
|
214
|
+
<pre>
|
215
|
+
Csster.rulesPostProcessors.push(function ieOpacity(rules) {
|
216
|
+
// http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
|
217
|
+
if (Csster.browserInfo().msie) {
|
218
|
+
for (var i = 0; i < rules.length; i++) {
|
219
|
+
var rule = rules[i];
|
220
|
+
var value = rule.props['opacity']
|
221
|
+
if (value) {
|
222
|
+
value = Math.round(value * 100.0);
|
223
|
+
rules[i].props['filter'] = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + value + ')';
|
224
|
+
}
|
225
|
+
}
|
226
|
+
}
|
227
|
+
});
|
228
|
+
</pre>
|
229
|
+
</del>
|
230
|
+
|
231
|
+
### Inserting into the DOM
|
232
|
+
Function that outputs a set of rules into the DOM is <code>Csster.insertCss</code> and can be replaced if desired.
|
233
|
+
|
234
|
+
## V2.0 Changes
|
235
|
+
|
236
|
+
### To upgrade from 1.0 or before
|
237
|
+
|
238
|
+
* Change `Csster.browser` to call `Csster.browserInfo()`, which returns the same thing.
|
239
|
+
* Change `has:` macro implementations to `mixin:`.
|
240
|
+
|
241
|
+
### Other changes:
|
242
|
+
|
243
|
+
* use ES6 for implementation and provide a more compressed and clean script.
|
244
|
+
* add ability to turn off property name validation.
|
245
|
+
* add ability to warn about unknown browser extensions for property names.
|
246
|
+
|
247
|
+
|
248
|
+
## Links
|
249
|
+
|
250
|
+
* [Demo of the color functions and macros](http://ndpsoftware.com/csster/demo.html)
|
251
|
+
* [Demo of using to build a chart](http://ndpsoftware.com/csster/demo_chart.html)
|
252
|
+
* [Blog post](http://ndpsoft.blogspot.com/2010/09/introducing-csster.html)
|
253
|
+
|
254
|
+
|
255
|
+
## Development
|
256
|
+
|
257
|
+
### Contributing
|
258
|
+
|
259
|
+
1. Fork it
|
260
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
261
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
262
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
263
|
+
5. Create new Pull Request
|
264
|
+
|
265
|
+
|
266
|
+
### TDD
|
267
|
+
|
268
|
+
The design was driven by [the specs](http://ndpsoftware.com/csster/spec_runner.html).
|
269
|
+
|
270
|
+
### Building
|
271
|
+
|
272
|
+
`./bin/build.sh`
|
273
|
+
|
274
|
+
|
275
|
+
|
276
|
+
## Todo
|
277
|
+
|
278
|
+
* decompile existing stylesheets
|
279
|
+
|
280
|
+
|
281
|
+
|
282
|
+
## Motivation
|
283
|
+
|
284
|
+
This project comes from my frustration of trying to build standalone Javascript widgets. Web
|
285
|
+
projects always involve the combination of HTML DOM, CSS and Javascript. It's often simpler to
|
286
|
+
generate the necessary DOM within your Javascript, removing any coupling (and a simpler calling
|
287
|
+
convention) to a specific web page. But most widgets have certain style rules. To avoid
|
288
|
+
any coupling with the CSS at all, styles can be included inline, but these gets bulky
|
289
|
+
and hard to read. The "rule" nature of CSS is nice. So widgets then have a Javascript
|
290
|
+
and CSS component. Wouldn't it be nice, though, to remove that CSS component.
|
291
|
+
|
292
|
+
With the advent of SASS, the coupling is even more complicated, as now there's some other
|
293
|
+
tool completely unrelated to your component, written in some other language. Wouldn't
|
294
|
+
a unified approach be nice?
|
295
|
+
|
296
|
+
|
297
|
+
## Similar projects
|
298
|
+
|
299
|
+
http://revnode.com/oss/css/
|
300
|
+
|
301
|
+
## Legal
|
302
|
+
|
303
|
+
Copyright (c) 2010-2016 Andrew J. Peterson
|
304
|
+
[Apache License](https://github.com/ndp/csster/raw/master/LICENSE)
|
305
|
+
|