FoundationPress: From Prototype to Production

Starting a brand new project is one of my favorite things to do here at NJI Media. I love building a site from the ground up and bringing wireframes and designs to life. Of course, projects always come with timelines and deadlines, so it’s important to have great tools to help speed up the development process without sacrificing quality.

One of my favorite tools is Zurb’s Foundation front-end framework. On every single project that I’ve started while working here, I’ve used Foundation for creating layouts that are responsive to any screen size, making sure my base styles look great, and utilizing pre-made interactive components like accordions and buttons.

Recently I discovered the FoundationPress starter theme for WordPress, which wraps the Foundation framework alongside other commonly-used dev tools like Browsersync and Gulp. Using this theme on my last few projects helped me get sites up and running in record time, so it’s become my go-to starter theme for any new WordPress project. Here are a few reasons why I like it so much.

 

Task Management

The NJI Media dev team uses Gulp and Browsersync on a lot of our projects already, so I was thrilled to see these tools packaged into FoundationPress. After installing the theme and making a quick configuration edit, I can run the simple Gulp command `npm run start` and get a Browsersync instance of my local environment up and running in seconds.

At this point I can start making changes to the theme and Gulp will automatically handle SCSS or JavaScript compilation for me. When I’m ready to commit my changes, running `npm run build` minifies the compiled CSS and JS, making everything production-ready.

Usually it takes me some time at the beginning of a project to set up all of these features manually. With FoundationPress, it’s all ready to go and I can jump straight into building out the site.

 

Organization and Documentation

As web developers, we usually want our products to be efficient and aesthetically pleasing for our users. But we should also be thinking about other developers who will jump onto the project in the future, which is why having great organization and clear documentation is so important. FoundationPress has a system in place to keep all of your theme files organized in an intuitive and modular way.

Uncompiled SCSS and JavaScript files live in the `src/assets` directory, and within each folder there are more directories for things like global styles and scripts, components, and third party scripts. For PHP, there are already folders for page templates and partial template parts, as well as a library directory with separate files for various functions and filters. Again, things we’d usually have to set up at the beginning of a project are already taken care of, saving lots of precious time.

 

XY Grid and SCSS

FoundationPress includes two helpful files in its scss directory: “app.scss” and “_settings.scss”. The former lets you choose what parts of the Foundation core to include, and the latter has ready-made variables for changing global default styles, such as fonts, text sizes, and colors

When I’m working on a new WordPress theme, I like to have all content visible and somewhat organized before I start adding custom styles. Normally I’ll pull the latest version of Foundation and use its XY grid system to help with this, but with FoundationPress the grid is already set up and ready to use. All I have to do is add a few classes to the elements in my template.

For example, adding the “grid-x” class to the container around my grid items will enable flexbox and start fitting my items closer together. Adding grid cell classes to the items themselves snaps everything together, creating a perfect grid with minimal time and effort.

 

Interchange

This one comes with the regular Foundation framework, but it’s so useful that I had to include it here.

Using Foundation’s Interchange feature is a great way to lighten the load on your users’ browsers and improve your site’s responsiveness. By adding a “data-interchange” attribute to an element, you can have your browser load something different depending on the user’s screen size. I’ve primarily used it for images so far, but it can also be used with snippets of HTML or template partials.

For more details on image optimization, check out our other blog post on creating “Picture Perfect Pictures.”

These are just a few of the helpful tools and features that FoundationPress has to offer. Try it out on your next WordPress project and be amazed at out how fast your development process goes!