From 83ffe6bf6921fb195e4cc40945f7f870934ddde9 Mon Sep 17 00:00:00 2001 From: dohliam Date: Fri, 13 Dec 2019 02:41:08 -0800 Subject: [PATCH] readme - reorganize --- README.md | 52 ++++++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 4946b70..952e4db 100644 --- a/README.md +++ b/README.md @@ -6,15 +6,15 @@ This project only includes _minimal_ frameworks, in other words, boilerplate fra * [1 Usage](#usage) * [1.1 Keyboard shortcut](#keyboard-shortcut) + * [1.2 Bookmarklet](#bookmarklet) + * [1.3 API](#api) * [2 Frameworks](#frameworks) * [2.1 Adding frameworks](#adding-frameworks) * [2.2 List of frameworks](#list-of-frameworks) * [2.3 Theme collections](#theme-collections) -* [3 API](#api) -* [4 Bookmarklet](#bookmarklet) -* [5 See also](#see-also) -* [6 Acknowledgements](#acknowledgements) -* [7 License](#license) +* [3 See also](#see-also) +* [4 Acknowledgements](#acknowledgements) +* [5 License](#license) ## Usage @@ -28,11 +28,31 @@ That's it! You should now be able to cycle through the different frameworks by c You can quickly switch between frameworks by pressing the [modifier key or keys on your keyboard](https://github.com/dohliam/xsampa#access-keys) + `s` to focus the switcher dropdown menu, followed by the up and down keys to move up and down the list. +### Bookmarklet + +The Drop-in Minimal CSS 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 +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](https://dohliam.github.io/dropin-minimal-css) to your browser's bookmark bar. + +Boomarklet generated by the [Bookmarklet Creator](http://mrcoles.com/bookmarklet/). Thanks to [markdown-css](https://github.com/mrcoles/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](https://dohliam.github.io/dropin-minimal-css/?sakura). + ## Frameworks ### Adding frameworks -If you know of a minimal framework that hasn't been included here, by all means create an [issue](https://github.com/dohliam/dropin-minimal-css/issues) or [pull request](https://github.com/dohliam/dropin-minimal-css/pulls) so that we can add it to the list! +If you know of a minimal framework that hasn't been included here, please create an [issue](https://github.com/dohliam/dropin-minimal-css/issues) or [pull request](https://github.com/dohliam/dropin-minimal-css/pulls) so that we can add it to the list! ### List of frameworks @@ -124,26 +144,6 @@ If you know of a minimal framework that hasn't been included here, by all means * [Retro](https://github.com/markdowncss/retro) ([MIT](https://github.com/markdowncss/retro/blob/master/LICENSE)) * [Splendor](https://github.com/markdowncss/splendor) ([MIT](https://github.com/markdowncss/splendor/blob/master/LICENSE)) -## API - -There is a simple API available to allow linking 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](https://dohliam.github.io/dropin-minimal-css/?sakura). - -## 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 -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](https://dohliam.github.io/dropin-minimal-css) to your browser's bookmark bar. - -Boomarklet generated by the [Bookmarklet Creator](http://mrcoles.com/bookmarklet/). Thanks to [markdown-css](https://github.com/mrcoles/markdown-css) for the idea! - ## See also * [workflow](https://github.com/dohliam/workflow) - Quick prototyping script for creating rich html and pdfs from markdown documents (based on dropin-minimal-css)