Envelope

Heisenberg is now on Foundation 6

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 theme authors 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.

Read More

Wireframing in the Browser With WordPress and Foundation

Recently, we redesigned our Zeek Interactive site, giving it an updated look (thanks to Kiran Robertson at Lovejoy Design) using newer technology such as HTML5 and CSS3. One unique difference in our process was the wireframing component. Rather than using a wireframing software such as Balsamiq, InvisionApp or Photoshop, we decided to wireframe in the browser, which essentially means bypassing the wireframe software and instead using code to make a living, breathing visualization of the site. This makes having an Agile design workflow much easier for us to manage: a truly iterative process doesn’t have to wait for revised Photoshop files.

Read More

Introducing Heisenberg, our starter theme for WordPress

Heisenberg WordPress theme imageYou may have seen our fearless leader Steve Zehngut’s presentation at WordCamp Orange County last year about how we use Auttomatic’s Underscores and ZURB’s Foundation as the basis for the custom WordPress themes we produce. Since Steve’s WordCamp talk, we’ve continued to iterate our starter theme. We’ve packaged it together and released it on GitHub — please allow us to introduce you to Heisenberg. Now, let’s cook.

This starter theme uses the Sass version of Foundation because it gives you a more robust ability to control your theme not only through Foundation’s presentational classes, but also through its mixins.

How to get started

Install Foundation Sites and Gulp Modules via NPM

  1. Clone or download the project onto your themes directory (.wp-content/themes)
  2. From the theme directory, run npm install. All of the theme dependencies will be installed into node_modules
  3. Run a find-and-replace to remove the heisenberg slug/string throughout with your project/theme name
  4. Run gulp

Follow the project on GitHub

We’re actively developing the starter theme, so the best way to stay current with instructions and such is to view the project on GitHub.

Issues

If you run into any issues or have questions, please don’t hesitate to open a support request and we’ll get to it as soon as possible.

Want to Contribute?

We love contributions! ? ? To contribute:

  1. Clone the repository
  2. Create a new branch off of master
  3. Commit your changes
  4. Open a pull request