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.
License: GNU General Public License
License URI: license.txt
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.
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.
To make a theme.. any theme I start with a starting point. Not from complete scratch. I used to start with the current default theme that came with WordPress and create a child-theme. More recently I’m much happier to use a starter theme. This is a codebase for a theme designer to start with. Not something you can use as an actual theme. It has very little CSS or structure. If you activate it, you don’t get errors. You get all the text and links from WordPress you would expect, just all dribbling down the left side of your page, one text after another. No layout at all.. and very basic text formatting.
My current starter theme of choice is Underscores. Or ‘_s’. It’s made by the fine folks behind WordPress, Automattic. That way you know it’s up to the best practices coding standards recommending for theme design.
- jQuery(1.10.x, not ready to drop IE 8 users just yet)
Bootstrap(just the plugins I find myself using)
- Foundation 4.2 with jQuery 1.10.x (not Zepto or jQuery 2.0)
I’ve been doing freelance web design for over two years now and I’ve been getting all the work I want through freelancing website. That’s fine. But I feel like I’m established enough now to start promoting myself and getting work directly with clients looking for the kind of services I provide. That means I need to bite the bullet and take the time to design my own theme. I’ve been careful thus far to use a blank theme. Twentytwelve in fact. An unmodified Twentytwelve at that! If I had any sort of fancy theme.. it would be someone else’s work and design. I can’t have that! So it’s always been a very safe ‘nothing’ sort of theme. Time for that to come to an end.
I’ve been coming up with some ideas and directions to go with a theme design and how I would present it. I’ve decided to make it sort-of sideways. Instead of building a complete them and just using it. I decided I would make it a ‘Live’ redesign. I’m going to blog about the design as I make it. It will give clients an idea of how I think, along with the thought, effort and philosophy that goes in to designing a website. It may also help fellow web designers with a few of the issues that I’ve had to work through to get things done.
In my next post I will start making some of the more technical decisions that I need to make so I have a solid base of code to start my custom theme on.