Grow your CSS skills. Land your dream job.

#107: LiveReload, a Menu Bar App for Preprocessors and Speedy Development

LiveReload is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is saved, the browser will automatically refresh showing the change. So no need to switch applications and manually refresh, which is awkward and prone to breaking concentration.

Even better, LiveReload can trigger all the preprocessing to happen first. So if you like to work in SASS, Compass, LESS, Jade, CoffeeScript, Eco, HAML, Slim, or Stylus (or would like to try out working with these languages) LiveReload makes it easy. Essentially, just start making files with the appropriate file extention and LiveReload will compile them down to their native language every time the file is saved.

Forgot to mention in the video: LiveReload ships with all the different preprocessor projects baked in. All these projects, LiveReload included, release new versions on different time schedules. I've had luck just cracking open the .app file, digging into the resources, finding individual preprocessor projects, and replacing the files with new versions and having it work great.

Comments

  1. Alfred
    Permalink to comment#

    Do anyone know if there is a similar program for windows?

    • zsitro
      Permalink to comment#

      same question here :)

    • Fredrik
      Permalink to comment#

      While the Windows version of LiveReload is under development you could try XRefresh

      Side note: Ah, the things you find with Spotlight.

  2. Sergei
    Permalink to comment#

    hey Chris, umm, isn’t “developement” spelt “development”?

  3. Jack
    Permalink to comment#

    Will LIVERELOAD work on WordPress files that aren’t local (i.e. server)?

  4. Henry
    Permalink to comment#

    I’m your fan man!!! Thank you soo much!
    Finally i can work with slim in static pages!

  5. Didn’t work for me..

  6. Henry Oliver
    Permalink to comment#

    Hi, i work with STHML files, that the way i use includes. So the LiveReload don’t watch these files.
    Its any configuration that can i do to solve this problem?
    Work fine in my css files, when i saved the page automatically shows the changes, but when i saved my SHTML file nothing happen.

    Thank you;

    • Henry Oliver
      Permalink to comment#

      Hey, sure! When you click the monitoring Options button, you’ll be able to enter additional extensions to monitor.

      Now its works!! :)

  7. Matt Banks
    Permalink to comment#

    Great tips here! Would love to see a screencast on using SASS/LESS with WordPress or another CMS (eg should you compile locally and upload the CSS file, or have Ruby watch the theme directory and compile when changes or uploaded, etc).

  8. supprof
    Permalink to comment#

    ! thank you criss
    how about using custom posts and taxonomy and hooks in wordpress
    thank you

  9. arnold
    Permalink to comment#

    I dont know but you still got audience who uses Windows ??

  10. Permalink to comment#

    awesome! I’m going to be using this for sure!
    I need to learn more about LESS and JADE…
    Chris, please do some videos on these :)

  11. CJ
    Permalink to comment#

    Can you use LiveReload to work locally with WordPress files thru MAMP?

  12. The #BADA55 was a funny touch…

    Funny elements in videos make them more enjoyable and sassy…

  13. Jack
    Permalink to comment#

    Can you use LIVE Reload if your wordpress theme is not running locally but on a server like Media Temple?

  14. Permalink to comment#

    Linux versions would also be greatly appreciated by some people. :)

  15. Sam
    Permalink to comment#

    You really made my day :)

  16. Andrew

    Does LiveReload 2.3.5 still automatically place the icon in the menu bar?

    When I open the app, nothing appears there, so really not sure how to get it to watch folders (this video 1:47s)

    Any thoughts, is it just me :)?

  17. Permalink to comment#

    Live Reload is also available for Windows as a Sublime Text plugin: Live Reload for Sublime Text

  18. Mangat
    Permalink to comment#

    Hello every body,
    I am a new guy to the css-tricks and also for web designing.
    I want to use the dreamweaver
    i need
    tongal menu bar in html and css
    place send me filles

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".