Child’s Play, child theme for Thematic

Child’s Play is a child theme for the Thematic Theme Framework, it is built with the mobile-first approach to responsive web design, but with a few unique features. It was originally created as a stress test for the Responsive Base to find more improvements and make sure I wasn’t forgetting anything obvious. After adding new functionality and some styling to make it a little more visually impressive, the Child’s Play child theme was born.

Child's Play Responsive Theme Image

Demo Child’s Play Theme

Download Child’s Play

This project is on Github, so feel free to contribute!

Child’s Play Highlights

While this child theme shares all the same benefits as the Responsive Base child theme, I won’t be repeating them here. Child’s Play is unique in that it is the only child theme (I know of) available for Thematic which has the benefit of using Sass and Compass. Child’s Play turned out to be a good alternative to Responsive Base for those who want even a more refined starting point for child theme development. Although if you were coding a site from a PSD, Responsive Base would probably be a better start.

The CSS

Child’s Play takes it up a notch adding presentational styles and utilizing some very handy features that using Sass and Compass provide. I can’t really dive into all the things that make Sass and Compass great, that is already heavily documented and there is no way I could ever do it justice. All I can say is from now on, I will always be using Sass and Compass for my future projects, I think you should too.

The Functions PHP

Probably a little over the top, the functions.php clocks in at a little over 500 lines of code. I ended up reworking a bunch of things and adding more options to be reused in other various projects.

  • Added WooThemes Flexslider which works off of sticky posts, it is currently set up to show featured images of 750px wide by 425px height, which can easily be changed. You just have to settle on a specific size and make sure they are saved as the same size when using this option. If you have no sticky posts, the slider just won’t show, and best of all, the slider assets won’t load.
  • I also went ahead and added a header aside widget, I use this a lot for addresses, search bars, or even social icons, which comes in handy.
  • Added a heavily modified version of FlexNav, a jQuery menu that is collapsed on mobile devices to provide more room for content, currently the menu doesn’t support drop downs now supports drop downs.
  • Modified the postheader and postfooter to offer a different style, keeping the content on top.

Last Thoughts

Again, check the Responsive Base starter theme for more information on all the features packed into this child theme, Child’s Play just takes it a step further. This theme may be a little advanced for someone just getting started with Thematic, but if you already use Thematic for all your child theming, I think you will love this setup. A lot of the work on this theme comes from a big push from myself to optimize my workflow and stay up on the latest best practices.

Update: Now made to comply to with Idiomatic-CSS guidelines.

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

47 Comments

  1. Alex
    | Permalink

    There is only one disadvantage I have noticed yet. Almost all entypo icons are not seen in my Android device. The built in browser, it’s Chrome, if I am not mistaken, does not show the icons, Opera Mini shows crap instead, and only Firefox shows them properly. So I will have to replace or remove the icons, it’s a pity. But I am really grateful for your wonderful responsive theme, it’s really excellent together with Thematic and I am going to use it from now on.

    • I still haven’t had a chance to test this, or actually look into what the problem could be. The theme is pulling the fonts from weloveiconfonts.com, I actually need to remove that. I actually forgot the theme was doing this, I have even written places that loading font icons from a external source isn’t ideal. The best solution is to use a service like IcoMoon, where you can load only the icons you need (much faster). If you have any trouble, let me know and I can “fix” the icons, then push it up to Github. If I did that, the commit logs would show exactly what files were touched, and what was changed so you could see exactly what to do.

  2. I Scott,
    I’m using your theme like a framework on my website. Something strange is happening… the widget areas are kind of crazy! They appear ok on the admin, but the widgets I put on the Header Aside, goes to Primary on the web. And the ones I put in Primary, go to secundary!
    What could be happening?
    Thanks!

    • Hmm, I haven’t ever seen anything like that before. I can’t even think of something that would affect the widgets like that. The theme works for me fine (the widgets), so I would start commenting out any added code in the functions.php and disabling anything added like plugins to narrow down what it is. Sorry, not much help on this one. :P

      • Ok, no problem. I will investigate it and let you know if I find the problem! It’s crazy… :)

  3. I found it… the problem is that I’m using a Theme Switcher plugin to work on the new version of the website… and the plugin make some confusion with the widget areas between themes…
    Thanks Scott!

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>