GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → dohliam → Dropin Minimal Css

dohliam / Dropin Minimal Css

Licence: mit
Drop-in switcher for previewing minimal CSS frameworks

Labels

htmlcsscss-frameworkminimalminimalist

Projects that are alternatives of or similar to Dropin Minimal Css

hyper-rose-pine-next
Hyper Theme - which supports your System Preferences
Stars: ✭ 28 (-97.36%)
Mutual labels:  minimal, minimalist
comet
A minimal and robust BEM-style CSS toolkit.
Stars: ✭ 18 (-98.3%)
Mutual labels:  css-framework, minimalist
akka-cluster-minimal
Akka Cluster - absolute minimal
Stars: ✭ 16 (-98.49%)
Mutual labels:  minimal, minimalist
Components
Example Components (Built with Tonic)
Stars: ✭ 42 (-96.04%)
Mutual labels:  minimal, minimalist
concrete.css
A simple and to the point classless CSS framework
Stars: ✭ 95 (-91.05%)
Mutual labels:  css-framework, minimalist
components
Example Components (Built with Tonic)
Stars: ✭ 62 (-94.16%)
Mutual labels:  minimal, minimalist
Ephesus
Ephesus is a minimalist Jekyll theme, designed for personal blog use.
Stars: ✭ 40 (-96.23%)
Mutual labels:  minimal, minimalist
Snack
🍱 A minimal CSS framework for web.
Stars: ✭ 117 (-88.97%)
Mutual labels:  css-framework, minimal
notion.css
A minimal CSS framework that resembles the aesthetic of the note taking app Notion
Stars: ✭ 28 (-97.36%)
Mutual labels:  minimal, css-framework
milligram-stylus
A minimalist CSS framework on Stylus version.
Stars: ✭ 19 (-98.21%)
Mutual labels:  css-framework, minimalist
koochak
A minimal & lightweight CSS framework
Stars: ✭ 15 (-98.59%)
Mutual labels:  minimal, css-framework
Water.css
A drop-in collection of CSS styles to make simple websites just a little nicer
Stars: ✭ 6,666 (+528.28%)
Mutual labels:  css-framework, minimal
Minimal-Blog
Tailwind CSS Starter Template - Minimal Blog
Stars: ✭ 100 (-90.57%)
Mutual labels:  minimal, minimalist
Launcher
🚀 A distraction-free minimal homescreen for Android.
Stars: ✭ 116 (-89.07%)
Mutual labels:  minimal, minimalist
Boston-Icons
Boston is an exclusive icon theme inspired by functionalist design and a touch of early computer icons. The project is focused on elemental properties, basic shapes, a reduced color palette and visual hierarchy.
Stars: ✭ 106 (-90.01%)
Mutual labels:  minimal, minimalist
siimple
The minimal and themeable CSS toolkit for flat and clean designs
Stars: ✭ 525 (-50.52%)
Mutual labels:  minimal, css-framework
Pico
Graceful & Minimal CSS design system in pure semantic HTML
Stars: ✭ 89 (-91.61%)
Mutual labels:  css-framework, minimal
Milligram
A minimalist CSS framework.
Stars: ✭ 9,568 (+801.79%)
Mutual labels:  css-framework, minimalist
Minimalist-Blog
Tailwind CSS Starter Template - Minimalist Blog
Stars: ✭ 21 (-98.02%)
Mutual labels:  minimal, minimalist
Siimple
The minimal CSS toolkit for flat and clean designs
Stars: ✭ 502 (-52.69%)
Mutual labels:  css-framework, minimal
View All Similar Projects ➔

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].