WordPress Genesis Child Theme setup to use Bootstrap 3, Sass, and Grunt.

@salcode, @dustyndoyle, @codenameEli, @bryanwillis, @michaelcarwile

I hear from a lot of users, "Hey, I tried to use your theme but there is no CSS."

Download the latest Bootstrap Genesis release and use that.

This is the base theme I use for the projects I build. Part of my workflow includes using GruntJS for my CSS/Sass and JavaScript compilation, concatenation, and minification. Because the resulting css/style.min.css and js/javascript.min.js files are compiled files, I do NOT check them into version control (i.e. they are listed in the .gitignore file).

The result of all this is the files in the repo are a copy of the theme with all the source files for the CSS and JavaScript but not the final CSS and JavaScript.

If you're running GruntJS and have Sass installed you can run npm install and grunt from the command line and the CSS and JavaScript will be generated. If you're not running these tools yet, you can use the latest Bootstrap Genesis release, which includes the compilied CSS and JavaScript.

Since I'm treating the CSS as a compiled asset that I do not want to include it in version control, I use style.css only for the theme header information and all applied CSS is stored in css/style.min.css

This repo will ignore these files, so if you want them tracked you'll need to setup a repo inside the custom directory and track it separately - either as a submodule or a subtree. The Gruntfile will look for directory structure that looks like this:

custom/css
custom/lib
custom/js

Copypasta (while in the root bootstrap-genesis directory):

mkdir -p custom/{css,lib,js}
touch custom/{css/custom.scss,lib/custom-functions.php,js/custom.js}

Machine Setup NOTE: Machine Setup must have occurred at lease once previously on this machine:

Install nodejs from http://nodejs.org/download/ or, if on Linux (Ubuntu/Debian):
sudo apt-get install -y nodejs-legacy

NOTE: nodejs-legacy is required as node causes build errors.

From the command line install grunt cli
sudo npm install -g grunt-cli

From the commdand line install sass
sudo gem install sass

Install grunt for this project (generates ./node_modules).
Run from within this directory (bootstrap-genesis):
npm install

-- Machine Setup Complete

Run grunt to build initial scripts and styles:
grunt

NOTE: see Gruntfile.js for more options related to grunt.

The menu is modified to use Bootstrap markup and the menus are placed at the top of the page by default. All menu modifications are removed, when the Ubermenu plugin is present

This theme was created as my own starting point when building custom Genesis child themes using the Bootstrap front-end framework.

The goal is to leverage Bootstrap as much as possible by adding the appropriate markup to trigger Bootstrap styling.

Whenever there is a choice between making an adjustment via the markup or via Sass/CSS, markup modifications are preferrable. There are two justifications for this:

1. We want to keep the CSS as small as possible for load time
2. By using Bootstrap Markup we make the Bootstrap integration more transparent and easier understand and manipulate.

Here are my notes on updating Bootstrap in this project.

After updating the Bootstrap files, the Grunt task must be run to update css/style.min.css and js/javascript.min.js. There are the only two files loaded for CSS and JavaScript, all of the other files are the source files which are used to create these two minified files.

• Download the latest Sass version of Bootstrap
• Replace the JavaScript file. Move the new assets/javascripts/bootstrap.js to js/vendor/bootstrap/
• Replace the fonts. Move all files in the new download from assets/fonts/bootstrap/ to fonts/bootstrap/
• Replace the top level Sass file. Move the new assets/stylesheets/_bootstrap.scss to css/sass/supporting/bootstrap.scss
• Replace the Bootstrap partial and mixin files. Mall all files in the new download from assets/stylesheets/bootstrap/ to css/sass/supporting/bootstrap/

GPL