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
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.
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
.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
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.
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!