Inject and update dynamic CSS using simple js templating
This script is intended to be used mostly in the <head> to enhance the main stylesheet. Add a style tag with an id. This is a good ol' CSS stylesheet with the sugar of placeholder $variables. Then include the script.
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
<style id="css-tpl">
body {
font-size: $baseFontSize;
}
.full-height {
height: $windowHeight;
}
</style>
<script src="CSSTemplate.js"></script>
<script>
// Setup here
</script>
</head>Now you set the placeholder values by creating a new CSSTemplate instance pointing to our style tag.
var tpl = new CSSTemplate('css-tpl');
tpl.set({
baseFontSize: (window.innerHeight / 5) + 'px',
windowHeight: window.innerHeight + 'px'
});Best usage would be creating a "refresh" function and attach to an event handler:
var tpl = new CSSTemplate('css-tpl');
function handler() {
tpl.set({
baseFontSize: (window.innerHeight > 320 ? window.innerHeight / 5 : 64) + 'px',
windowHeight: window.innerHeight + 'px'
});
}
document.addEventListener('resize', handler);
handler();The minified script is small enough to be placed directly in the <head> without noticeable overhead.
Copyright (c) 2015 Nicolás Arias, released under the MIT license.