From 451a0d7718b1f4753c55d7f30bcc612ae0b52c9b Mon Sep 17 00:00:00 2001
From: dohliam <dohliam@gmail.com>
Date: Mon, 27 Jun 2016 17:11:41 -0700
Subject: [PATCH] one-line include for switcher

---
 README.md   | 11 +++--------
 switcher.js | 31 +++++++++++++++++++++----------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index f4c07d4..0b3d809 100644
--- a/README.md
+++ b/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
 
diff --git a/switcher.js b/switcher.js
index 1d6fc61..2db2701 100644
--- a/switcher.js
+++ b/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();
+}