A front-end starter 'packed' with a js/css loader
What is this for?
Basically, I wanted a reusable starting place for projects that enables progressive enhancement through feature detection and allows packaging assets conditionally, so I can control which package of assets are loaded on a particular page.
loader.js also defines it's own bodyready function and does not rely on a library. I wanted to control the loading of libraries (like jQuery) to ensure that only browsers deemed 'enhanced' receive it, ensuring a reasonable experience for less-featured devices.
How to use
index.html: These three lines are required in the head
<script src="js/libs/common.js"></script> <script src="js/loader.js"></script>
The body class (tweets here as an example) is the key that loader.js will use to conditionally load other js/css.
js/loader.js: loader.js defines two arrays, jsToLoad and cssToLoad, that list any site-wide assets.
in packed.scripts and packed.styles are key/value pairs that load assets based on a body class. The key should be named the same as the body class on the corresponding html document you want to load the assets on. Note that the reset.css and main.css stylesheets are a common use-case foundation, and the google font was thrown in for fun just as an example of how this starter can be used. The twitter script was also used as just an example.
js/coolshit.js: and css/twitterlist-styles.css