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 or drop the switcher into your own page to see how different 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.

• 1 Usage
  • 1.1 Keyboard shortcut
• 2 Frameworks
  • 2.1 Adding frameworks
  • 2.2 List of frameworks
  • 2.3 Theme collections
• 3 Bookmarklet
• 4 See also
• 5 Acknowledgements
• 6 License

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.

Keyboard shortcut

You can quickly switch between frameworks by pressing the modifier key or keys on your keyboard + s to focus the switcher dropdown menu, followed by the up and down keys to move up and down the list.

Frameworks

Adding frameworks

If you know of a minimal framework that hasn't been included here, by all means create an issue or pull request so that we can add it to the list!

List of frameworks

• awsm by @igoradamenko (MIT)
• base by @matthewhartman (MIT)
• bullframe by @marcopontili (MIT)
• bulma by @jgthms (MIT)
• caiuss by @IonicaBizau (MIT)
• caramel by Lumios (MIT)
• cardinal by @cbracco (MIT)
• concise by ConciseCSS (MIT)
• flat-ui by Designmodo (CC BY & MIT)
• furtive by @johnotander (MIT)
• hack by @egoist (MIT)
• html-starterkit by @zitrusfrisch (MIT)
• kathamo by @debashisbarman (MIT)
• kraken by @cferdinandi (MIT)
• kube by @imperavi (MIT)
• lit by @Ajusa (MIT)
• lotus by @goatslacker (MIT)
• markdown-css by @mrcoles (MIT)
• marx by @mblode (MIT)
• milligram by @cjpatoilo (MIT)
• min by @owenversteeg (MIT)
• mini by @Chalarangelo (MIT)
• motherplate by @leemunroe (MIT)
• mui by @amorey (MIT)
• normalize by @necolas (MIT)
• oh-my-css by @egoist (MIT)
• papier by @baasdesign (MIT)
• pavilion by @baasdesign (MIT)
• picnic by @FranciscoP (MIT)
• pure by @yahoo (BSD)
• sakura by @oxalorg (MIT)
• sanitize by @10up (PD)
• sanitize by @ZDroid (MIT)
• semantic-ui by Semantic-Org (MIT)
• shoelace by @claviska (MIT)
• siimple by @jmjuanes (MIT)
• simplecss by @neculaesei (MIT)
• skeleton by @dhg (MIT)
  • skeleton-framework by skeleton-framework (MIT)
  • skeleton-plus by @oltmannsdaniel (MIT)
• spectre by @picturepan2 (MIT)
• tachyons by tachyons-css (MIT)
• tacit by @yegor256 (MIT)
• tent by @ulinaaron (MIT)
• thao by Giuseppe Sanfrancesco (Apache)
• vital by @doximity (Apache)
• wing by @KingPixil (MIT)

Theme collections

• asciidoctor-skins by @darshandsoni (MIT)
  • Including Gazette, Medium, Notebook, and Tufte themes
• bootswatch by @thomaspark (MIT)
  • Including Cerulean, Cosmo, Cyborg, Darkly, Flatly, Journal, Lumen, Paper, Readable, Sandstone, Slate, Spacelab, Superhero, and 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:(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 to your browser's bookmark bar.

Boomarklet generated by the Bookmarklet Creator. Thanks to markdown-css for the idea!

See also

• workflow - Quick prototyping script for creating rich html and pdfs from markdown documents (based on dropin-minimal-css)
• asciidoctor-skins - CSS stylesheets for asciidoctor (with a switcher based on dropin-minimal-css)

Acknowledgements

• Sample HTML5 markup based on html5-test-page by @cbracco (MIT)
• Example images in the demo are by MichaelMaggs on Wikimedia Commons
• Example videos provided by the Blender Foundation via the HTML5-Test-Videos project
• Embedded audio by John Pazdan at ccMixter
• Special thanks to Tacit CSS, which was the original inspiration for making this list to answer the question "Where can I find more frameworks like Tacit?"
• Table of contents made with tocdown

License

MIT.