LiveStyle is a tool for live CSS editing, similar to popular LiveReload, CodeKit etc. The idea behind those tools is simple: you edit CSS file in your editor, save it and see how web-page in your browser that contains this stylesheet is automatically refreshed, giving you a visual feedback of changes you just made.
Almost all such live edit tools works in pretty much the same way: they are watching for file updates in given folder, do some additional processing (for example, convert LESS to CSS) and finally update a web-page. Which means you have to save your source file and wait for a few seconds just to see how a single change affects page.
LiveStyle introduces a real-time editing experience: it updates web-page immediately, as-you-type in text editor. Without file saving or page reloading. And this is the first tool able to bring updates from browser DevTools back into source code the right way.
For best live editing experience, LiveStyle integrates directly into browser and code editor. So the very first thing you have to do is to install browser and editor plugins (currently, only Google Chrome and Sublime Text are supported).
The easiest way to do so is to use LiveStyle app:
- Download LiveStyle app for your OS (no Linux support yet, please use manual installation).
- Unpack and run it.
Windows users: When running LiveStyle for the first time, Windows may ask for network access permissions. Please allow network access, it is required to download plugins and for Remote View.
If everything is fine, you’ll see app window like this:
LiveStyle app shows available plugins and their installation status, as well as Remote View sessions list. Click on “Install” buttons to run installation process.
When both browser and editor plugins are installed, you can close LiveStyle app: you’ll need it only for Remote View feature.
If you experience issues with downloading and running LiveStyle app, you can try manual installation.
Google Chrome plugin
- In Chrome, go to LiveStyle WebStore page.
- Click on Add to Chrome button in the upper right corner:
When installed, you’ll see a LiveStyle icon in Chrome toolbar:
Sublime Text plugin
The easiest way to install Sublime Text plugin is via Package Control. This is a preferred way to install Sublime Text plugins: Package Control will manage all installation process and automatic updates for you.
- Install Package Control as described (if you didn’t installed it yet).
- In Sublime Text, pick
Tools > Command Palette...menu item.
- In opened dialog, type
install packageto find
Package Control: Install Packagemenu item. Select it with arrow keys and hit Enter.
- Wait for a few seconds while Package Control loads list of available packages.
- When loaded, you’ll see a dialog window with list of available packages. Type
livestyleto find LiveStyle package and hit Enter.
In a moment LiveStyle plugin will be installed. You may want to restart Sublime Text to ensure that everything works fine.
Manual installation of Sublime Text plugin
If you can’t or don’t want to use Package Control, you can try a completely manual installation:
- In Sublime Text, pick
Preferences > Browse Packages...menu item. It will open
Packagesfolder in your file browser.
LiveStylefolder in opened
- Download and unpack plugin code archive into newly created
- In the end, your file structure should look like this:
- Restart Sublime Text.
Atom plugin is available for beta-testing so it must be installed manually (no installation from LiveStyle app yet).
- In Atom, go to
Preferences > Install.
- Search for
livestyle-atomplugin and install it.
Or you can install it via
apm install livestyle-atom