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 / classless 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.

    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.

    Bookmarklet

    The bookmarklet is a convenient way to preview how different CSS frameworks would look on any HTML page. 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!

    API

    There is a simple API available to allow linking directly to particular stylesheets on the demo page. For example:

    https://dohliam.github.io/dropin-minimal-css/?sakura

    The above links directly to the demo with Sakura CSS.

    Frameworks

    Adding frameworks

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

    List of frameworks

    Theme collections

    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)

    Other similar collections

    Acknowledgements

    License

    MIT.

    项目简介

    Drop-in switcher for previewing minimal CSS frameworks

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/dohliam/dropin-minimal-css

    发行版本

    当前项目没有发行版本

    贡献者 9

    开发语言

    • CSS 99.6 %
    • HTML 0.3 %
    • Ruby 0.1 %
    • JavaScript 0.1 %