Emmet LiveStyle is a plugin for live bi-directional (editor↔browser) CSS editing of new generation. Currently, it works in Google Chrome, Safari and Sublime Text, more browsers and editors will be available later.
What is Emmet LiveStyle?
Emmet (Previous ZenCoding) is an awesome package for Sublime Text that speeds up your HTML & CSS workflow. They have a couple of advanced features as well (Like bit64 encoding of images), but their new feature, LiveStyle, really takes it to the next level.
LiveStyle is another tool for making designing in the browser easier. Think somewhere in-between Chrome Dev Tools and LiveReload. LiveStyle allows you to do truly live editing using your favorite editor instead of the Dev Tools in the browser. If you’re wondering why this is better than just using the dev tools, or just using your editor with something like LiveReload or Codekit, consider this scenario:
A basic use case
You’re working on the header design for a page. You open up the page in Chrome, activate Emmet’s LiveStyle feature and pop open a new CSS file in Sublime Text. Now you start flushing out the styles in Sublime Text, using all your favorite snippets and emmet shortcuts, which is must faster than editing in the dev tools. Then you start tweaking the header text color and try out #333, #444 and, heck, maybe even #555. #444 is close to what you want, but not perfect, so you switch over to Chrome Dev Tools (Which has been updated with all the changes you added in Sublime Text), take the color picker and use the graphical interface to pick the perfect color: #bada55.
You switch back over to Sublime and the color variable has been updated automatically. This is what LiveStyle can do, and it’s frickin’ brilliant once you make it part of your workflow. It doesn’t try to replace either Chrome Dev Tools or live reloading. It makes them come together in a way that takes the best from both worlds.
LiveStyle does more than just connecting the Dev Tools with your editor though, it also has the following features:
- Multi-view and multi-device updates. You can open the same page in different windows and get instant updates in all of them. If your monitor large enough, you can easily tweak responsive design as never before! And yes, changes made in DevTools of one window will be automatically applied to other ones.
- Multi-site update. You can even live edit different web-sites, for example, desktop and mobile versions of you web-site that shares the same CSS code base.
It’s cross browser, cross device and cross platform, so it will work on your setup if you’re on windows too, and you will get the live updates on your smartphone and any other browser windows that you have open.