# cssspitter

> Templating engine for CSS based on width and height of the window, used as a Connect/Express Middleware.

Latest version **0.1.1** (published 2013-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install cssspitter
pnpm add cssspitter
yarn add cssspitter
bun add cssspitter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2013-08-16 |
| First published | 2013-08-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | André Alçada Padez |
| Maintainers | andrepadez |
| Keywords | express, connect, css, mobile, ui, percentage, no-less |

## Links

- npm: https://www.npmjs.com/package/cssspitter
- Repository: git@github.com:andrepadez/cssspitter
- Issues: https://github.com/andrepadez/cssspitter/issues
- npm.io page: https://npm.io/package/cssspitter

## Dependencies (2)

- [swig](https://npm.io/package/swig.md) *
- [connect](https://npm.io/package/connect.md) *

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2013-08-16
- 0.1.0 — 2013-08-13
- 0.0.0 — 2013-08-11

## README

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.

<h3>you should use it because:</h3>
<ul>
    <li>You find it useful</li>
    <li>you need to build a UI that is proportionate wherever the device it is opened</li>
    <li>Simple to use</li>
    <li>Little or no overhead</li>
</ul>

<h3>you should look away if:</h3>
<ul>
    <li>you think it's stupid</li>
    <li>you're a guru with CSS and think this is stupid</li>
    <li>potato</li>
</ul>

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

---
_Source: https://npm.io/package/cssspitter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._