We’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.
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.