templating engine for css based on width and height of the window
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
api.js
index.js
model.js
package.json

README.md

Normalizer

Templating engine for CSS based on width and height of the window, used as a Connect/Express Middleware. Relies on Swig, which is my templating engine of choice.
I created this package to help me with a very specific need: when building apps for mobile i always have problems with my lack of ability with CSS so this allows me to build a UI based on percentages of the window's dimension.
It's in a very early stage but it works as it should; take a look at the roadmap to check on the functionalities i'm working on.

you should use it because:

  • You find it useful
  • you need to build a UI that is proportionate wherever the device it is opened
  • Simple to use
  • Little or no overhead

you should look away if:

  • you think it's stupid
  • you're a guru with CSS and think this is stupid
  • potato

Usage

Install it with:

npm install cssspitter

Or include it in the package.json file:

{
	......,
	"dependencies": {
		....,
		"cssspitter": "*"
	}
}

As always you have to require it:

var cssspitter = require('cssspitter');

When configuring the Connect/Express server, include it like this:
- replace the path with the folder you have the templates)
- it's important to include it after the static middleware, for in the near future i will be implementing a caching service

app.configure(function(){
	.....
	.....
	app.use(express.static(path.join(__dirname, 'public')));
	app.use( cssspitter( path.join(__dirname, 'public/css/templates/' ) ) );
});

The structure of the requests should be:

<link rel="stylesheet" type="text/css" href="css/_width_/_height_/_nameoffile_.css">

So what i do is something like:
- I will create a mechanism to serve bundles but for now, you have to request every file

<script>
	var w = window.innerWidth,
	    h = window.innerHeight;
    document.write(
		[
			'<link rel="stylesheet" href="/css/'+w+'/'+h+'/navigation.css">', 
			'<link rel="stylesheet" href="/css/'+w+'/'+h+'/homeview.css">'
		].join('\n')
	);
</script>

Then, in the CSS template, use 'w' and 'h' at will:

html, body {
	width: {{w}}px;
	height: {{h}}px;
}
.header {
	width: {{w}}px;
	height: {{h * 0.10}}px; /* 10% */
}

Easy isn't it?
You can also use all the functionality of Swig to pump up the jam...

Road Map

  • caching system that will save the files already requested
  • bundling mechanism to join all the files into one response
  • minimizing option

Feel free to use, fork and please contribute reporting bugs and with pull requests