Heisenberg is now on Foundation 6

Steve Zehngut - January 29, 2016

Last year, we open-sourced our internal WordPress starter theme, Heisenberg. It’s where we begin all of our WordPress custom theme projects and provides developers a starting point to build custom WordPress themes of their own. It’s based off of Automattic’s Underscores starter WordPress theme and ZURB’s Foundation for Sites.

Recently, ZURB released Foundation for Sites 6, and naturally, we’ve upgraded Heisenberg along with it to take advantage of the newest features.

New Features in Foundation

There are lots of features Foundation 6 for sites comes with. Here are a few of some of the ones that have caught our eye. Be sure to visit ZURB to find an exhaustive list of Foundation 6 features.

Flexbox-based grid system

Until now, Foundation’s grid system was built using floats. While it clearly worked, flexbox provides us a better way to layout pages without having to revert to hacks to address inherent bugs that come with using floats for CSS layouts.

Still can’t support flexbox in your project? No worries, Foundation gives us a way to fallback to floats via a mixin that we’ve included in our app.scss file. Simply comment out the @include foundation-flex-grid and uncomment out the @include foundation-grid.

Import CSS modules via mixins

Commenting out mixins is the basis of Foundation 6’s flexibility with CSS. ZURB has made it much easier to not include any CSS modules in your final code base by simply commenting out the mixin. For instance, say you don’t use the Top Bar competent in your project. To not include all of the CSS, simply comment out the mixin in our app.scss file. That way, the CSS never reaches our final, compiled CSS file.

Sass maps

Maps are a powerful Sass data type introduced in Sass 3.3 that many developers don’t take advantage of. Many programming languages have some form of maps; they are known as associative arrays, objects, hashes or dictionaries. Ultimately, Sass maps are associations of “key” objects and “value” objects.

Let’s take a look at the basic syntax for a Sass map. You must first declare the map, similar to how you would declared a Sass variable. After it’s declared, you call on that map within your Sass to retrieve your value.

One of the common responses to maps are Why not just use variables? While you can functionally accomplish the same task with variables, I find that maps provide a better way to logically organize your data than variables. Many times, I found myself using unnecessary name spaces to logically group variables. I would also start finding that as my project became bigger, the variable list became too long to manage.

In Heisenberg, maps are used in the settings.scss file in the breakpoints, grid, typography sections.

Combine row/column classes in the same HTML element

A nice addition to Foundation is the ability to use both .row and .column in the same element. Many times in the past we would have to write extra markup just incorporate both classes to make up our grid. Now, whenever you need a full-column width to use as a container, simply drop in the .column class wherever you use the .row class.

Heisenberg Specific Changes

Besides upgrades to Foundation 6 for Sites, we made some internal changes to our starter theme that improves usability and some performance concerns as well.

Eliminate Bower as a Dependency

Because Foundation 6 for Sites is now supported in NPM, we decided to eliminate Bower from the core project. That way, we eliminate a dependency since we are already using NPM for our Gulp plugins. We love Bower and use it on most projects; however, we didn’t want to force it on theme authors.

Custom WordPress Login Styles

We’ve added the ability for theme authors to customize their WordPress login page by bringing in their logo and brand colors. That way it gives users a unified experience throughout. Built in WordPress hooks were used and placed in functions.php so that theme authors can rearrange wherever they choose. There are plugins available that accomplish the same task, but why add more dependencies when we could accomplish the same task natively?

There’s a dedicated Sass filed named login.scss that is queued up for authors to add their logo and brand colors. Gulp will compile it and spit it out to the ./assets/dist/css directory. We’ve kept it light to build upon or strip down. The enqueue scripts are located in the functions.php file. A developer can leave it there or move it to a location that suits the project’s needs.

Modularize Foundation JavaScript with Gulp

Foundation has over 27 JavaScript plugins, each providing awesome tasks; however, there will be times where you won’t use the exhaustive list. We’ve built a new Gulp task that gives authors the ability to only include the Foundation JavaScript that your project needs. That way, you don’t load any JavaScript that your project doesn’t use. This keeps your assets as light as possible, thereby saving precious server/client resources. Gulp will concatenate these files into one, minify it, and will send it to the ./assets/dist/js directory.

That’s All

A big thanks to the ZURB team for putting out a great product for the development world to use and enjoy. While there’s a lot more to Foundation and Heisenberg that we didn’t mention, feel free to take it for a spin and give us your thoughts. Enjoy!