Getting started

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.

Installation

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:

  1. Download LiveStyle app for your OS (no Linux support yet, please use manual installation).
  2. 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

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.

Manual installation

If you experience issues with downloading and running LiveStyle app, you can try manual installation.

Google Chrome plugin

  1. In Chrome, go to LiveStyle WebStore page.
  2. Click on Add to Chrome button in the upper right corner:

image

When installed, you’ll see a LiveStyle icon in Chrome toolbar:

image

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.

  1. Install Package Control as described (if you didn’t installed it yet).
  2. In Sublime Text, pick Tools > Command Palette... menu item.
  3. In opened dialog, type install package to find Package Control: Install Package menu item. Select it with arrow keys and hit Enter. image
  4. Wait for a few seconds while Package Control loads list of available packages.
  5. When loaded, you’ll see a dialog window with list of available packages. Type livestyle to find LiveStyle package and hit Enter. image

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:

  1. In Sublime Text, pick Preferences > Browse Packages... menu item. It will open Packages folder in your file browser.
  2. Create LiveStyle folder in opened Packages one.
  3. Download and unpack plugin code archive into newly created LiveStyle folder.
  4. In the end, your file structure should look like this: image
  5. Restart Sublime Text.

Atom plugin

Atom plugin is available for beta-testing so it must be installed manually (no installation from LiveStyle app yet).

  1. In Atom, go to Preferences > Install.
  2. Search for livestyle-atom plugin and install it.

Or you can install it via apm:

apm install livestyle-atom