New Theme: Part 5; about face

After many hours getting things set up properly with the Reverie theme, Foundation, Compass and Codekit I realized that Reverie wasn’t going to be a good solution for me. It’s a well built theme, however it would be difficult for me to use it as a framework. It hasn’t been updated in many months and there is not sign of development other than bug-fixes. In order for me to compile Reverie as I would need to as I make changes to the SCSS files I need to make sure I’m using an older version of Foundation that would not match the available Foundation documentation. Updating Reverie to make use of Foundation 4.2.3 defeats the purpose of using a framework, which is a head-start on development.
So now I am back to Underscores and the stand-alone version of foundation with the menu system integration provided by Reverie. I copied over the custom walker functions that apply the classes needed for the Foundation. A good result.
The next thing I decided I needed was a logo. I did spend several hours designing it.. and I tried not to over-think it. I wanted something simple and elegant with some sort of twist. The twist was I was going to animate it. I’m not clear yet on the device level support, but I’m happy to say it works great on my Android OS 2.3 phone. There were javascript solutions, but I chose CSS. I will always look for a css solution before I pick a javascript one.
I’m going to start tweaking the layout and adding in features from Foundation as I find good uses for them. This theme is going to be a playground and showplace for my web design skills so putting in features just for fun is acceptable.

New Theme: Part 4; A change of direction

I dove into the code.. and cringed. One of the next things after getting all the scripts and java-scripts linked up is to start with a working menu. Now I’ve created custom menus before.. and I know how to make some adjustments to a menu structure with wp_nav_menu. But the structure Foundation wants, takes a custom walker and a structure that needs classes at the sub-menu level.   Not fun. So I was going to see if there was a good example of how to handle it in an already existing WordPress theme. I looked up the Reverie Framework before. But I wasn’t happy with how long it’s been since it’s last update. But looking through the code.. I found I *can* update the Foundation to it’s latest version. The developers did a lot of great work merging WordPress theme and Foundation. From their site it appears to be inspired by the code structure of Roots that is based on HTML5 Boilerplate and Twitter Bootstrap.

So.. Re-invent the wheel.. try to merge underscores and Foundation by myself? Hmmm.. well, the point of all of this was to have a lean, responsive website that make use of tools that would give me a head-start to get right to the customization of a WordPress theme and a chance to learn what Foundation can do for me.

So.. I’m going to try Reverie and see what I can do with it. It will also give me a chance to play with Compass.  I’ve used SASS before.. I’m still learning as I go and hadn’t gotten around to Compass yet.

I just updated Reverie to Foundation 4.2.3.  Next I’ll upload and activate it. Then I’ll dig into the code and start customizing. This is my idea of fun. So… sad. 😉

New Theme: Part 3; Building the Framework.

My first step is to remove the style.css content leaving the theme registration.

/*
Theme Name: mrtwebdesign
Theme URI: http://underscores.me/
Author: Matthew Taylor
Author URI: http://mrtwebdesign.com
Description: My own theme.. for me.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

 mrtwebdesign is based on Underscores http://underscores.me/, (C) 2012-2013 Automattic, Inc.
*/

Not very exciting. But I’ll be using this file for CSS overrides if needed. I’ll generally just try to customize the Foundation files in place.

New theme: Part 2, The nuts and bolts.

I need a solid start to my theme. I’ve tried starting with twentyten, twentyeleven and twentytwelve. Not a bad place to start.. but I want to make sure I get away from the styled elements of those themes. I could start with a premium framework.. but I want something really lean and flexible. I am happy to add my own custom functions as I need them. So the starting point I selected is a starter theme: underscores.  or.. ‘_S’ by Automattic.  Yup.. by the same people that are behind WordPress. You won’t find Underscores in the theme archive.. it’s not a complete theme. Just the beginning of one.

For my CSS reset I’m ripping out the one used in Underscores and using Normalize.css that comes with Foundation.

I’m using Foundation for responsive layout. I’ve been using Twitter Bootstrap. What first caught my eye about Foundation was the extra control I have over the layout for narrower displays.  I was ready to try something new.. but this was a great chance to learn it outside of a client project.

Here is a list of my current tools:

  • Underscores by Automattic
  • Foundation by Zurb
  • Sass – css pre-processor(handled by Codekit)
  • Codekit – for.. a bunch of stuff! can’t live without it.
  • Sublimetext 2 – code editing(Solarized – dark color scheme)
  • Xampp – local server for developement
  • Tower – version control
  • Transmit – FTP
  • Browserstack for device testing

Next post: Part 3; Building the Framework.