diff --git a/README.md b/README.md
index 93e1b40..5ab96fe 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,27 @@
 # An overview of barebones drop-in minimal CSS boilerplate frameworks
 
-This is a quick CSS switcher to allow for previewing some of the many minimal CSS-only frameworks out there. See the demo [here](https://dohliam.github.io/dropin-minimal-css).
+This is a quick CSS switcher to allow for previewing some of the many minimal CSS-only frameworks out there. See the demo [here](https://dohliam.github.io/dropin-minimal-css) or [drop the switcher](#Usage) into your own page to see how [different frameworks](#list-of-frameworks) would look with your content.
+
+## Usage
+
+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).
+
+If you don't already have a stylesheet defined, you'll need to add the following default stylesheet to the header of your page:
+
+        <link rel="stylesheet" type="text/css" href="vendor/bullframe.min.css"/>
+
+Include the js for the switcher in the header of the page:
+
+        <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.
 
 ## List of frameworks
 
diff --git a/index.html b/index.html
index eebdda0..b143656 100644
--- a/index.html
+++ b/index.html
@@ -10,41 +10,16 @@
         padding-left: 24px;
       }
     </style>
-    <script type="text/javascript">
-      function switch_css(css) {
-        document.getElementsByTagName("link")[0].href = "vendor/" + css + ".min.css";
-      }
-    </script>
+    <script src="switcher.js" type="text/javascript"></script> 
   </head>
   <body>
     <div id="top" class="page" role="document">
       <header role="banner">
         <h1>Drop-in Minimal CSS</h1>
-        <p>This page provides an overview of barebones drop-in minimal CSS boilerplate frameworks. For more information, and links to all the frameworks seen here, visit the project page on <a href="https://github.com/dohliam/dropin-minimal-css">GitHub</a>.</p>
+        <p>This page provides an overview of barebones drop-in minimal CSS boilerplate frameworks. To switch to a different stylesheet, select one of the frameworks from the dropdown menu below. For more information, and links to all the frameworks seen here, visit the project page on <a href="https://github.com/dohliam/dropin-minimal-css">GitHub</a>.</p>
 
-    <select name="somename" id="someid" accesskey='a' onchange="switch_css(this.value)">
-      <option value="bullframe">Bullframe CSS</option>
-      <option value="caiuss">Caiuss CSS</option>
-      <option value="kathamo">Kathamo CSS</option>
-      <option value="kube">Kube CSS</option>
-      <option value="lotus">Lotus CSS</option>
-      <option value="motherplate">Motherplate CSS</option>
-      <option value="milligram">Milligram CSS</option>
-      <option value="min">Min CSS</option>
-      <option value="monalisa">Monalisa CSS</option>
-      <option value="normalize">Normalize CSS</option>
-      <option value="ohmycss">Oh-my-css CSS</option>
-      <option value="pure">Pure CSS</option>
-      <option value="sanitize-10up">Sanitize CSS (10up)</option>
-      <option value="sanitize-zdroid">Sanitize CSS (ZDroid)</option>
-      <option value="siimple">Siimple CSS</option>
-      <option value="simple">Simple CSS</option>
-      <option value="skeleton">Skeleton CSS</option>
-      <option value="skeleton-framework">Skeleton-framework CSS</option>
-      <option value="skeleton-plus">Skeleton-plus CSS</option>
-      <option value="tacit">Tacit CSS</option>
-      <option value="thao">Thao CSS</option>
-    </select>
+      <div id="switcher">&nbsp;</div>
+      <script type="text/javascript">inline_switcher();</script>
 
       </header>
       <nav role="navigation">
diff --git a/switcher.js b/switcher.js
new file mode 100644
index 0000000..4babfa0
--- /dev/null
+++ b/switcher.js
@@ -0,0 +1,28 @@
+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";
+
+function switch_css(css) {
+  document.getElementsByTagName("link")[0].href = "vendor/" + css + ".min.css";
+}
+
+function capitalize(s) {
+  u = s.replace(/^(.)/, function(_, l){
+    return l.toUpperCase();
+  });
+  return u;
+}
+
+function inline_switcher() {
+  switcher = document.getElementById("switcher");
+  frameworks_array = frameworks.split(",");
+  select_open = '\n        <select name="switcher_dropdown" id="switcher_dropdown" accesskey="s" onchange="switch_css(this.value)">\n';
+  dropdown = select_open;
+  for (i = 0; i < frameworks_array.length; i++) {
+    f = frameworks_array[i];
+    framework_name = capitalize(f);
+    option = '          <option value="' + f + '">' + framework_name + ' CSS</option>\n';
+    dropdown = dropdown + option;
+  }
+  select_close = '        </select>\n      '
+  dropdown = dropdown + select_close;
+  switcher.innerHTML = dropdown;
+}
diff --git a/vendor/ohmycss.min.css b/vendor/oh-my-css.min.css
similarity index 100%
rename from vendor/ohmycss.min.css
rename to vendor/oh-my-css.min.css
