Roots No Styles Solution!

sage
1

Read and follow README.md which is included from the roots folder or follow steps here http://roots.io/roots-101/

This is was based from my experience so for those who are getting this issue just follow this steps.
The one that I’ve missed was the bower installation. - npm install -g bower and bower install

Steps:

  1. git repo – git clone git://github.com/roots/roots.git
  2. After cloning the roots repo, rename the file to your theme’s name
  3. Move it to theme’s directory
  4. Edit wp-config.php and place define('WP_ENV', 'development'); at the top of the file
  5. Activate your theme and follow “Theme Activation” guide here - http://roots.io/roots-101/
  6. Start installing grunt and bower using this command npm install -g grunt-cli bower if you are getting error with this command, you will have to run sudo and type this command instead sudo npm install -g grunt-cli bower note: if you already run this command you don’t have to run it again. Test grunt and bower if they already installed to your machine. run commandgrunt for grunt and run command bower for bower. (in my case I only run this command npm install -g grunt-cli which doesn’t install bower – so I run this command sudo npm install -g bower)
  7. Navigate to your theme’s directory and run npm install again if this get error run it with sudo, then run bower install. Wait till the download is finish.
  8. Navigating to your sites will still appears with no styles. You have to build your css files. In order to do this you have to run grunt dev you will see few files will be created including css files.
  9. Done! I hope this helps! :smile:
2

On theme activation you just say yes to all of them? on the guide it doesn’t clarify yes or no…

3

leave them all in ‘yes’ and of course you need to follow what on each options for example, Create the navigation, create ‘Home’ page etc.

4

Hi lestersanrafael,
I was wondering if you could guide me in getting Roots theme installed properly. This is what I did below:

  1. I created a dev site in a sub folder and installed wordpress - so far so good.
  2. Downloaded the Roots theme, moved it to the theme directory using FTP and activated it. I have successfully set up all the navs, homepage etc.
  3. When I view my site, I don’t see any styles and I took a look into the css folder and main.min.css file is missing.

Until now I have been using Roots version 6.5 and I have been installing it into the website as I described above and it went smoothly. Am I missing a step in this new version? A proper guidance would be highly appreciated.

Thanks

5

@mhabibchowdhury - if you haven’t changed your WP_ENV variable in wp-config.php like mentioned above:

Then you’ll need to run grunt build and upload the main.min.css and scripts.min.js files. Those are meant for a production environment like up on a server. grunt dev is used for development, and generates the unminified main.css and scripts.js

Does that fix it?

6

Thanks Julien for the quick response. I will give that a shot and will inform you about the outcome. Just out of curiosity, is there any other way to generate the unminified main.css and scripts.js, besides building it with grunt?

7

Grunt is the current tool that we’re using to minify/process files, whether that be using the grunt build or grunt dev/grunt watch commands. We are planning on moving over to Gulp.js but it’s going to be a similar process to Grunt.

I suppose you could use another preprocessing tool like CodeKit but most of those cost money (the good ones at least) and would take more time to setup than these Grunt files that are already setup for you.