FoundationPress is an amazing template for WordPress built on top of Zurb’s Foundation framework. It’s responsive, easily customized, and is very well documented by both Zurb and the community. In my opinion it’s one of the best frameworks available. The most powerful way to take advantage of Foundation is by leveraging SCSS (Sassy Cascading Style Sheet). I highly recommend checking out the Foundation Kitchen Sink for a quick look at Foundation’s default but easily customized styling.
What is FoundationPress?
FoundationPress is a WordPress starter theme based on Zurb’s Foundation for Sites framework.
Getting started
FoundationPress is built and maintained using SCSS. You’ll need Git and Node.JS already installed on your machine before you can download FoundationPress. If you’re not familiar with SCSS (sometimes referred to as “SaSS”), then I highly suggest checking out my post on Getting Started with Foundation for Sites.
Downloading FoundationPress
- Launch a command prompt (cmd.exe) and change directory to your WordPress themes directory, /wp-content/themes/.
- For the latest version of FoundationPress based on Foundation 6 for Sites, type the command “git clone https://github.com/olefredrik/FoundationPress.git”.
- Once FoundationPress is downloaded, change to its directory “cd FoundationPress”.
- Type the following command “npm install”. This will prepare the directory for SCSS.
- Now you can run “npm run watch” to watch for changes to any of the files within the directory. Any detected changes will update the corresponding CSS files in the /dist directory. Note: Some people are having trouble with “npm run watch”. Alternatively you can run “foundation watch”.
- When you’re done with your project, you can run the command “npm run build”. Alternatively you can build minified without sourcemap files (smaller build) by running this command, “npm run production”.
And that’s it!
Note that you do not need to upload the node_modules directory to your web server.
Making style changes
style.css: Do not worry about this file. It’s required by WordPress. All styling are handled in the Sass files described below.
assets/scss/foundation.scss: Imports for Foundation components and your custom styles.
assets/scss/config/_settings.scss: Original Foundation 5 base settings.
assets/scss/config/_custom-settings.scss: Copy the settings you will modify to this file.
assets/scss/site/*.scss: Unleash your creativity. Create the files you need (and remember to make import statements for all your files in assets/scss/foundation.scss).
More information can be found on the FoundationPress GitHub page.