one-line include for switcher

README.md

@@ -8,18 +8,13 @@ This project only includes "drop-in" minimal frameworks, in other words, boilerp
 
 The switcher is fully modular, so you can easily drop it into your own pages to quickly preview the effect of using different CSS frameworks. You can even add your own frameworks to the list and use the dropdown menu to switch between them.
 
-To use the CSS switcher, just clone or download the project and then copy your html file into the main project folder (you can replace `index.html` if you want, since it's just the demo).
+To use the CSS switcher, just clone or download the project and then drop your html file into the main project folder (you can replace `index.html` if you want, since it's just a demo page).
 
-Include the js for the switcher in the header of the page:
+Then it's just a matter of adding the following line at the end of the document, before the closing `</body>` tag:
 
         <script src="switcher.js" type="text/javascript"></script> 
 
-Then, add the following code wherever you want the dropdown to appear:
-
-          <div id="switcher">&nbsp;</div>
-          <script type="text/javascript">inline_switcher();</script>
-
-That's it! You should now be able to cycle through the different frameworks by choosing them from the dropdown.
+That's it! You should now be able to cycle through the different frameworks by choosing them from the dropdown at the top of the page.
 
 ## Custom frameworks
 

switcher.js

@@ -1,14 +1,6 @@
-var frameworks = "bullframe,caiuss,kathamo,kube,lotus,milligram,min,monalisa,motherplate,normalize,oh-my-css,pure,sanitize-10up,sanitize-zdroid,siimple,simple,skeleton-framework,skeleton-plus,skeleton,tacit,thao";
+var frameworks = "bullframe,caiuss,kathamo,kube,lotus,milligram,min,motherplate,normalize,oh-my-css,pure,sanitize-10up,sanitize-zdroid,siimple,simple,skeleton-framework,skeleton-plus,skeleton,tacit,thao";
 
-stylesheet = document.getElementsByTagName("link")[0];
-if (stylesheet == undefined) {
-  head = document.getElementsByTagName('head')[0];
-  link = document.createElement('link');
-  link.rel="stylesheet";
-  link.type="text/css";
-  link.href="vendor/bullframe.min.css";
-  head.appendChild(link);
-}
+add_switcher();
 
 function switch_css(css) {
   document.getElementsByTagName("link")[0].href = "vendor/" + css + ".min.css";
@@ -36,3 +28,22 @@ function inline_switcher() {
   dropdown = dropdown + select_close;
   switcher.innerHTML = dropdown;
 }
+
+function add_switcher() {
+  stylesheet = document.getElementsByTagName("link")[0];
+  if (stylesheet == undefined) {
+    head = document.getElementsByTagName('head')[0];
+    link = document.createElement('link');
+    link.rel="stylesheet";
+    link.type="text/css";
+    link.href="vendor/bullframe.min.css";
+    head.appendChild(link);
+  }
+
+  var new_div = document.createElement("div");
+  new_div.innerHTML = '      <div id="switcher">&nbsp;</div>\n      <script type="text/javascript">inline_switcher();</script>';
+  document.body.insertBefore(new_div, document.body.firstChild);
+  document.body.style.paddingLeft = "24px"
+
+  inline_switcher();
+}