A quick pointer on using the Less files (getting started)

1

Hi,
I’ve just started a new website using Roots. This will be a steep learning curve for me as there’s quite a few new concepts that I need to get my head around.

I decided to just put a css Border around everything just so I could see the make-up of the page and how the divs interacted on smaller screens.

I edited the app.less file and added border:1px solid red; into the .content class.

I compiled this with WinLess and it appears as app.css in the css folder and has no effect.

I’m guessing I need to somehow edit the main.min.css but can someone tell me the correct workflow for doing this (basically how I go about making css changes to the site) ?

I’ve had a quick search on the forum but couldn’t find something that detailed it in words of around one syllable (which I could do with!) :wink:

Many thanks for your patience.

Cheers

John :wink:

2

The “official” workflow is to use Grunt. There’s a guide about it here: http://roots.io/using-grunt-for-wordpress-theme-development/ and a screencast ($) here: http://roots.io/screencasts/how-roots-uses-grunt/ if you want to learn about it.

If you just want to skip Grunt and use a different program for compiling LESS like WinLess it looks like you just need to change your output file from the default of app.css to main.min.css (yours won’t be minified but it will still work). Basically your instincts about compiling LESS was correct you just need the proper output file.

1 Like
3

Great info. Many thanks for the speedy response. Will have a look at Grunt.

To be honest I’ve been learning all kinds of stuff in the last week or so. Github, Ajax, jQuery, LESS, SASS… et al. All these things I had never heard of a couple of weeks ago.

I’m comfortable with wordpress, php and css but all this is opening a new world to me.

Unfortunately most of the tuts I’ve looked at with regards to the above topics are conducted on the Mac (a machine that I admit I would love but until my boss decides that I deserve a monstrous raise, it will probably remain out of my reach).

I’m currently learning Sublime Text and have completely changed the way I work on web development (a hobby - not a job). In the interests of furthering my understanding I will delve into the links you’ve provided. Hopefully it isn’t ‘mac only’ territory. Thank you for your help.

Cheers

John :wink:

1 Like
4

As far as using Grunt goes - the commands that Mac users use in the Terminal are the same ones you’d use in the Windows cmd.exe. You can install Node.js on Windows and follow along the screencast ignoring the Mac aspect

1 Like
5

@Johnny_T as @ben says you can do it all on windows.

I run Grunt from a command line. I even use grunt watch and the LiveReload plugin on the chrome browser for auto-reload of pages. I use netbeans for my IDE for the wordpress projects.

I created a composer skeleton for Wordpress at https://github.com/ADARTA/Composer-Wordpress-Skeleton that I use for the base WordPress install. It has the roots composer file also, that you can compare to get a feel for adding the roots directory to your wordpress project. I am sure if you watch @swalkinshaw’s screencast it would give you a major jump on composer.

I was never a fan of PHP or Wordpress until being exposed to it via roots and the use of composer in the last couple months.

1 Like
6

@talves and @ben,
A big thank you for the info. I’m going to watch the screencast. Hopefully tonight but, if not, this weekend (just need the kids out the house and get some peace and quiet!).

Then I’ll get my ‘developing stall’ set out and go from there.

Thanks once again for the great information. It’s much appreciated. Looking forward to getting in depth with roots.

Cheers

John :wink: