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.

 

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).

SASS Without Compass

As of the NOUVEAU 0.9.16 Theme Framework update, Compass is no longer supported by the theme framework. You can use any compiler supporting Sass 3.3 or older.

---

This page was last updated on October 6, 2014 - it is currently considered COMPLETE.