Preview minimal CSS frameworks with this drop-in switcher
source link: https://github.com/dohliam/dropin-minimal-css
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 orinto your own page to see howwould 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
- a11yana by @alexandersandberg ( Source · MIT )
- awsm by @igoradamenko ( Source · MIT )
- bahunya by @Kimeiga ( Source · MIT )
- bare by @longsien ( Source · MIT )
- base by @matthewhartman ( Source · MIT )
- bullframe by @marcop135 ( Source · MIT )
- bulma by @jgthms ( Source · MIT )
- caiuss by @IonicaBizau ( Source · MIT )
- caramel by Lumios ( Source · MIT )
- cardinal by @cbracco ( Source · MIT )
- chota by @jenil ( Source · MIT )
- clmaterial by @24aitor ( Source · MIT )
- comet by @marcbruederlin ( Source · MIT )
- concise by ConciseCSS ( Source · MIT )
- concrete by @louismerlin ( Source · MIT )
- flat-ui by Designmodo ( Source · CC BY & MIT )
- fluidity by @mrmrs ( Source · MIT )
- furtive by @johnotander ( Source · MIT )
- generic by @Vereis ( Source · MIT )
- github-markdown by @sindresorhus ( Source · MIT )
- hack by @egoist ( Source · MIT )
- holiday by @EvgenyOrekhov ( Source · MIT )
- html-starterkit by @zitrusfrisch ( Source · MIT )
- hyp by @krszwsk ( Source · MIT )
- kathamo by @debashisbarman ( Source · MIT )
- koochak by @peyman3d ( Source · MIT )
- kraken by @cferdinandi ( Source · MIT )
- kube by @imperavi ( Source · MIT )
- latex by @davidrzs ( Source · MIT )
- lemon by @appalaszynski ( Source · MIT )
- lit by @Ajusa ( Source · MIT )
- lotus by @goatslacker ( Source · MIT )
- markdown by @mrcoles ( Source · MIT )
- marx by @mblode ( Source · MIT )
- materialize by @Dogfalo ( Source · MIT )
- mercury by @wmeredith ( Source · MIT )
- milligram by @cjpatoilo ( Source · MIT )
- min by @owenversteeg ( Source · MIT )
- mini by @Chalarangelo ( Source · MIT )
- mobi by @xcatliu ( Source · MIT
- motherplate by @leemunroe ( Source · MIT )
- mu by @BafS ( Source · MIT )
- mui by @amorey ( Source · MIT )
- mvp by @andybrewer ( Source · MIT )
- no-class by @davidpaulsson ( Source · MIT )
- normalize by @necolas ( Source · MIT )
- oh-my-css by @egoist ( Source · MIT )
- paper by @rhyneav ( Source · ISC )
- papier by @baasdesign ( Source · MIT )
- pavilion by @baasdesign ( Source · MIT )
- picnic by @FranciscoP ( Source · MIT )
- preface by @cluzier ( Source · MIT )
- primer by GitHub Inc. ( Source · MIT )
- pure by @yahoo ( Source · BSD )
- sakura by @oxalorg ( Source · MIT )
- sanitize-10up by @10up ( Source · PD )
- sanitize-zdroid by @ZDroid ( Source · MIT )
- semantic-ui by Semantic-Org ( Source · MIT )
- shoelace by @claviska ( Source · MIT )
- siimple by @jmjuanes ( Source · MIT )
- simple by @neculaesei ( Source · MIT )
-
skeleton
by @dhg ( Source
· MIT
)
- skeleton-framework by skeleton-framework ( Source · MIT )
- skeleton-plus by @oltmannsdaniel ( Source · MIT )
- snack by @nzbin ( Source · MIT )
- spectre by @picturepan2 ( Source · MIT )
- style by @ungoldman ( Source · ISC )
- stylize by @vasanthv ( Source · MIT )
- tachyons by tachyons-css ( Source · MIT )
- tacit by @yegor256 ( Source · MIT )
- tent by @ulinaaron ( Source · MIT )
- thao by Giuseppe Sanfrancesco ( Source · Apache )
- vanilla by @bradleytaunt ( Source · MIT )
- vital by @doximity ( Source · Apache )
- water by @kognise ( Source · MIT )
- wing by @KingPixil ( Source · MIT )
- writ by @programble ( Source · ISC )
- yorha by @metakirby5 ( Source · MIT )
Theme collections
- asciidoctor-skins by @darshandsoni ( MIT )
- bootswatch by @thomaspark ( MIT )
- markdowncss by @johnotander:
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.
Recommend
-
6
News ASP.NET Core Furthers Minimal API Work in .NET 7 Preview 3 By
-
49
PHP MVC Frameworks preview of 2018 (Phalcon 3, Symfony 4, Laravel 5.x and others)
-
272
iOS 11.1 Beta 2 Brings Back 3D Touch App SwitcherMonday October 9, 2017 10:51 am PDT by Juli CloverIn the se...
-
147
Color scheme switcher for Vim The colorscheme switcher plug-in for the [Vim text editor] vim makes it easy to quickly switch between [colorschemes]
-
269
Apple Releases iOS 11.1 With New Emoji, 3D Touch App Switcher, and MoreApple Releases iOS 11.1 With New Emoji, 3D Touch App Switcher, and MoreTuesday October 31, 2017 9:57 am PDT by
-
103
Language switcher package for Laravel This package allows switching locale easily on Laravel projects. It's so simple to use, once it's installed, your App locale will change only by passing routes into SetLanguage middleware.
-
74
ChromeLikeTabSwitcher - README THIS LIBRARY IS STILL WORK IN PROGRESS. THE LAYOUT OPTIMIZED FOR TABLETS IS NOT IMPLEMENTED YET. "ChromeLikeTabSwitcher" is an Android-library, which provides a tab switcher similar to the on...
-
90
chruby.el Emacs support for Chruby. It works identical to the shell command, after placing chruby.el in your load-path you can (require 'chruby) (chruby "jruby-1.7.2") Interactively, either call...
-
54
TiltedTabView - iOS control to replicate the tab switcher in Safari for iOS.
-
112
README.org ___ ___ ___ ___ ___ ___ ___ / /\ /__/\ / /\ /__/\ / /\ / /\ / /\...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK