How is the new Roots Styled? I See No APP.CSS

I downloaded the newest roots, with bootstrap v3 final. There is no app.css though, does it use a new file to style? All I see is main.css and thats bootstrap code. Am I to include my own?

It uses app.less and the .less files inside of the bootstrap folder, and believe customizations would be done in the variable.less file located in the bootstrap folder



This is a good read:

We recently moved the Grunt-powered branch to master because it’s what we feel is the best practice for using Roots. You can read through how to use Grunt in the support docs.

In short, you edit the app.less to add your own custom CSS, or edit variables.less to alter Bootstrap. This is then all compiled together in one, production-ready, minified, CSS file by Grunt. You can do this after changes manually by using the command line from the theme’s root folder and typing grunt or you can type grunt watch to automatically recompile the file as you are developing.

The old master branch, app.css and all, is alive and well, having been renamed the classic branch. You can still checkout or download a zip of the classic branch for any projects that can’t support Grunt, but I would strongly recommend you at least try the Grunt-powered version first.

There is a similar question in issue #857 in Roots on GitHub. I hadn’t actually realised there was a Grunt-powered branch and that this had become the master.

I think this needs to be made more clear in the docs because for those of us who haven’t come across Grunt until recently or even not at all it’s going to be a shock to the system.

Like I said on the issue discussion, I do believe this is the way forwards, and I am not against making the Grunt branch the mater, but it really does raise the bar for newer (or slightly less techie) developers to get using Roots. I’ve been using Roots on all my WordPress projects for the past few years and it’s been amazing to work with. However I’ve not got round to using Less and Composer, Grunt and Vagrant are very new ideas to me. Since I don’t test on a local server and use FTP I am going to have to change my whole way of working to make this work. Probably a good thing (something I’ve wanted to change for a while) but it is a big step)

Will the non-grunt (i,e. the classic) version of Roots still be maintained and updated?

Basically my comment is that although Roots should be about the best way forwards- best practice, we shouldn’t forget the people for whom this new way of developing (i,e, Grunt, Git, Less, Composer etc) is going to be a big mountain to climb- although I am sure the view from the top is going to be worth it! :wink:

I’d just like to second this. I’ve been using Roots for a while now modifying app.css etc and uploading via ftp (glad to know I’m not the only one!). I’d really like to get up to speed with best practice using the Grunt version. I’ve been reading up and it seems to be really useful, but would love to know where it fits in with the typical workflow? A tutorial/screencast would be great!

I’m using CodeKit (paid app) as a compiler for SASS and LESS files. It works great and is consistently updated. You may want to look into that as a solution if Grunt doesn’t seem to work.

A Pro Tip: if you use CodeKit, don’t add your entire local WordPress directory to it. Only add your custom theme directory. It’ll save loads of time refreshing, and won’t be triggered by plugins.

@Benr I put a screencast up today:

@tigre I used to use CodeKit, but grunt has so many advantages over it and it’s really not hard to use. Check out the screencast :slight_smile:

1 Like

Awesome! Will check it now…Thanks Ben

@benword I’ve only watched around 10 mins (watching the rest tomorrow) but really really helpful, thanks Ben! You mention that people who don’t develop locally and FTP up all the time should really stop doing that now. I am one of those people, but I don’t want to be. You didn’t really give any advice as to how to move from that. That’s my next step, but if there could be a tutorial or screencast that helps people like me I’d love it. Having said that, I should really watch the rest of the screencast.

Thanks again!

Thanks Ian. Setting up a local dev environment would be a good screencast - I wish I could have talked about it more on the Grunt screencast, but we’ll work on getting some dev environment screencasts up

1 Like

Thanks @benword, will try and check out the screencast, currently in iPhone development focus for right now. :slight_smile:

If you’re on a Mac, google “using MAMP for local development” or something along those lines. It saves THOUSANDS of hours to develop locally.

I’m a seasoned developer with 10+ years of experience. I’ve been working with SASS & Compass the past two years, and just now learning LESS. I’m seeing more tutorials about Node.js, npm, and Grunt, but I’m just not ready to dive in to all that right now as I’m getting old and crusty and don’t want to learn any new tricks :smile:.

The point being - in the interim I’m getting along very well by using the Prepros app with this latest version of Roots. Prepros is cross-platform and works on Mac or Windows. All I do is drop the app.less file into the Prepros application to add it as a new project, then configure the output file to be css/main.min.css (rather than the default of css/app.css), and I’m good to go! This is far simpler for me right now than trying to learn Grunt.

Check it out and see if it will work for you if you’re not up for learning Grunt and the like -

To continue this what @smutek is saying, I used to manually push my WP sites using terminal, etc. but encountered an AMAZING plugin by iThemes called BackupBuddy. Their newest version allows for exclusions so you can only backup exactly what you want. Migrating my wife’s site A Forbidden Life this past week was a cinch. I think it took me no more than 15-minutes, or even less!

The best production flow?

  1. Local development using MAMP/LAMP (sorry, not a PC fan here ;), but still love y’all!)
  2. Move local to a staging subdomain like to test page speed, optimize caching, setup social sharing, etc.
  3. Once things are peachy there, migrate to your live server.