WordPress, netbeans, bootstrap, less

This post is all about me trying to set up this wordpress site using bootstrap and the core less files, with netbeans as the IDE. I’m using Netbeans 7.4, WordPress 3.7 and LESS.

Because I’m using windows, I used Duncan Smarts excellent compiler. So, in netbeans, I set up the project. I was originally using twentythirteen as the base theme but there were some things I didn’t like about it. For one thing, the twentythirteen theme puts all of the responsive stuff at the end of the style.css file, which to me is quite counter-intuitive. You constantly have to move around the document when styling the same elements. By using bootstrap 3 and its core less files, you can define how page elements appear from the markup side rather than the css. This may go against some stuff here, but I’ve found that having the ability to determine the layout of elements at different device sizes from the markup makes things pretty straight-forward. It also means that you can instantly see how your page should render at different resolutions without having to refer to the css.

Setting up the theme

For this, I set up style.less inside the themes/twentythirteen/css folder. I set up a bootstrap folder that contained all the core less files. The main style.less file pulls in only the files that I needed and then adds the extra wordpress stuff after that. Netbeans less styleI then set up netbeans to compile only /themes/css on save, which pulls in everything else.
So that the css is nicely minified for production, use the –yui-compress and –verbose filters from the netbeans filter text box.

Netbeans less compile options

With these settings in place, any time I edit any of the less files that are referenced from style.less, its re-compiled.

There’s lots of other bits to netbeans that I’m not using and would probably help, like the integrated browser that can show updates instantly when you change source files, but for now, just using ff seems the most natural thing to do.

After that initial set up, it was just a case of going through the twentythirteen theme and copying over or deleting bits I didn’t need.

 

Leave a Reply