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.

41 Comments

  1. Hi again :-)
    I’ve used Child’s Play as a starting point for my Thematic experience. After played on turknikon.com, now i’ve moved my tech site http://www.murekkep.org to Child’s Play and also used 1140px grid system for the layout. It’s fully responsive in every part and i really have to thank again to Scott for creating these beautiful themes. I would be glad if you have a look to my site murekkep.org and drop some feedbacks.
    Best,
    Alper

  2. Thanks for contributing this to the Thematic Community Scott. I’m going to give it a try now and see how it goes. Hopefully I can make a similar gift back based on some additions/ modifications.

    • Awesome, I would be curious to see what you come up with, it looks like you have a lot more talent in the design department, so feel free to post a link when you finish. :)

  3. Juan
    | Permalink

    Hi Scott!

    Your theme looks great! Looking forward to editing it ;)

    It is the first time that I am using SASS and Copass. I installed the SASS gems correctly.

    After installing the Compass gem I installed it on the childs-play directory:
    compass install compass

    whitch created a bunch of extra files (I found that strange…)

    When running SASS I get the following error when running:
    sass --watch style.scss:style.css
    I get the following error:
    error scss/_base.scss (Line 4: File to import not found or unreadable: compass.
    Load path: /.../wp-content/themes/childs-play)

    Could you please point me to the correct workflow for having both SASS and Compass play nicely with your great Child’s Play child theme ;) ?

    Thanks!

  4. Juan
    | Permalink

    I got it working… just had to add the config.rb file with the correct settings:
    http_path = "/"
    css_dir = "/"
    sass_dir = "/"
    images_dir = "images"
    javascripts_dir = "js"

    And then run
    compass watch/compile

  5. I’ve developed a fully responsive and HTML5 site with Thematic Framework + HML5 plugin + Child’s Play Theme.
    All what I’ve seen before on WordPress development can’t compare with this great combination: it’s easy to implement and with awesome results! Check it out: http://www.cortinasromera.com

    • It took me a little time to take a in depth look, you did a really nice job. This is by far the best custom implementation of Child’s Play I have seen to date. Probably going to be a while before someone takes that title from you. :)

      • Thanks a lot for your kind words, Scott. Recently I’ve developed another website using this great framework: http:www.drag.es
        Hope you like it! :)

  6. Hi Scott. I just wanted to write and thank you. I’m a budding wordpress designer and I decided to use your Child’s Play theme for a site redesign project I did for a friend of mine. Check it out here: http://www.lavaroots.com/site

    I didn’t use Compass/Sass on this site because I don’t understand it yet, but I’m learning about it now and might use it on my next project. I’m going to continue to work off of your themes because I think they’re great, and I love how you explain things on this website.

    Thanks!!!

    • Looks good. It looks like you aren’t using the .entry-utility which is pulling in font-icons. If you go to the functions.php and locate the childtheme_script_manager function and remove (or comment out) the two lines involving the icon-fonts-css you can speed up the site a bit since that code makes a request to pull those font icons in.

      If you get SASS/Compass down, keep checking back, I have a new theme I am working on which is like the Responsive Base Theme (meant as a starter theme), but much more heavy on SASS/Compass and with a Grid System. It will be a bit of a learning curve, but it has the best workflow (build sites fast) of all my themes.

  7. John
    | Permalink

    Scott,

    First of all, thanks for making an excellent child theme. It made creating my first responsive theme much easier.

    I did customize it substantially. Mainly, I added respond.js to make IE8 responsive. I didn’t have the option to create a site that looks substantially different in IE8 only. Another tweak was adding “initial-scale=1.0, maximum-scale=1.0″ to viewport meta for better iphone results. Lastly, the dropdowns didn’t work in iPad in landscape orientation — clicking a top level item would load that page instead of dropping down. I thought FlexNav took care of this? Maybe I have a version of your theme that lacks FlexNav. Anyway, I wrote some JavaScript to add a ‘hover’ class to a top level item if modernizr detects a touch device and the ‘menu-button’ is not displayed and the item doesn’t already have a ‘hover’ class.

    • When it comes to the meta viewport, there are some weird bugs no matter which route you go, I went the simple route because I wanted to error on the safe side since maximum-scale disables zooming.

      As far as the iPad goes, I haven’t even tested that, feel free to post your solution up on a Github gist, or send me a pull request and I will implement it into the theme. Right now CSS just handles the hovers and the version of FlexNav I used is gutted and it looks like they have made a lot of progress on it since, so maybe one day I will get around to it, but navigation menus drive me crazy. ;x

      • John K
        | Permalink

        Scott,

        I posted a gist here: https://gist.github.com/yitwail/7519239

        Please feel free to modify or add constructive criticism. Incidentally, I make genesis child themes as well as thematic/child’s play child themes. Do you know any free genesis child themes with responsive features comparable to child’s play? The official ‘sample’ theme is responsive, sort of, but looks more like an afterthought to me.

  8. Can you tell me why the jQuery drop down menu isn’t working on smaller screens – on my test site, which uses a modified version of Child’s Play, please?

    http://www.readwebco.com/wp/

    Thanks for your contributions to the Thematic community, and especially for the Child’s Play theme.

  9. Please disregard previous comment, Scott – the menu is working now on my live site, not sure which mod. fixed it, though.

  10. Hi Scott, Love your theme, Child’s Play!
    I would normaly ask this in thematic forum but for some reason I can’t log in. I get a “this site is protected by the spammer registrations” I have used the field to ask to be placed on the system white list several days ago, but can still not log in. So I hope you see this and are willing to help me.
    This is my first attempt to get into a responsive theme, and digging in your theme is a great start. Have not use the SASS and Compass this time for the lack of time. I do have a problem that I cannot get the grip on. I have used your code for inserting an image in the header with admin interference https://gist.github.com/scottnix/3248716 and now I can’t get the blog-title and description to ”lay over” #branding. I feel that this is just css but I have tried everything I can think of.
    I have add this to my style.css like you suggested in this thread.
    #branding img {
    height: auto;
    max-width: 100%;
    }
    If I just add the image to the css like a background for #branding it works great, but for the sake of learning new ways I like to try to implant the function of changing the image from wp-admin.
    Any tip much appreciated. The site is temporary at http://6472.diffner.se/

    • Yeah, I have heard of the login issues, I sent an email but haven’t heard anything back.

      I took a look at the demo site and there are a few ways to do it. The easiest way would be to position:absolute; them on top and give the branding a fixed height, but you will find that it might be a little tougher to make responsive (it is doable) as you will have to check how the positioning looks at all breakpoints (scaling the browser).

      I would also recommend getting rid of the white background on the image, instead do that with CSS, so make the branding background white, add top-left and top-right border radius through CSS, this will actually give you more flexibility (make life easier) dealing with the responsive aspect.

      • Thanks for your replay and help. I have made same adjustments like you suggested and get it to look like I want in the browsers. It sort of scaling but do not look nice on some mobile devices with the image behind it becomes a bit cluttered. I’ve manage to use some breakpoints (I think) to make the title smaller and the position different on mobile devises. I’ve my friend (the owner of the karate club) here today and he thought it looks good, so I guess I should be pleased with the results then.
        I’m thinking that I might do this site with an image instead of the #blog-title in a span, like I use to do. Or try to fix the css so there is no image at all on mobile devices.
        I haven’t heard anything either from the forum. It is a bit frustrated, because I know for sure that I have not done anything wrong.
        Thanks again, and I relies that I have to take the time to learn SASS and Compass to make my life easier!

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>