dropin-minimal-css/README.md

# Drop-in switcher for previewing minimal CSS frameworks

This is a quick drop-in CSS switcher to allow for previewing some of the many minimal CSS-only frameworks that are available. See the [demo](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 together with your content.

This project only includes _minimal_ frameworks, in other words, boilerplate frameworks that require no adjustment of the corresponding HTML and can be simply dropped into the project to provide a starting point for further design. No additional javascript, compiling, pre-processors, or fiddling with classes should be required for these to look good and be responsive.

## Usage

To use the CSS switcher, just add the following line anywhere within the body tag on your page:

        <script src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>

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.

## Adding frameworks

If you know of a minimal framework that hasn't been included here, by all means create an [issue](https://github.com/dohliam/dropin-minimal-css/issues) or [pull request](https://github.com/dohliam/dropin-minimal-css/pulls) so that we can add it to the list!

## List of frameworks
* [awsm](https://github.com/igoradamenko/awsm.css) by @igoradamenko ([MIT](https://github.com/igoradamenko/awsm.css/blob/master/LICENSE.md))
* [base](https://github.com/matthewhartman/base) by @matthewhartman ([MIT](https://github.com/matthewhartman/base#license))
* [bullframe](https://github.com/marcopontili/bullframe.css) by @marcopontili ([MIT](http://opensource.org/licenses/MIT))
* [bulma](https://github.com/jgthms/bulma) by @jgthms ([MIT](https://github.com/jgthms/bulma/blob/master/LICENSE))
* [caiuss](https://github.com/IonicaBizau/CaiuSS) by @IonicaBizau ([MIT](http://showalicense.com/?fullname=Ionic%C4%83%20Biz%C4%83u%20%3Cbizauionica%40gmail.com%3E%20(http%3A%2F%2Fionicabizau.net)&year=2015#license-mit))
* [caramel](https://github.com/lumios/caramel) by Lumios ([MIT](https://github.com/lumios/caramel/blob/master/LICENSE))
* [cardinal](https://github.com/cardinalcss/cardinalcss) by @cbracco ([MIT](https://github.com/cardinalcss/cardinalcss/blob/master/LICENSE.md))
* [concise](https://github.com/ConciseCSS/concise.css) by ConciseCSS ([MIT](https://github.com/ConciseCSS/concise.css/blob/master/LICENSE))
* [flat-ui](https://github.com/designmodo/Flat-UI) by Designmodo ([CC BY & MIT](https://github.com/designmodo/Flat-UI#copyright-and-license))
* [furtive](https://github.com/johnotander/furtive) by @johnotander ([MIT](https://github.com/johnotander/furtive/blob/master/LICENSE))
* [html-starterkit](https://github.com/zitrusfrisch/HTML-StarterKit) by @zitrusfrisch ([MIT](https://github.com/zitrusfrisch/HTML-StarterKit#its-free))
* [kathamo](https://github.com/kathamo/Kathamo) by @debashisbarman ([MIT](https://github.com/kathamo/Kathamo/blob/master/LICENSE))
* [kraken](https://github.com/cferdinandi/kraken) by @cferdinandi ([MIT](https://github.com/cferdinandi/kraken/blob/master/LICENSE.md))
* [kube](https://github.com/imperavi/kube) by @imperavi ([MIT](https://github.com/imperavi/kube/blob/master/LICENSE))
* [lotus](https://github.com/goatslacker/lotus.css) by @goatslacker ([MIT](https://github.com/goatslacker/lotus.css#license))
* [markdown-css](https://github.com/mrcoles/markdown-css) by @mrcoles ([MIT](https://github.com/mrcoles/markdown-css/blob/master/license.txt))
* [milligram](https://github.com/milligram/milligram) by @cjpatoilo ([MIT](http://cjpatoilo.mit-license.org/))
* [min](https://github.com/owenversteeg/min) by @owenversteeg ([MIT](https://github.com/owenversteeg/min#license))
* [mini](https://github.com/Chalarangelo/mini.css) by @Chalarangelo ([MIT](https://github.com/Chalarangelo/mini.css/blob/master/LICENSE))
* [motherplate](https://github.com/leemunroe/motherplate) by @leemunroe ([MIT](https://github.com/leemunroe/motherplate/blob/master/LICENSE))
* [mui](https://github.com/muicss/mui) by @amorey ([MIT](https://github.com/muicss/mui/blob/master/LICENSE.txt))
* [normalize](https://github.com/necolas/normalize.css) by @necolas ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
* [oh-my-css](https://github.com/egoist/oh-my-css) by @egoist ([MIT](https://github.com/egoist/oh-my-css/blob/gh-pages/LICENSE))
* [papier](https://github.com/alexanderGugel/papier) by @baasdesign ([MIT](https://github.com/alexanderGugel/papier/blob/master/LICENSE.md))
* [pavilion](https://github.com/getpavilion/pavilion) by @baasdesign ([MIT](https://github.com/getpavilion/pavilion/blob/master/license))
* [picnic](https://github.com/picnicss/picnic) by @FranciscoP ([MIT](https://github.com/picnicss/picnic/blob/master/LICENSE))
* [pure](https://github.com/yahoo/pure/) by @yahoo ([BSD](https://github.com/yahoo/pure/blob/master/LICENSE.md))
* [sanitize](https://github.com/10up/sanitize.css) by @10up ([PD](https://github.com/10up/sanitize.css/blob/master/LICENSE.md))
* [sanitize](https://github.com/ZDroid/sanitize.css) by @ZDroid ([MIT](https://github.com/ZDroid/sanitize.css/blob/master/LICENSE.md))
* [semantic-ui](https://github.com/semantic-org/semantic-ui) by Semantic-Org ([MIT](https://github.com/Semantic-Org/Semantic-UI/blob/master/LICENSE.md))
* [siimple](https://github.com/siimple/siimple) by @jmjuanes ([MIT](https://github.com/siimple/siimple/blob/master/LICENSE.md))
* [simplecss](https://github.com/neculaesei/simplecss) by @neculaesei ([MIT](http://opensource.org/licenses/mit-license.php))
* [skeleton](https://github.com/dhg/Skeleton) by @dhg ([MIT](https://github.com/dhg/Skeleton/blob/master/LICENSE.md))
  * [skeleton-framework](https://github.com/skeleton-framework/skeleton-framework) by skeleton-framework ([MIT](https://github.com/skeleton-framework/skeleton-framework/blob/master/LICENSE))
  * [skeleton-plus](https://github.com/oltmannsdaniel/skeleton-plus) by @oltmannsdaniel ([MIT](https://github.com/oltmannsdaniel/skeleton-plus/blob/master/LICENSE))
* [spectre](https://github.com/picturepan2/spectre) by @picturepan2 ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE))
* [tachyons](https://github.com/tachyons-css/tachyons/) by tachyons-css ([MIT](https://github.com/tachyons-css/tachyons/blob/master/license))
* [tacit](https://github.com/yegor256/tacit) by @yegor256 ([MIT](https://github.com/yegor256/tacit/blob/master/LICENSE))
* [tent](https://github.com/sitetent/tentcss) by @ulinaaron ([MIT](https://github.com/sitetent/tentcss/blob/master/LICENSE))
* [thao](https://github.com/ThaoFramework/Thao/) by Giuseppe Sanfrancesco ([Apache](http://www.apache.org/licenses/LICENSE-2.0))
* [vital](https://github.com/doximity/vital) by @doximity ([Apache](https://github.com/doximity/vital/blob/master/LICENSE.md))
* [wing](https://github.com/KingPixil/wing/) by @KingPixil ([MIT](https://github.com/KingPixil/wing/blob/master/LICENSE))

### Theme collections

* [asciidoctor-skins](https://github.com/darshandsoni/asciidoctor-skins) by @darshandsoni ([MIT](https://github.com/darshandsoni/asciidoctor-skins/blob/gh-pages/LICENSE))
  * Including [Gazette](https://darshandsoni.com/asciidoctor-skins/?gazette), [Medium](https://darshandsoni.com/asciidoctor-skins/?medium), [Notebook](https://darshandsoni.com/asciidoctor-skins/?notebook), and [Tufte](https://darshandsoni.com/asciidoctor-skins/?tufte) themes
* [bootswatch](https://github.com/thomaspark/bootswatch/) by @thomaspark ([MIT](https://github.com/thomaspark/bootswatch/blob/gh-pages/LICENSE))
  * Including [Cerulean](https://bootswatch.com/cerulean/), [Cosmo](https://bootswatch.com/cosmo/), [Cyborg](https://bootswatch.com/cyborg/), [Darkly](https://bootswatch.com/darkly/), [Flatly](https://bootswatch.com/flatly/), [Journal](https://bootswatch.com/journal/), [Lumen](https://bootswatch.com/lumen/), [Paper](https://bootswatch.com/paper/), [Readable](https://bootswatch.com/readable/), [Sandstone](https://bootswatch.com/sandstone/), [Slate](https://bootswatch.com/slate/), [Spacelab](https://bootswatch.com/spacelab/), [Superhero](https://bootswatch.com/superhero/), and [Yeti](https://bootswatch.com/yeti/) themes

## Bookmarklet

You can now try out the experimental dropin-css bookmarklet. Just paste the following code into your address bar to create a CSS switcher for any site:

```javascript
javascript:(function()%7Bvar%20body%20%3D%20document.getElementsByTagName('body')%5B0%5D%3Bscript%20%3D%20document.createElement('script')%3Bscript.type%3D%20'text%2Fjavascript'%3Bscript.src%3D%20'https%3A%2F%2Fdohliam.github.io%2Fdropin-minimal-css%2Fswitcher.js'%3Bbody.appendChild(script)%7D)()
```

Or alternatively, drag the link at the top of the [demo page](https://dohliam.github.io/dropin-minimal-css) to your browser's bookmark bar.

Boomarklet generated by the [Bookmarklet Creator](http://mrcoles.com/bookmarklet/). Thanks to [markdown-css](https://github.com/mrcoles/markdown-css) for the idea!

## Acknowledgements

* Sample HTML5 markup based on [html5-test-page](https://github.com/cbracco/html5-test-page) by @cbracco (MIT)
* Example images in the demo are by [MichaelMaggs](https://commons.wikimedia.org/wiki/User:MichaelMaggs) on [Wikimedia Commons](https://commons.wikimedia.org)
* Example videos provided by the [Blender Foundation](https://peach.blender.org/) via the [HTML5-Test-Videos](https://github.com/benhosmer/HTML5-Test-Videos) project
* Embedded audio by [John Pazdan](http://ccmixter.org/files/flatwound/14476) at [ccMixter](http://ccmixter.org/files/flatwound/14476)
* Special thanks to [Tacit CSS](https://github.com/yegor256/tacit), which was the original inspiration for making this list to answer the question "Where can I find more frameworks like Tacit?"

## LICENSE

MIT.