FoundationPress

Thank you for attending my Wordcamp KC 2018 presentation!

Learn set up and use the FoundationPress framework for WordPress! You can view the presentation slides on Google Drive.

Do you need help installing or using FoundationPress? Contact us today!

Setting Up FoundationPress and Your Environment

Node.js

Before you can use FoundationPress on your site, you will need to have Node.js installed on your server. You can find the download files here: https://nodejs.org/en/. I recommend having a server tech install it for you.

Installing PuTTY

PuTTY is going to be your SSH and will allow you to apply your changes to your FoundationPress site. To install, go to https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html and under “Package files” find the correct version for your computer. Once you have found it, all you have to do is click on it and run the installer. Here is a great post on how to use PuTTY: https://mediatemple.net/community/products/dv/204404604/using-ssh-in-putty-
If you are on Mac, you can just use Terminal.

Installing FoundationPress

The FoundationPress GitHub link and instructions can be found here:
https://github.com/olefredrik/FoundationPress

Using FoundationPress

When you are ready to start working on your theme, connect to your server through PuTTY. Once you are connected, run this command to get connected to the correct directory.
cd my-wordpress-folder/wp-content/themes/FoundationPress

FoundationPress Grid System

Basic Grid Setup

FoundationPress offers a 12-column flexible grid that can scale out to an arbitrary size (defined by the max-width of the row) that’s also easily nested, so you can build out complicated layouts without creating a lot of custom elements. To start, create the container row.

<div class="row">
</div>

Inside each row, you can add column divs that equal up to twelve. you can have as many, or as few as you would like. You can set your column width for whatever size the screen is at by using the class: small, medium, or large. This makes it fast and easy to make your site responsive.

<div class="row">
<div class="small-12 medium-6 large-6 columns">
</div>
<div class="small-12 medium-6 large-6 columns">
</div>
</div>

<div class="row">
<div class="small-12 medium-4 large-4 columns">
</div>
<div class="small-12 medium-4 large-4 columns">
</div>
<div class="small-12 medium-4 large-4 columns">
</div>
</div>

<div class="row">
<div class="small-12 medium-6 large-3 columns">
</div>
<div class="small-12 medium-6 large-3 columns">
</div>
<div class="small-12 medium-6 large-3 columns">
</div>
<div class="small-12 medium-6 large-3 columns">
</div>
</div>

Center Columns

By default, your columns will be left-aligned. If you would like columns to be centered, all you have to do is add the class “centered”.

<div class="row">
<div class="large-3 centered columns">
</div>
</div>

You can also determine at what size the column gets centered. To do this, just add a size to your centered class.

<div class="row">
<div class="large-3 large-centered columns">
</div>
</div>

<div class="row">
<div class="small-3 small-centered columns">
</div>
</div>

Collapse Columns

Adding the “collapse” class to your container row will change their styling of all columns in that row to make sure there is no padding between each one. You can also use the “uncollapse” class to make sure that the columns do have padding between them. That way, you do not have to go back later on and add the padding yourself with styling. You can also set it to where rows are collapsed/uncollapsed at certain screen sizes by adding those sizes to the collapse class.

<div class="row medium-uncollapse large-collapse">
<div class="small-6 medium-6 large-6 columns">
<div>
<div class="small-6 medium-6 large-6 columns">
<div>
</div>

Incomplete Columns

There will be times when you do not have enough columns to equal up to 12. This most commonly occurs when you have user-driven content. By default, the last-child element will align right. So, if there is not enough columns there will be a gap between the last and second to last column. To remove this gap, just all the “end” class to the end child element. This will change it to float left instead of right.

<div class="row">
<div class="small-12 medium-3 large-3 columns">
<div>
<div class="small-12 medium-3 large-3 columns">
<div>
<div class="small-12 medium-3 large-3 columns end">
<div>
</div>

Using SaSS

SaSS is the primary styling language you will use for FoundationPress. Here is a great guide for the basics of SaSS.
https://sass-lang.com/guide

Whenever you make a change to any scss file on your FoundationPress site you need to run the “npm run build” command inside of PuTTY. This will automate and minimize your stylesheet files. If you do not, your changes will not get applied to your site.

FoundationPress Kitchen Sink

FoundationPress also offers a Kitchen Sink where you can find many different elements that you can easily add to your site. All elements can be found here:
https://foundation.zurb.com/sites/docs/kitchen-sink.html