Vogue

Auto-reload stylesheets whenever CSS files are saved.

Created by Andrew Davey

Do you create websites?

Are you tired of constantly editing CSS, switching to your browser, reloading to see the changes and then doing that over and over?

Vogue removes this hassle.

As soon as you save changes to a CSS file, Vogue tells any web browsers using it to reload the stylesheet. Only the stylesheet is reloaded, not the full page. Vogue works in all browsers and even multiple browsers at the same time!

Watch this 2-minute screencast showing a better life with Vogue.

Install

You will need to have NodeJS and npm installed.

Install vogue with:

$ npm install vogue -g

Yep, that's it.

Usage

Start the Vogue HTTP server by running this:

$ vogue path/to/website

View http://localhost:8001/ to see how to enable Vogue in your web pages. Basically, add this into your HTML:

<script src="http://localhost:8001/vogue-client.js" 
        type="text/javascript">
</script>

You can either add it manually, or use the bookmarklet, found on http://localhost:8001/, to inject the script.

Run your website's own local server (Vogue does not host your website - just it's own small bit of magic).

View your website in a web browser. Then open its CSS files in your favorite editor. Make a change and save. The change will be immediately reflected in the browser!

Finally, follow Andrew on Twitter and tell him what you think about Vogue!

Fork me! That's some tasty open source

Vogue is built on buzzword-compliant, open source projects such as NodeJS, npm, socket.io, et al.

Therefore Vogue is also open source (MIT License). Head over to GitHub to get the code:

github.com/andrewdavey/vogue

You can also clone the project with Git by running:

$ git clone git://github.com/andrewdavey/vogue