To begin you must create the basic file structure like any other WordPress child theme. Below is an example. UITS has already compiled a starter kit for you in your sandbox.

Your Cornerstone Starter kit should consist of:

• javascripts
  • min
    • starterkit.min.js
  • starterkit.js
• sass
  • variables.scss (SASS variables are located here)
• css
  • variables.css
• screenshot.jpg
• functions.php
• README.md
• style.css
• style.scss (This is the ideal place to do style changes)

The SASS variables available to you come from three possible documents. Cornerstone registers a large number of new variables mostly pertaining to navigation and widgets.

This is the pre-compiled Bootstrap scss in the global directory, and it has hundreds of variables.

Cornerstone registers a large number of new variables, mostly pertaining to navigation and widgets.

Sherman, a child theme built with SASS, can redefine any of the variable in Bootstrap or Cornerstone before they are compiled. Rather than wrestling with a dizzying number of selectors and tracking down every single place a single color or font may be referenced, you can edit a few variables and be 80% complete with your redesign. It’s fantastic!

In order to make changes, you will have to edit style.scss using the SASS variables. You will also need a SASS compiler. A common one is PREPROS.

Once you have a general understanding of the variables and the file structure you can start editing variables.scss. This file contains listed default variables from both Bootstrap and Cornerstone. A change is simple: search for your target tag and change the attribute to whatever you would like it to be.

Example

To change the default link color for the navigation bar you would have to scroll down to the “$navbar” variables and make the changes you would like.