Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 431 lines (346 sloc) 8.592 kb
1d32526 @oscarotero Changed comments and README
authored
1 STYLECOW
bbbabc1 @oscarotero first commit
authored
2
1d32526 @oscarotero Changed comments and README
authored
3 Created by Oscar Otero <http://oscarotero.com> <oom@oscarotero.com>
bbbabc1 @oscarotero first commit
authored
4
1d32526 @oscarotero Changed comments and README
authored
5 GNU Affero GPL version 3. http://www.gnu.org/licenses/agpl-3.0.html
bbbabc1 @oscarotero first commit
authored
6
7
8 ======================================================
9 WHAT IS STYLECOW?
10 ======================================================
11
1e4bcef @oscarotero changed README
authored
12 It is a php library that allows parsing and manipulating css files. The main class is styleCow that loads and parses the css file(s) creating an internal array with all the selectors, properties and values. Then you can transform the array using one or more available plugins and finally return the css code.
13
14 Features:
15
16 * Written in php 5.3
17 * Includes the css files using @import
18 * Extensible with plugins
19 * Easy to use
bbbabc1 @oscarotero first commit
authored
20
21
22 ======================================================
1e4bcef @oscarotero changed README
authored
23 HOW TO USE
bbbabc1 @oscarotero first commit
authored
24 ======================================================
25
7a6fad4 @oscarotero changed README
authored
26 include('Stylecow/Stylecow.php');
a48242b @oscarotero edited README
authored
27
ff17c8d @bertez README changes
bertez authored
28 //Fist we instance the class (note that we are using namespaces)
7a6fad4 @oscarotero changed README
authored
29 $styleCow = new Stylecow\Stylecow;
bbbabc1 @oscarotero first commit
authored
30
31 //Load the file
32 $styleCow->load('my-styles.css');
33
1e4bcef @oscarotero changed README
authored
34 //Transform the css file using one or more plugins (for example Vendor_prefixes or Variables)
bbbabc1 @oscarotero first commit
authored
35 $styleCow->transform(array(
1e4bcef @oscarotero changed README
authored
36 'Vendor_prefixes',
37 'Variables'
bbbabc1 @oscarotero first commit
authored
38 ));
39
1e4bcef @oscarotero changed README
authored
40 //Print the result css code
41 echo $styleCow->toString();
bbbabc1 @oscarotero first commit
authored
42
1e4bcef @oscarotero changed README
authored
43 //You can use also the function show() to print the code with http headers and die
bbbabc1 @oscarotero first commit
authored
44 $styleCow->show();
45
46
47 ======================================================
1e4bcef @oscarotero changed README
authored
48 PLUGIN: Vendor_prefixes
bbbabc1 @oscarotero first commit
authored
49 ======================================================
50
51 Adds the vendor prefixes to all properties in need. For example.
52
53
54 origin:
55 ---------------
56 div.foo {
57 border-radius: 4px;
58 border-top-left-radius: 0;
59 background: linear-gradient(#333, #999);
60 }
61
62 div.foo ::selection {
63 background: red;
64 }
65
66
ff17c8d @bertez README changes
bertez authored
67 result:
bbbabc1 @oscarotero first commit
authored
68 ---------------
69 div.foo {
70 border-radius: 4px;
71 -moz-border-radius: 4px;
72 -webkit-border-radius: 4px;
73 -o-border-radius: 4px;
74 border-top-left-radius: 0;
75 -moz-border-radius-topleft: 0;
76 -webkit-border-top-left-radius: 0;
77 background: linear-gradient(#333, #999);
78 background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#999));
79 background: -moz-linear-gradient(#333, #999);
80 background: -webkit-linear-gradient(#333, #999);
81 }
82 div.foo ::selection {
83 background: red;
84 }
85 div.foo ::-moz-selection {
86 background: red;
87 }
88
89
90 ======================================================
1e4bcef @oscarotero changed README
authored
91 PLUGIN: Matches
bbbabc1 @oscarotero first commit
authored
92 ======================================================
93
94 Resolve the :matches() css4 selector (http://www.w3.org/TR/2011/WD-selectors4-20110929/#matches)
95
96 origin:
97 ---------------
98 div.foo :matches(h1, h2, h3, h4, h5, h6) a {
99 color: blue;
100 }
101
102 div.foo :matches(article, section) header :matches(h1, h2) {
103 color: black;
104 }
1e4bcef @oscarotero changed README
authored
105
bbbabc1 @oscarotero first commit
authored
106
ff17c8d @bertez README changes
bertez authored
107 result:
bbbabc1 @oscarotero first commit
authored
108 ---------------
109 div.foo h1 a, div.foo h2 a, div.foo h3 a, div.foo h4 a, div.foo h5 a, div.foo h6 a {
110 color: blue;
111 }
112 div.foo article header h1, div.foo article header h2, div.foo section header h1, div.foo section header h2 {
113 color: black;
114 }
115
116
117 ======================================================
1e4bcef @oscarotero changed README
authored
118 PLUGIN: Variables
bbbabc1 @oscarotero first commit
authored
119 ======================================================
120
121 You can use variables to recycle code
122
123 origin:
124 ---------------
125 $variables {
126 title-font: Helvetica, Arial, sans-serif;
127
128 title-style: {
129 font-family: $title-font;
130 font-size: 2em;
131 text-shadow: 1px 1px #CCC;
132 }
133 }
134
135 div.foo h1 {
136 $title-style;
137 }
138 div.foo h2 {
139 font-family: $title-font;
140 font-size: 1em;
141 }
1e4bcef @oscarotero changed README
authored
142
bbbabc1 @oscarotero first commit
authored
143
ff17c8d @bertez README changes
bertez authored
144 result:
bbbabc1 @oscarotero first commit
authored
145 ---------------
146 div.foo h1 {
147 font-family: Helvetica, Arial, sans-serif;
148 font-size: 2em;
149 text-shadow: 1px 1px #CCC;
150 }
151 div.foo h2 {
152 font-family: Helvetica, Arial, sans-serif;
153 font-size: 1em;
154 }
1e4bcef @oscarotero changed README
authored
155
bbbabc1 @oscarotero first commit
authored
156
157
158 ======================================================
1e4bcef @oscarotero changed README
authored
159 PLUGIN: Nested_rules
bbbabc1 @oscarotero first commit
authored
160 ======================================================
161
1e4bcef @oscarotero changed README
authored
162 Resolves the nested rules, allowing to write css in a more legible way:
bbbabc1 @oscarotero first commit
authored
163
164 origin:
165 ---------------
166 article.main {
167 padding: 4px;
168
169 header {
170 margin-bottom: 20px;
171
172 h1, h2 {
173 font-size: Helvetica, sans-serif;
174 color: #000;
175 }
176
177 p {
178 color: #666;
179
180 a {
181 text-decoration: none;
182 color: green;
183 }
184
185 a:hover {
186 text-decoration: underline;
187 }
188 }
189 }
190 }
1e4bcef @oscarotero changed README
authored
191
bbbabc1 @oscarotero first commit
authored
192
ff17c8d @bertez README changes
bertez authored
193 result:
bbbabc1 @oscarotero first commit
authored
194 ---------------
195 article.main {
196 padding: 4px;
197 }
198 article.main header {
199 margin-bottom: 20px;
200 }
201 article.main header h1, article.main header h2 {
202 font-size: Helvetica, sans-serif;
203 color: #000;
204 }
205 article.main header p {
206 color: #666;
207 }
208 article.main header p a {
209 text-decoration: none;
210 color: green;
211 }
212 article.main header p a:hover {
213 text-decoration: underline;
214 }
215
216
217 ======================================================
1e4bcef @oscarotero changed README
authored
218 PLUGINS: Ie_filters
bbbabc1 @oscarotero first commit
authored
219 ======================================================
220
1e4bcef @oscarotero changed README
authored
221 Adds Internet Explorer filters to emulate some css properties no supported by IE (for example, some 2d transform functions, opacity or linear gradients)
bbbabc1 @oscarotero first commit
authored
222
223 origin:
224 ---------------
225 div.foo {
226 background: linear-gradient(#666, #999);
227 transform: rotate(45deg) scaleY(-1);
228 opacity: 0.5;
229 }
1e4bcef @oscarotero changed README
authored
230
bbbabc1 @oscarotero first commit
authored
231
ff17c8d @bertez README changes
bertez authored
232 result:
bbbabc1 @oscarotero first commit
authored
233 ---------------
234 div.foo {
235 background: linear-gradient(#666, #999);
236 transform: rotate(45deg) scaleY(-1);
237 opacity: 0.5;
238 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', endColorStr='#999999'), progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = 0.707106781187, M12 = -0.707106781187, M21 = 0.707106781187, M22 = 0.707106781187), flipV, alpha(opacity=50);
239 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', endColorStr='#999999'), progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = 0.707106781187, M12 = -0.707106781187, M21 = 0.707106781187, M22 = 0.707106781187), flipV, alpha(opacity=50);
240 }
1e4bcef @oscarotero changed README
authored
241
bbbabc1 @oscarotero first commit
authored
242
243
244 ======================================================
1e4bcef @oscarotero changed README
authored
245 PLUGINS: Grid
bbbabc1 @oscarotero first commit
authored
246 ======================================================
247
248 You can configurate and use one or various grids for the layout
249
250 origin:
251 ---------------
252 $grid {
253 width: 950px;
254 columns: 24;
255 gutter: 10px;
256 }
257
258 /* left column */
259 div.menu {
260 $grid: cols(8);
261 }
262
263 /* center column */
264 div.content {
265 $grid: cols(12);
266 }
267
268 /* right column */
269 aside {
270 $grid: cols(4);
271 margin-right: 0;
272 }
1e4bcef @oscarotero changed README
authored
273
bbbabc1 @oscarotero first commit
authored
274
ff17c8d @bertez README changes
bertez authored
275 result:
bbbabc1 @oscarotero first commit
authored
276 ---------------
277 div.menu {
278 width: 310px;
279 float: left;
280 display: inline;
281 margin-right: 10px;
282 }
283 div.content {
284 width: 470px;
285 float: left;
286 display: inline;
287 margin-right: 10px;
288 }
289 aside {
290 margin-right: 0;
291 width: 150px;
292 float: left;
293 display: inline;
294 }
1e4bcef @oscarotero changed README
authored
295
296
297
298 ======================================================
299 PLUGINS: Animate
300 ======================================================
301
302 Inserts the code for the animations availables in http://daneden.me/animate/
303
304 origin:
305 ---------------
306 div.foo {
307 $animate: flash;
308 }
309
310
311 result:
ff17c8d @bertez README changes
bertez authored
312 ---------------
1e4bcef @oscarotero changed README
authored
313 div.foo {
314 animation: 1s ease;
315 -moz-animation: 1s ease;
316 -webkit-animation: 1s ease;
317 -o-animation: 1s ease;
318 -ms-animation: 1s ease;
319 animation-name: flash;
320 -moz-animation-name: flash;
321 -webkit-animation-name: flash;
322 -o-animation-name: flash;
323 -ms-animation-name: flash;
324 }
325 @-moz-keyframes flash {
326 0%, 50%, 100% {
327 opacity: 1;
328 -moz-opacity: 1;
329 }
330 25%, 75% {
331 opacity: 0;
332 -moz-opacity: 0;
333 }
334 }
335 @-webkit-keyframes flash {
336 0%, 50%, 100% {
337 opacity: 1;
338 -webkit-opacity: 1;
339 }
340 25%, 75% {
341 opacity: 0;
342 -webkit-opacity: 0;
343 }
344 }
345 @-ms-keyframes flash {
346 0%, 50%, 100% {
347 opacity: 1;
348 }
349 25%, 75% {
350 opacity: 0;
351 }
352 }
353 @-o-keyframes flash {
354 0%, 50%, 100% {
355 opacity: 1;
356 }
357 25%, 75% {
358 opacity: 0;
359 }
360 }
361 @keyframes flash {
362 0%, 50%, 100% {
363 opacity: 1;
364 -moz-opacity: 1;
365 -webkit-opacity: 1;
366 }
367 25%, 75% {
368 opacity: 0;
369 -moz-opacity: 0;
370 -webkit-opacity: 0;
371 }
aae9cab @oscarotero Changed README
authored
372 }
373
374
375 ======================================================
376 PLUGINS: Color
377 ======================================================
378
1348442 @oscarotero changed README
authored
379 Manipulate color dinamically. Changes the hue, saturation, light, red, green, blue, alpha and tint values.
aae9cab @oscarotero Changed README
authored
380 You can use absolute or relative values:
381 saturation:50 /* Set the saturation value to 50 */
382 saturation:+10 /* Increments 10% the current saturation */
383
384 origin:
385 ---------------
386 div.foo {
387 background: color(#369, light:50, alpha: 0.5);
388 color: color(#369, blue:-30);
389 }
390
391
392 result:
393 ---------------
394 div.foo {
395 background: rgba(64, 128, 191, 0.5);
396 color: #33667b;
1348442 @oscarotero changed README
authored
397 }
398
399
400 ======================================================
401 PLUGINS: Rem
402 ======================================================
403
404 Allows use the rem value (http://snook.ca/archives/html_and_css/font-size-with-rem) to define the text size in a safe way for old browsers.
405 The default rem is 1em (16px) but you can change it in the body styles:
406
407 origin:
408 ---------------
409 body {
410 font-size: 1.2em;
411 }
412 .foo {
413 font-size: 2em;
414 }
415 .foo div {
416 font-size: 1rem;
417 }
418
419
420 result:
421 ---------------
422 body {
423 font-size: 1.2em;
424 }
425 .foo {
426 font-size: 2em;
427 }
428 .foo div {
429 font-size: 19.2px;
430 font-size: 1rem;
1e4bcef @oscarotero changed README
authored
431 }
Something went wrong with that request. Please try again.