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
- a11yana by @alexandersandberg (Preview · MIT)
- axist by @ruanmartinelli (Preview · MIT)
- bahunya by @Kimeiga (Preview · MIT)
- bamboo by @rilwis (Preview · MIT)
- bare by @longsien (Preview · MIT)
- base by @matthewhartman (Preview · MIT)
- basic by @vladocar (Preview · MIT)
- bonsai by @ciar4n (Preview · MIT)
- bullframe by @marcop135 (Preview · MIT)
- bulma by @jgthms (Preview · MIT)
- caiuss by @IonicaBizau (Preview · MIT)
- caramel by @Lumios (Preview · MIT)
- cardinal by @cbracco (Preview · MIT)
- centurion by @justinhough (Preview · GPL)
- chota by @jenil (Preview · MIT)
- cirrus by @spiderpig86 (Preview · MIT)
- clmaterial by @24aitor (Preview · MIT)
- codify by @zdroid (Preview · MIT)
- comet by @marcbruederlin (Preview · MIT)
- concise by @ConciseCSS (Preview · MIT)
- concrete by @louismerlin (Preview · MIT)
- cutestrap by @tylerchilds (Preview · GPL)
- flat-ui by @Designmodo (Preview · CC BY & MIT)
- fluidity by @mrmrs (Preview · MIT)
- furtive by @johno (Preview · MIT)
- gd by @hawkz (Preview · MIT)
- generic by @Vereis (Preview · MIT)
- github-markdown by @sindresorhus (Preview · MIT)
- gutenberg by @bafs (Preview · MIT)
- hack by @egoist (Preview · MIT)
- hello by @arp242 (Preview · PD/ISC)
- hiq by @jonathanharrell (Preview · MIT)
- holiday by @EvgenyOrekhov (Preview · MIT)
- html-starterkit by @zitrusfrisch (Preview · MIT)
- hyp by @krszwsk (Preview · MIT)
- kathamo by @debashisbarman (Preview · MIT)
- koochak by @peyman3d (Preview · MIT)
- kraken by @cferdinandi (Preview · MIT)
- kube by @imperavi (Preview · MIT)
- latex by @davidrzs (Preview · MIT)
- lemon by @appalaszynski (Preview · MIT)
- lit by @Ajusa (Preview · MIT)
- lotus by @goatslacker (Preview · MIT)
- markdown by @mrcoles (Preview · MIT)
- marx by @mblode (Preview · MIT)
- material by @daemonite (Preview · MIT)
- materialize by @Dogfalo (Preview · MIT)
- mercury by @wmeredith (Preview · MIT)
- milligram by @cjpatoilo (Preview · MIT)
- min by @owenversteeg (Preview · MIT)
- mini by @Chalarangelo (Preview · MIT)
- minimal by @billyshall (Preview · MIT)
- minimal-stylesheet by @chr15m (Preview · MIT)
- mobi by @xcatliu (Preview · MIT)
- motherplate by @leemunroe (Preview · MIT)
- mu by @BafS (Preview · MIT)
- mui by @amorey (Preview · MIT)
- mvp by @andybrewer (Preview · MIT)
- neat by @codazoda (Preview · MIT)
- new by @3x (Preview · MIT)
- no-class by @davidpaulsson (Preview · MIT)
- normalize by @necolas (Preview · MIT)
- oh-my-css by @egoist (Preview · MIT)
- ok by @andrewh0 (Preview · MIT)
- pandoc-scholar by @pandoc-scholar (Preview · GPL v2)
- paper by @rhyneav (Preview · ISC)
- papier by @alexanderGugel (Preview · MIT)
- pavilion by @getpavilion (Preview · MIT)
- picnic by @FranciscoP (Preview · MIT)
- pico by @picocss (Preview · MIT)
- preface by @cluzier (Preview · MIT)
- primer by @primer (Preview · MIT)
- propeller by @digicorp (Preview · MIT)
- pure by @yahoo (Preview · BSD)
- roble by @violapeter (Preview · MIT)
- sakura by @oxalorg (Preview · MIT)
- sanitize by @csstools (Preview · CC0)
- scooter by @dropbox (Preview · Apache)
- semantic-ui by @Semantic-Org (Preview · MIT)
- shoelace by @claviska (Preview · MIT)
- siimple by @jmjuanes (Preview · MIT)
- simple by @kevquirk (Preview · MIT)
- skeleton by @dhg (Preview · MIT)
- skeleton-framework by @skeleton-framework (Preview · MIT)
- skeleton-plus by @oltdaniel (Preview · MIT)
- snack by @nzbin (Preview · MIT)
- spcss by @susam (Preview · MIT)
- spectre by @picturepan2 (Preview · MIT)
- style by @ungoldman (Preview · ISC)
- stylize by @vasanthv (Preview · MIT)
- tachyons by @tachyons-css (Preview · MIT)
- tacit by @yegor256 (Preview · MIT)
- tent by @ulinaaron (Preview · MIT)
- thao by @Sanfra1407 (Preview · Apache)
- tui by @vinibiavatti1 (Preview · MIT)
- vanilla by @bradleytaunt (Preview · MIT)
- vital by @doximity (Preview · Apache)
- water by @kognise (Preview · MIT)
- wing by @KingPixil (Preview · MIT)
- writ by @causal-agent (Preview · ISC)
- yamb by @runxel (Preview · Blue Oak)
- yorha by @metakirby5 (Preview · MIT)
Theme collections
- asciidoctor-skins by @darshandsoni:
- ads-gazette by @darshandsoni (Preview · MIT)
- ads-medium by @darshandsoni (Preview · MIT)
- ads-notebook by @darshandsoni (Preview · MIT)
- ads-tufte by @darshandsoni (Preview · MIT)
- attri by @raj457036:
- attri-bright-light-green by @raj457036 (Preview · MIT)
- attri-midnight-green by @raj457036 (Preview · MIT)
- attri-dark-forest-green by @raj457036 (Preview · MIT)
- attri-dark-fairy-pink by @raj457036 (Preview · MIT)
- attri-light-fairy-pink by @raj457036 (Preview · MIT)
- awsm by @igoradamenko:
- awsm-default by @igoradamenko (Preview · MIT)
- awsm-black by @igoradamenko (Preview · MIT)
- awsm-bigstone by @igoradamenko (Preview · MIT)
- awsm-gondola by @igoradamenko (Preview · MIT)
- awsm-mischka by @igoradamenko (Preview · MIT)
- awsm-pastelpink by @igoradamenko (Preview · MIT)
- awsm-pearllusta by @igoradamenko (Preview · MIT)
- awsm-tasman by @igoradamenko (Preview · MIT)
- awsm-white by @igoradamenko (Preview · MIT)
- bootswatch by @thomaspark:
- boot-cerulean by @thomaspark (Preview · MIT)
- boot-cosmo by @thomaspark (Preview · MIT)
- boot-cyborg by @thomaspark (Preview · MIT)
- boot-darkly by @thomaspark (Preview · MIT)
- boot-flatly by @thomaspark (Preview · MIT)
- boot-journal by @thomaspark (Preview · MIT)
- boot-lumen by @thomaspark (Preview · MIT)
- boot-paper by @thomaspark (Preview · MIT)
- boot-readable by @thomaspark (Preview · MIT)
- boot-sandstone by @thomaspark (Preview · MIT)
- boot-slate by @thomaspark (Preview · MIT)
- boot-spacelab by @thomaspark (Preview · MIT)
- boot-superhero by @thomaspark (Preview · MIT)
- boot-yeti by @thomaspark (Preview · MIT)
- markdowncss by @johnotander:
- w3c-core by @Bert Bos:
- w3c-chocolate by @Bert Bos (Preview · W3C)
- w3c-midnight by @Bert Bos (Preview · W3C)
- w3c-modernist by @Bert Bos (Preview · W3C)
- w3c-oldstyle by @Bert Bos (Preview · W3C)
- w3c-steely by @Bert Bos (Preview · W3C)
- w3c-swiss by @Bert Bos (Preview · W3C)
- w3c-traditional by @Bert Bos (Preview · W3C)
- w3c-ultramarine by @Bert Bos (Preview · W3C)
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
- CSS Bed by @ubershmekel
- classless-css by @dbohdan
- cleanrmd by @gadenbuie
- awesome-css-frameworks by @troxler
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 Night Owl by Broke For Free at the Free Music Archive
- 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.
Add Minimal stylesheet
This adds Minimal stylesheet to the switcher. It also adds a missing closing bracket :)
Note that Minimal stylesheet doesn't have a license. If you don't want to include it because of that, feel free to close this.
Add "The Missing Style"
This adds "The Missing Style" (https://missing.style/) to the list.
Note: The LICENSE file is currently missing from the repo, but that is the URL it will have when it is added.
Demo does not cover inter-item spacing for description/ordered/unordered lists
Hi!
Cool project, it made me run into okcss — my current favorite — thanks for that! ~I noticed the demo doesn't cover description lists —
<dl>
,<dt>
,<dd>
— are there plans to add that?~Thanks and best, Sebastian
Template should have nested lists
Please included nested lists in the template.
Some frameworks are not handling that properly. So preview will help.
Update bahunya.css
Hi Liam!
I updated bahunya tremendously recently and just wanted to bring the bahunya on this site up to speed.
Feel free to check out the newest one on https://www.hakanalpay.com/bahunya
Cheers, thanks for hosting my framework!
Wrong author for papier
papier
is listed with@baasdesign
as the author. Unless I'm missing something obvious, I don't think that's correct. Think it should be@alexanderGugel
.Adjust formatting of framework list
Revert to previous format (i.e.,
[link to project] by @author ([preview link] · [license link]
). For example:Instead of:
Hopefully this should be a bit clearer, since it seems natural to assume that the project name links to the project website rather than a preview.
Add awsm themes collection
Awsm.css now has multiple different themes, which should be added as a collection:
Add W3C Core Styles
This W3C Core Styles are a collection of CSS stylesheets that have been made available by the W3C for more than two decades:
Included styles:
Horizontal scroll
I don't know if this is the right place to ask, sorry if not.
Most frameworks present horizontal scroll on mobile, which is annoying from a responsiveness perspective, including some that claim to be responsive. Is it because of this particular demo implementation or they aren't really as responsive as they claim to be?
Adding autoplay feature to go through the list of frameworks automati…
Thanks @dohliam for the awesome curated list and the cool switcher javascript. I updated the script slightly here to let user hit a button to automatically cycle through the list of frameworks, making it a lot easier to pick the theme they want.
(I also moved the position of the switcher to absolute position in top right as shown in the screenshot)
Add reference to responsivness
I might or might not have scrolled through the entirety of the list to check whether the stylesheets are responsive or not. Foolishly, I only noted for a few of them the result of my check.
Is there any smarter way to add a mention of whether a stylesheet is responsive or not? Maybe add a (Responsive) next to the ones that are?
index.html: Move to larger video to test if frameworks can handle it.
The video is 1920 x 1080 which means that centered CSS themes will need a special rule to resize the video to fit inside the margin. From early testing only a few of the CSS dropins correctly handle this, awsm.css being one of them.
Here is what it looks like: https://avrma-forks.github.io/dropin-minimal-css/
Add destyle.css
I propose to add https://github.com/nicolas-cusan/destyle.css to the list. It is a reset stylesheet, but as normalize.css is also on the list I thought i give it a try 🤷♂️ . (Full disclosure, I am the author). Thank you!