7. Styles (SASS & CSS)

If you are already familiar with Zurb Foundation, you will be happy to know that a complete version is included in NOUVEAU lock-stock-and-barrel.

This article will primarily cover how NOUVEAU integrates Foundation with WordPress.

 

Syling Options

NOUVEAU can accomodate both SASS and classic CSS workflows. SASS is the way to go, of course, but it’s not required. *wink* *wink*

Option 1: Working with CSS

If you aren’t sold on this whole new-fangled SASS thing that us pesky kids are using these days, you can certainly still use good-old, plain-jane CSS.

In this case, you can simply do all your styling work in the theme’s style.css file… just like you would with any other WordPress theme. If you fit into this camp, you can skip ahead to the next page. The rest of this article deals largely with SASS.

Option 2: Working with SASS (Recommended)

Before you can work with NOUVEAU‘s SASS, you may need to do a little setup. You can find setup directions for various use-cases in Zurb Foundation’s official SASS documentation.

Compiling SASS (and Javascript)

Although you can use any compiler you like (with a little configuration), NOUVEAU includes configurations for both CodeKit and Gulp.

Option 1: Using CodeKit

NOUVEAU includes a CodeKit configuration right out of the box, so that your SASS and Javascript files can be easily compiled. To set it up, simply drag your theme directory into the CodeKit window. Congratulations, you’re all set up!

Option 2: Using Gulp

Alternatively, you can use Gulp to compile both SASS & Javascript. All the configurations are included with NOUVEAU by default. To use this method…

  1. First, ensure that you have NPM installed and configured.
  2. From your command line, cd to your theme directory, then…
  3. Type npm install to install/update all the required dependencies.
  4. Type npm start to begin tracking & compiling your SASS & JS automatically.

 

Default SASS Files

All of NOUVEAU‘s default SASS files can be found in the /_foundation/sass/ directory. Files that are prefixed with an underscore are “includes” and do not compile into their own CSS files.

Any files without that prefix are compiled into separate CSS files. You can work in any or all of these files, or create new ones as needed.

_settings.scss

This is one of Foundation’s default files. It is included by app.scss (i.e. it does not compile directly) and contains the basic configuration settings for Foundation (typefaces, font sizes, colors, etc). Customize this file as needed.

_wordpress.scss

This defines a some of the standard, universal WordPress styles… such as .alignleft, .alignright, and .aligncenter. It is used by app.scss (i.e. it does not compile directly).

admin.scss

This defines styles that modify the WordPress admin. This compiles to /assets/css/admin.css and is automatically enqueued by NOUVEAU. If you want to do any custom styling of your WordPress admin, you should work in this file.

app.scss

This is the core Foundation SASS file. It imports the basic includes and provides a minimal skeleton for your own styling work. Most of your custom work will likely be done in this file.

This compiles to /assets/css/app.css which is automatically enqueued by NOUVEAU.

editor.scss

This contains any styles that you want automatically loaded into the WordPress TinyMCE editor. This is particularly useful when you want to provide administrators with a more accurate approximation of their content in the WordPress’s WYSIWYG editor.

This file compiles to /assets/css/editor.css and is automatically enqueued NOUVEAU, so any changes you make in the file will automatically take effect (once it’s compiled, that is).

This page was last updated on September 16, 2016 – it is currently considered COMPLETE.