guisouza/dss

:fire: Dynamic Style Sheets

DSS (NOT SAFE FOR PRODUCTION)

Dynamic Style Sheets for dynamic projects

LIVE DEMO (Apple TV)

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-->
<script src="dss.js"></script>

then ...

<!--
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">

DSS loaded! Now you can put DSS declarations in your sheet in three different flavours:

- Double pipe

.box{
	width: 50px;
	height: 50px;
	background: ||companyColor:red||;
	position: absolute;
	top: ||mouseY-25||px;
	left: ||mouseX-25||px;
}

- Pseudo dss selector

.box:dss{
	width: 50px;
	height: 50px;
	background: companyColor:red;
	position: absolute;
	top: mouseY-25;
	left: mouseX-25;
}

- "dss-" preffix property

.box{
	width: 50px;
	height: 50px;
	dss-background: companyColor:red;
	position: absolute;
	dss-top: mouseY-25;
	dss-left: mouseX-25;
}

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.setProperty('companyColor','#1616FF')

Default Auto-Binded Properties

mouseX

Automatically receives the x position of the cursor related to the document.

mouseY

Automatically receives the y position of the cursor related to the document.

mouseClientX

Automatically receives the x position of the cursor related to the viewport

mouseClientY

Automatically receives the y position of the cursor related to the viewport

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*/
 header{
  margin-top : ||dss.floor(200)(scrollY)||px;
 }

dss.ceil

/*margin-top will aways be 200 or less*/
 header{
  margin-top : ||dss.ceil(200)(scrollY)||px;
 }

dss.bounds

/*margin-top will aways be something between 100 and 200*/
 header{
  margin-top : ||dss.bounds(100,200)(scrollY)||px;
 }

dss.pon

/*return a positive number or 0, opacity will never be less than 0*/
 header{
  opacity : ||dss.pon(-200+scrollX)||;
 }

dss.if

/*if the scrollX is greater than 200 so opacity will be 1 else will be 0*/
 header{
  opacity : ||dss.if(scrollX > 200)(1)(0)||;
 }

Javascript API

Managing properties

dss.setProperty

dss.setProperty('companyColor','#1616FF')

//OR

dss.setProperty({
	companyColor:'#1616FF'
})

dss.setDynamicProperty

//will generate mouseX and mouseY property everytime document fires mousemove
dss.setDynamicProperty('mouse',function(){
	return{
		context : document,

		event : 'mousemove',

		getter : function(e){
			return {
				x : e.pageX,
				y : e.pageY,
			};
		}
	};
});

Events

init

dss.on('init',function(){
console.log('DSS initialized with its first render Cycle =D ')
})

render

dss.on('render',function(){
console.log('there is a render cycle =D')
})

Version

0.1.2 Beta

Building

npm install && grunt

dss's Issues

[SPIKE] Use PostCSS to process CSS

install via bower

make this work bower install dss

Mouse position property returning boolean

Hi!

When I hit the left or top edges of the page, mouseX and mouseY return false.

onParsed listener?

Is there any listener to be triggered if the CSS finished the parsing process?

Listen events only when needed

Performance - considerations

Hi, there! First of all, great project.

I have to say I did not spent the time yet to read and learn all the code you have here, but I would like to bring up some discussion about performance - which I imagine will be an important point of interest for anyone considering using your library. First I have some assumptions which might turn out wrong, so here we go:

1 - You modify CSS rules at the stylesheet level, leaving to the browser the task of reproducing the changes to the matching elements;
2 - You have some kind of a templating language to construct this stylesheet;
3 - You parse the expression values with a lexer of some kind.

All these assumptions make clear that you have subsets of quite complex tools to finish the job of dynamic stylesheets. Therefore I would strongly recommend that you consider using tools well know (or at least good enough) for it's particular job, even if this means forking a project to match the needs of DSS on the long-run.

Finally, I've create this topic to aggregate the wide discussion of performance. I think we can split this issue into as many issues as necessary to discuss the more specificity of each aspect that gets pointed here.

Demo online

Criar uma demonstração do demo

AST to get rules

Hey Gui! you really are a programming magician, nice project!

I have a suggestion for you, to make your project a lot easier to implement new features and stuff, you may use AST for parsing the CSS rules.

Saying is easier than doing, so I have implemented a simple dss-ast project with a working example... you may check it out! You (or we) could refactor the code if you consider using AST for your project

https://github.com/mauriciosoares/dss-ast

[BUG] refreshDss passing argument "property" as array not change the dss properties

When I update property values passing a object, the css is not parsed again.
e.g:

 dss.setProperty({
    primary : '#'+data.color,
    btnProd: btnProd
 });

source code missing

Syntax - considerations

As I understood, you are indeed creating another syntax for stylesheets. Although I consider this might be justifiable, we have to keep in mind some problems it brings:

• Editors are not prepared to your expressions;
• Preprocessors will have a hard time compiling it.

I'm sure there more issues that can be brought up on this topic. Therefore, unless we plan on building plugins for a considerable amount of editors and preprocessors and syntax highlighters or whatever, we should address the possibility of rethinking the syntax to be CSS compliant somehow.

I'm not here to bring you some solution anyway. But I would like to show an example of things that could be build using compliant syntax. For instance, the code below would fail to compile using Sass:

foo {
  bar: ||mouseY-25||px;
}

whilst the following would get properly compiled:

foo {
  bar: dss("mouseY|px");
}

Again, just an example of something that works. We should definitely discuss more on the topic before defining any syntax or pattern to go forward with.

remove all default auto-binding properties.

Hey man, what you think about removing all the auto-binding properties, and let the user to set them up by himself?

Because Imagine I want to use DSS only with a custom property I've created, but still I have 3 heavy events in the DOM that I'll never use, the mousemove, scroll and resize. These are going to be triggered a LOT, and I'm not even using them.

Just a thought.