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.
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.
4 replies on “Responsive Base Plus”
Currently using the responsive-base-plus theme with the latest thematic 2.0 on one of my news site. I would be glad for any feedback on my customization.
Sure a big thanks to Scott for producing such great Thematic themes for the community.
I’m currently using a non-reponsive Thematic child theme for my blog, that I’d like to make responsible without too many changes to the design. Do you think Responsive Base Plus could be a good option? How much of my old child theme customisation I can port to the new design without too many changes? Thanks for the tips!
To be even more clear with my question: do you think RBP as a “blank theme” to use as a starting point and to be modified, or as a parent theme to be used to make a child theme (that would then be a grand-child of Thematic)?
It is definitely a blank theme that is meant to be modified directly.
Making it look like your old theme exactly is possible, but be aware the child theme drops all parent styling. It would probably be best to try it out locally so you can reference the old CSS styling through Chrome Dev Tools.
It would just be some basic CSS, I was going to say the only thing that might take some time would be the double right sidebar, but I just checked the child theme code and it looks like I already added that (I never use it). :)