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

The CSS

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 invistruct.com.

64 Comments

  1. Denise
    | Permalink

    Hi Scott,

    Thanks for the awesome theme. I have what is probably a really dumb question, but I don’t seem to be able to find the answer to it. I’m trying to get the wp dropdown menu’s to work. I’ve tried commenting out the lines that remove superfish, and more and don’t know how to get them back? I’m using a nice script for responsive menu for smaller screens, but really would like to just have plain old dropdowns for normal sized screens.
    This is the site I’m working on:
    http://shaktidances.com

    I’m new to Thematic, having abandoned Thesis recently and making my way through it – although I’m not really a programmer, I can usually manage to hack my way through things most of the time.
    Thanks again – I really appreciate people like you that make life easier for the rest of us!!

    • I see you got it working, sorry about the delay. I had thought about this when you mentioned it and the way you did it works fine, except in IE8 and below. It won’t recognize code inside the media queries. Technically you could target the classes provided by modernizer and duplicate the menu (or add the .lt-ie9 class to your existing sf-menu section). Or, add an additional JS script like Respond.js which would also work, but if you do that you can drop all the IE specific classes that the child theme like the max width, they wouldn’t be needed.

      • Hey Scott,
        I’m trying to implement your amazing child theme! Did you get any solution for the responsive dropdown menu? Any advice?
        Thanks!

  2. Hi Scott,

    I was wondering if you can tell me what I am doing wrong here, as this is my first responsive site (http://ontsog.com/) using the RB child theme. But I just can’t seem to make the blog title and menu scale down or clear each other so it’s not such a mess. Also, how would I make the #main content area fill more of the responsive area as there’s lots of space around it.

    Thanks in advance,
    Simon

    • There is a tiny issue.

      You changed the media query width to @media only screen and (min-width: 320px) { which is pretty dang small, so it may be a little confusing. By default, everything not in the media query will apply to everything, mobile through desktop. Then the original media query before it was changed would say at 45em (pretend this is 800px), do this, which gives it the desktop layout. You have changed that desktop layout to 320px, which is kind of like saying “more mobiles styles” since 320px is so small. Not sure why that was done, but if you remove the 50% width and floats from the mobile section (outside the media queries), and add them into a new media query with 45 em (800px), you then want to add that 50% width inside there. You can change the value to whatever you want, when it comes to media queries, just go with what size looks good.

      • Thanks Scott, my main concern is getting the blog title and navigation to shrink or sit better than it is right now. Any suggestions how I can do this as if I put anything in the media query it effects the whole site not just on mobile devices?

  3. Hi Scott,

    Haven’t posted for a while, but I’m just trying to re-build my site using Responsive Base, and I’m having a bit of trouble with my header and primary menu.

    A couple of questions:

    1. Is there a simple way to set the menu to be centred underneath the branding?
    2. I have an animated GIF as my header image, but it (obviously) appears a bit fuzzy on devices with high-res screens. Can you recommend a way to use a retina-ready version of the image?

    Thanks again!

    • For the first question about centering the menu, check this post http://thematictheme.com/forums/topic/centering-the-menu/ it is a little weird, but works fine.

      The second question is a little tougher, I haven’t actually dealt with anything like that…. I don’t know enough about SVG to know if you could replicate it, I would think it is possible but probably a pretty steep learning curve, I definitely haven’t been looking forward to tinkering with it yet. Check into http://raphaeljs.com/ and http://snapsvg.io/

      Also, this http://simurai.com/blog/2012/12/03/step-animation/ but it is PNG, so it wouldn’t be high-res awesomeness, but probably sharper than a gif. You may even want to ask a question on somewhere like CSStricks.com to get some more insight, I just don’t have much experience with that kind of stuff and haven’t ran across anything else I can think of. ;P

      • Hey Scott, thanks for the advice! I tried the centering the menu trick and unfortunately it stuffs up the responsive view on the iPhone (must be something to do with the right margin/padding – it has a white gap running down the side). Also, it doesn’t work with nested menus. Not to worry! Thanks anyway.

  4. Adam
    | Permalink

    Hi Scott! Thanks for all your work on this theme. I recently implemented it for the first time, but am having the issue where on IE8 it flashes the mobile version of the site for a second before the media query is applied so that the regular “desktop” view is seen. At first I thought perhaps the reason was that respond.min.js was being loaded in the footer, and I read somewhere that it’s best to load it directly after the style sheet is loaded. I changed the relevant setting in functions.php so that it now loads in the header, just below the style sheet, but that didn’t solve the issue — still flashes the mobile version on IE8. Any suggestions? I should add that I downloaded the Thematic theme in July of 2013, so if there have been relevant enhancements since then, perhaps that’s the issue… Thanks so much in advance for your help!

    • I would have to see a live version of the site to be sure, but my best guess would be the “Internet Explorer Specific” part of the stylesheet.


      .lt-ie9 {
      #branding,
      #access .menu,
      #main,
      #subsidiary,
      #siteinfo {
      width: 640px;
      margin: 0 auto;
      padding-left: 20px;
      padding-right: 20px;
      }
      }

      Just delete that and it should be fine. The above is Sass, but find the CSS equivalent and delete that if you aren’t using Sass.

      The only thing that CSS is doing is providing a narrow container to constrain the layout from going 100% width on desktops, it is a cheap fix for old IE’s that don’t support media queries. Using respond.js makes this totally obsolete though. :)

      If you already did that… I would have to see a live version or run the child theme locally to find the issue.

      • Adam
        | Permalink

        Scott: Thank you so much for the quick response and the recommendation. The lines of CSS you noted were already commented out. If it’s not too much trouble, I’d love to send you a link to a live version of the site. The site isn’t for the public, so is there a way I can privately send you the URL?

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>