Craft, CSS Frameworks, Bower & Grunt setup suggestions

Question

I would like to use a CSS Framework like Zurb Foundation with Craft. I also want to manage my bower dependencies and I want to use Grunt to concat and minify my sass/js as well as compress my images. All this good stuff is happening on my local computer running Mamp Pro. I'll then move it to a Staging server once everything is set up.

I have these folders/files in my directory.

.bowerrc
bower.json
-craft
-dev
 -bower_components
 -scss
  .htaccess
  index.php
  robots.txt
-node_modules
-public
Gruntfile.js
package.json

The idea of my workflow is to work in the "dev" folder (html, scss, js) and when it's time to push to Staging server I use grunt to copy/minify/compress into the "public" folder. That way I can send only the "craft" and "public" folders.

If I'm working in the "dev" folder my templates would need to link to the files in the bower_components folders as well as my unminified code. When I publish to the public folder everything gets the minified/concatenated version.

My question concerns templates. I know that templates are in the "craft" folder. How would I get craft to choose between 2 base _layouts (one built for dev, one built for speed) based on which folder my index.php file is located? Is there a better workflow solution?

Answer 1

In my humble opinion, this is a task for Grunt / Gulp, not for Craft.

Addy Osmani has an excellent article on Environment-specific builds that would be interesting for you and the kind of use case you mention.

In short, gulp-replace or gulp-processhtml and gulp-preprocess will give you what you need to build such functionality in your build scripts. Similar plugins exist for Grunt as well.

As for file organisation, I generally keep my package.json and gulpfile.js files at the root of the repo / website. I find it a lot easier to manage paths.

Answer 2

You can have your templates folder outside the Craft folder. Just define a CRAFT_TEMPLATES_PATH variable in your index.php and tell Craft where your folder is located:

// Move templates path to right above web root
define('CRAFT_TEMPLATES_PATH', realpath(dirname(__FILE__) . "/../templates").'/');

I learned about this in @Jake Chapman's CraftCMS-Boilerplate, which might also have some other interesting pointers for your setup.

For different themes of your site I'd use one _layout.html and then do some conditionals that render your page based on your chosen theme settings. You could make these settings in dedicated lightswitch fields in a global field set for example. Another idea would be to make the theme conditional on the environment the site is requested.

Set a theme variable in general.php:

'craft.dev' => array(
    'devTheme' => true,
    'environmentVariables' => array(...),
)

and then test for it in your template:

{% if craft.config.devTheme %}
    <link rel="stylesheet" href="/resources/stylesheets/devTheme.css" />
{% else %}
    <link rel="stylesheet" href="/resources/stylesheets/builtTheme.css" />
{% endif %}