diff --git a/README.md b/README.md index a41ea2b..4de96ad 100644 --- a/README.md +++ b/README.md @@ -5,27 +5,39 @@ This project adds a box and the class names around elements for easier debugging ## How to use it +### Bookmarklet + +A little piece of JavaScript that can be saved as a bookmark in your browser, and then clicked to instantly enable/disable classbxr. + +##### 1. Go to the [CodePen](http://codepen.io/ryanaltvater/pen/eWBKNG) + +##### 2. Drag the button to your bookmarks bar + +##### 3. Enjoy! + +### Installation + It's easy, just load classbxr CDN on your HTML `` and add the `.classbxr` on your `` or any other element. -### 1. Load classbxr CDN +##### 1. Load classbxr CDN ``` ... - + ... ``` -### 2. Add classbxr class to the body +##### 2. Add classbxr class to the body ``` ``` -### 3. Enjoy! +##### 3. Enjoy! ## Contribute to classbxr @@ -34,10 +46,10 @@ You can help improve classbxr by reporting an issue or sending a PR. To build the project locally: 1. Fork and clone this repo. -1. If you don't have [nodejs](https://nodejs.org/en/) installed, go ahead and install it. -1. Once inside your folder run `npm install` -1. Now run `gulp` +2. If you don't have [nodejs](https://nodejs.org/en/) installed, go ahead and install it. +3. Once inside your folder run `npm install` +4. Now run `gulp` A browser window will open with the test page on [http://localhost:3000/](http://localhost:3000/). -Edit the `classbxr.scss` and never the css directly. +Edit the `classbxr.scss` and never the css directly. \ No newline at end of file