Nearly Perfect Mediocracy
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    cssspitterpublic

    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

    Keywords

    none

    install

    npm i cssspitter

    Downloadslast 7 days

    1

    version

    0.1.1

    license

    none

    last publish

    collaborators

    • avatar