Responsive Base Plus

A new version of the Thematic Theme Framework is around the corner, 2.0 is in beta. There are a quite a few changes with the new version, but the major one is the new HTML5 structure.

With the new features of Thematic, there is a overlap of functionality from my older child themes. I opted to make a completely new theme instead of updating the old ones, the way I setup themes has changed a lot from a year ago.

The new Responsive Base Plus is made to work with Thematic 2.0+. Keeping with my previous philosophy, I built the theme as my starting point for rapid development when creating custom themes, but you may also find it very useful.

Responsive Base Plus Demo

Demo Responsive Base Plus

Download Responsive Base Plus

Visually the themes scaled back to keep it minimal, but with a little more styling than before to make it slightly more appealing.

New in Responsive Base Plus

Thematic is now using the Theme Customizer which allows you to easily switch between predefined layouts in the WordPress Admin. By default Thematic adds options for a left sidebar, right sidebar, three column, and single column layout hooks for you to work with. If you are producing a theme for a client just be aware that you will need to either setup the CSS to work with the design, or disable the layout options. For detailed information on layouts check out the Thematic Wiki page.

Sass is now playing a larger role in the theme, if you aren’t using Sass, just delete the /scss/ folder and carry on with editing the style.css file as normal. If you are using Sass, you will need to also include Susy, it is what is currently handling the responsive grid layouts.

Normalize.css which preserves browser defaults (as opposed to a resetting them) has now been built into the theme, so it makes the Sass/CSS look slightly more complicated than before, but this is the way normailize.css is intended to be used.

In the CSS/SCSS I have switched the styling to use the new classes that Thematic 2.0 supplies. There are still a few left over stragglers that do not have classes available, forcing you to use the ID.

I really don’t like using any ID selectors in CSS because they massively increase the specificity. Instead I opted to use an attribute selector, which has the same specificity as a normal CSS class. It is pretty nit-picky on my part, but it feels good still not using ID’s.


// old id selectors
#links-page,
#archives-page {
    overflow: hidden;
}

// new attribute selectors
[id="links-page"],
[id="archives-page"] {
    overflow: hidden;
}

It also seemed like a good time to drop support for Internet Explorer 7 and 8. I removed everything that was added specifically for these browsers since there are multiple ways to handle them, if you even have to. It also makes the theme more future proof.

I now use gulp to automate my workflow a bit, so you will notice a package.json file and gulpfile.js in the theme. If you are not using gulp, just delete these files. Don’t know what gulp is? Watch some YouTube videos and if you are feeling adventurous, I recommend taking the leap.

TL;DR

Responsive Base Plus is much more powerful than its predecessor, it was built for my current workflow. There may be a few things that are new to you, but you can safely bet there is a good reason it’s built that way. I hope you find it useful as a learning tool and starting point for your responsive child themes. Feel free to let me know if you have any questions.