Use livestyle to get live feedback while keeping all your interaction in your favorite editor. Effective usage parrterns spotted so far:
- Styling parts of webapplications that require several clicks to set the state that you are styling
- Getting instant feedback from many browsers at the same time
- Testing several media queries at the same time with different devices or browser sizes
Livestyle installs an executable script on your system called
For quick and dirty usage just change directory to your desired document root and type
The server will now listen on port 3000.
SYNOPSIS livestyle [OPTIONS] [DIRECTORY] OPTIONS -p Port the web server should liten on. Defaults to 3000 DIRECTORY Document root of the web server. Defaults to your current working directory
Livestyle depends on NodeJS. Installation files can be found here: http://nodejs.org/dist/latest/
See this page for installation instructions: https://github.com/joyent/node/wiki/Installation
I recommend installing node without needing superuser access by configuring your installation with
./configure --prefix=~/.local before you make.
Also remember to put node in your
When you have NodeJS run the following command:
npm install -g livestyle
And you are done.
Currently there are some troubles with updating stylesheets using @import in IE, which you want to avoid anyway http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Since livestyle watches the css files that are actually served to the browser, livestyle work with any CSS preprocessor that runs on the server out of the box. If you want live updates you will of course need to enable your preprocessors option to automatically build a new CSS files for each file update. livestyle will then detect the update in the built file and push it to the client.
There are two CSS preprocessors that run in the browser, which is a bit of a special case:
Prefixfree inserts vendor prefixes for the style properties that need them. It does this runtime in the browser by fetchin the stylesheet content thourhg XHR and replace the link tags with a style block with prefixed CSS. Livestyle now supports prefixfree.
Less.js injects preprocessed style into the page by loading .less files and reworking the content to real CSS. Livestyle supports live updates using Less.js by refreshing all less stylesheets on the page.