Responsive Base, a child theme for Thematic

Update: Thematic 2.0 is now in beta and available on Github, which makes this theme outdated. You can still use it since Thematic is backwards compatible, but if you want to be up to date, use Thematic 2.0 from Github and Responsive Base Plus.

Responsive Base is a child theme built on the mobile-first approach to responsive web design. It was created not to just be responsive, but to act as a template or starting point for child theme development for the Thematic Theme Framework.

After creating quite a few Thematic based sites, I felt I needed a solid base starting point which saves a little time by being already set up with some very useful modifications I frequently use.

Responsive Base is ideal for me, I created it for me. Although others working with responsive themes for Thematic will find it useful and refreshing. It is intended to work best with the latest version of Thematic, but works fine on 9.7.7 and above.

Responsive Base Theme Image

Demo Responsive Base Theme

Download Responsive Base Theme

View the demo to take a peek, or visit GitHub to download or view the code. Special thanks to Kathy for inspiration from her adaptive layouts for Thematic.

Responsive Base Highlights


Thematic has a great minimalistic style by default, but I prefer not to have those default styles at the start of every child theme.

  • The reset.css has been replaced by normalize.css which preserves the browser defaults and also corrects common browser inconsistencies.
  • Original style sheets have had a ton of the unnecessary styles removed and condensed, while also building everything with a mobile first approach to responsive web design.
  • Added HTML5Boilerplate print styles for clean printing and HTML5Boilerplate helper classes to take advantage of the latest best practices for things like clear fixes and image replacement.

The Functions PHP

  • Adds my snippet to add conditional classes for Thematic to the header to target old versions of IE. This also now adds the meta viewport for correct scaling on mobile devices. By default this responsive theme will display a static mobile version with a little CSS for IE7 and IE8 based on a post by Joni Korpi called leaving old IE behind.
  • Includes a few functions to clean up the head of the document of lines of code that are loaded by default.
  • Helps optimize script loading in WordPress by providing a template to promote good habits. Combining scripts, loading custom scripts in a custom.js file instead of on page and loading scripts in the footer unless they are required to load in the header.
  • Loads Modernizr which includes the html5shiv for getting IE to recognize new HTML5 elements, also Modernizr does a ton more, especially useful for providing CSS3 fallbacks. Responsive Base child theme comes bundled with the full version of Modernizr, you should however use the build script to only include what you need.
  • Loads FitVids JavaScript which handles the resizing of videos for responsive websites.
  • Also provides a bunch of handy functions I tend to use on most child theme builds. Such as PHP snippets to add a Favicon, register additional menus in WordPress, a fourth subsidiary widget (good for footer menus), optimized Google Analytics and also a snippet to hide widget locations in the admin area.

Responsive Base File Structure

Includes necessary folders and files already setup in the child theme to promote well structured themes.

  • /images/
  • /js/
    • custom.js
    • jquery.fitvids.js
    • modernizr.js
  • favicon.ico
  • functions.php
  • screenshot.png
  • style.css
  • style.scss (for Sass/Compass)

Last Thoughts

While this theme is intended for developers to dive right in to responsive design with Thematic, it would also help people who are new to child themes get an idea on how things can be done in a clean and efficient way. Getting started in mobile-first responsive design can be rough at first, so hopefully you find this child theme template useful and be sure to always get the latest version or fork your own from GitHub.

Feel free to post your creations with the Responsive Base child theme in the comments, or if you think of anything to add, shoot me a pull request on GitHub. :)

Update: Now made to comply to with Idiomatic-CSS guidelines and also added a style.scss file for a basic Sass structure which also follows the guidelines. If you don’t use Sass, delete the style.scss file.

Update: Now works with the Thematic HTML5 Plugin by Karin at


Front-End Development and SEO on the Go

There are occasions where I am asked to check out a webpage and review ways it could be stronger. While this can be a fairly in depth process, you usually can see a lot at a quick glance and it definitely helps to have the right tools. The problem is I frequently get asked when I am not home with the comfort of all my front-end development or search engine optimization tools I have come to rely on.

Recently on a family visit that was suppose to last a few days, those days quickly turned in to a months time. It was painful to not have all my tools available that I use daily. That is when I recalled reading a article about creating an SEO Thumbdrive by a user, while the article focuses on SEO tools, I also needed the front-end side of things.

Enter is a free resource which allows you to use free/open source applications such as web browsers, email applications, and a bunch of other useful tools.

The installer sets everything up perfectly, just make sure to install and search for the apps through its application interface so it knows to handle the updating when updates become available. The fact it will auto update the applications is by far one of the handiest parts.

While my checklist might be a little big, I did end up grabbing a bunch of stuff I might need eventually, obviously these would be some good suggestions.

Customizing Firefox Portable

With the apps installed, next up is customizing Firefox. Still, after all this time, Firefox is my go to choice when it comes to developing, mostly because I am more comfortable with Firebug and other familiar add-ons. Make sure be in your Firefox Portable version while snagging your needed add-ons. I would suggest having a few of these favorites.

Other Portable Friendly Tools

Last but not least, I couldn’t forget my last two must have tools, both which happen to run perfectly on a USB flash drive also. Just make sure to drop them in the /PortableApps/ folder so they are usable from the PortableApps interface, the only thing is they won’t auto update obviously.

Sublime Text 2

By far the greatest thing I have done in a while is switching to the text editor Sublime Text 2, it is bad ass and I still have a ton more to learn. However, it installs beautifully on a USB flash drive, and combined with Dropbox you can set up your Sublime Text user settings at home so you can import them to keep them up to date when needed.

Xenu Link Sleuth

Still an amazing tool after all this time, Xenu Link Sleuth is the perfect link checker which also provides a ton of data. Fast and Easy.

I have a feeling I will update this with a few more tidbits of information, but this resource of links will surely save me a ton of time when I lose or need to create another portable drive.

Anything I missed?