forked from guisouza/DSS
/
LICENSE
83 lines (64 loc) · 1.68 KB
/
LICENSE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
# DSS (NOT SAFE FOR PRODUCTION)
Dyamic Style Sheets
for dynamic projects
![Alt text](http://i.imgur.com/tPRotMv.png "DSS")
# Dynamic Style Sheets
Dynamic Style Sheets gives you the ability to dynamically set values to your css properties on the go.
No more inline binding.
An DSS example
First things first ...
```html
<!--load the dss-->
<script src="dss.js"></script>
```
then ...
```html
<!--
link your css
NOTE : use the **dynamic-stylesheet** rel attribute so I can put poison in your css.
-->
<link rel="dynamic-stylesheet" href="style.css">
```
**or**
```html
<!--
NOTE : use the **dynamic-stylesheet** rel attribute so I can put poison in your css.*/
-->
<style rel="dynamic-stylesheet">
...
</style>
```
```css
.box{
width: 50px;
height: 50px;
background: ||companyColor:red||;
position: absolute;
top: ||mouseY-25||px;
left: ||mouseX-25||px;
}
```
The **mouseY** and **mouseX** identifiers will automatically receive the mouse position on the screen, every time it changes.
The **companyColor** identifier must be set over javascript, but until you do, it will receive the default value **red**.
```js
dss.setProperty('companyColor','#1616FF')
```
# Default Auto-Binded Properties
##### **mouseX**
Automatically receives the x position of the cursor.
##### **mouseY**
Automatically receives the y position of the cursor.
##### **scrollX**
Automatically receives the x position of the window scroll.
##### **scrollY**
Automatically receives the y position of the window scroll.
##### **windowWidth**
Automatically receives the window width.
##### **windowHeight**
Automatically receives the window height.
# Version
0.0.1 **Alpha**
# Building
```bash
npm install && grunt
```