DSS (NOT SAFE FOR PRODUCTION)
Dynamic Style Sheets for dynamic projects
Dynamic Style Sheets
Dynamic Style Sheets gives you the ability to dynamically set values to your css properties on the go.
First things first ...
bower install dss;
<!--load the dss-->
then ...
<!--link your cssNOTE : use the **dynamic-stylesheet** rel attribute so I can put poison in your css.-->
DSS loaded! Now you can put DSS declarations in your sheet in three different flavours:
- Double pipe
- Pseudo dss selector
- "dss-" preffix property
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.
dss
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.
DSS Helpers
dss.floor
/*margin-top will aways be 200 or more*/
dss.ceil
/*margin-top will aways be 200 or less*/
dss.bounds
/*margin-top will aways be something between 100 and 200*/
dss.pon
/*return a positive number or 0, opacity will never be less than 0*/
dss.if
/*if the scrollX is greater than 200 so opacity will be 1 else will be 0*/
Javascript API
Managing properties
dss.setProperty
dss
dss.setDynamicProperty
//will generate mouseX and mouseY property everytime document fires mousemovedss;
Events
init
dss
render
dss
Version
0.1.0 Beta
Building
npm install && grunt