Modern Media

live | digital | social

piglet is avidly watching LESS files

Web Development: Fork this Piglet on GitHub

Twitter BootstrapWe’re doing a lot of WordPress theming these days — and that means using Twitter Bootstrap to make everything show up well on iPhones and iPads. If you’ve worked with us recently on a digital project or conference web site, odds are you’re tired of hearing us lecture you about how important it is for your web site to have a responsive design. In some cases, we’re even asking you to make front-end design compromises in order to make sure that users can interact with your site on all of their devices.

But I digress. Like most developers, I’m always looking for shortcuts, and today I’m sharing one I created to make it easier to compile code when working with Twitter Bootstrap. If you’re a developer, you can download this and hopefully make your life easier. If you’re not a developer, you may want to pass it along to someone who is.

Bootstrap is a front end framework that provides sensible CSS (stylesheet) defaults (and Javascript components) for responsive web design.  The CSS – both the CSS we write and the CSS included in Bootstrap – is written in LESS, a language that allows you to write and reuse styles concisely (concise, reusable code is always good.) It compiles down to  regular CSS — the thing that tells your browser what this page looks like. (Or should look like — we haven’t updated it a while.)

You can use Bootstrap as is: just download the minified css and include it in your template.  But to do anything fancy, you need to compile a whole bunch of LESS files from the command line.  This adds an inconvenient step to front end development. Writing regular CSS I’d be doing this about 1,000 times a day:

  • Make a change to style.css
  • Refresh browser

Writing LESS means doing this 1,000 times a day:

  • Make a change to style.less
  • Go to the command line and do recess --compress less/mmepbase.less > css/mmepbase.css
  • Wait a couple of seconds
  • Refresh browser
  • Forget what minor change I just made

After a few days of this I got fed up and wrote a command line script in node.js to try to automate the process. I called him piglet. He was over-engineered. He was slow. He was dumb.

So I went back to the old methodology for a while, got fed up again, and rewrote piglet to be a smarter, faster animal. Piglet now:

  • Watches a directory full of LESS files for changes, thus taking out the command line step
  • When a change happens, compiles one minified CSS file
  • Uses lessc, the LESS compiler, by default rather than recess, which does a lot of code checking and is therefore slower

The best thing is that he can compile faster than I can switch from my editor to the browser and hit refresh.

There are other ways to accomplish the same thing, including using the less.js javascript to interpet less files in the browser, but I prefer piglet. He has a lot of other good qualities.  You can clone or fork him on GitHub (plus find out more about how to use him and some best practices for setting up Bootstrap projects) here: https://github.com/cdcarson/piglet