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.
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.
Option 1: Using CodeKit
Option 2: Using Gulp
- First, ensure that you have NPM installed and configured.
- From your command line,
cdto your theme directory, then…
npm installto install/update all the required dependencies.
npm startto 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.
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.
This defines a some of the standard, universal WordPress styles… such as
.aligncenter. It is used by
app.scss (i.e. it does not compile directly).
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.
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.
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.