Child's Play – responsive child theme

Home Forums Using Thematic Child Themes Free and Premium Child Themes Child's Play – responsive child theme

This topic is: not resolved

This topic contains 23 replies, has 8 voices, and was last updated by  Scott Nix 4 years ago.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #624

    Scott Nix
    Moderator

    In a shameless ploy to drum up some traffic and test a few things on my Responsive Base starter theme, I built a child theme called Child’s Play.

    Demo:  http://scottnix.com/themes/childs-play/

    Download: http://scottnix.com/childs-play-responsive-child-theme-for-thematic/

    It is unique in that it is built with SASS/Compass, so anyone wanting to dabble with CSS preprocessors will find this theme useful for either ideas or quickly deploying a solid responsive site.

    Also incorporates (added on top of what Responsive Base adds) the Woothemes Flexslider, which runs off of sticky posts, an additional header aside widget and a collapsible jQuery mobile menu. Someone may find it useful. 😉

    #740

    Rob Yardman
    Participant

    Great work as always man. Stuff like this is why I love this community.

     

    #743

    helgatheviking
    Moderator

    scott, i really like the menu.  and your respect for the the 100% easy-to-read standard.  100%/1em/16px all the way!

    do you have any plans to pursue handing the second level dropdowns?  that is where i’ve always gotten stuck with the mobile menu issue.

    #758

    alperor
    Participant

    Hi Scott.

    I would like to thank you for this beautiful starting point and clean code. Last week i’ve started to play with your Child’s Play theme locally and still customizing it.

    It’s very useful and i think it has to be default child theme of thematic.

    #807

    Scott Nix
    Moderator

    @Rob, thanks! 🙂

    @Kathy, I used that font tool you linked me to in an email, I was tempted to go even bigger with the fonts and especially titles. As far as the dropdowns, I am nowhere skilled enough to really come up with an elegant solution. I was playing around with some of those filament menus you linked to, but they were way over my head as far as the code went, it just felt too complicated. Also the menu I used is an adaptation of http://jasonweaver.name/lab/flexiblenavigation/ Flexnav, I just didn’t set it up with dropdowns since it has an issue where if you resize the browser, you lose the dropdowns.  So in short, I was waiting for you to come up with a solution! 😛

    Currently, people could technically style the dropdowns differently and still use them, they just wouldn’t have a fancy drop down in a drop down to save space. I may revisit that later, but kind of am waiting till I “have to” figure it out. Even if I did get one working, it would probably drive people crazy by being so complex, too many things to think about with those damn menus. ;x

    @alperor, “has to be the default child theme of thematic”, that would be awesome, but a lot of people would have some trouble with responsive design, it is technically a whole different thought process, it does take a little more work to get it down, so it would probably give a lot of new people trouble. Really it is intended for people who are already pretty familiar with Thematic. 🙂

    There are just a ton of issues that can result from a responsive design, so it definitely isn’t for everyone, especially with the SASS/Compass which probably adds to the confusion. 😛

    #809

    helgatheviking
    Moderator

    @scott – “Waiting for me to come up with a solution?” love it.  it is on my list of things to think about..but that seems to get longer and longer and longer.  🙂  on a paid gig now so that always has to come first.  someone has to buy the carnitas and margaritas!

    the filament menus are tricky…. feels like there has to be an easier way!

    let’s ban dropdowns! if you can’t organize your content so that you don’t need them, you don’t deserve them.  :0  evil laugh.

    started playing with SCSS yesterday.  digging it.

     

     

     

    #2700

    Scott Nix
    Moderator

    This responsive theme for Thematic is now updated to support drop down menus. They ended up being quite a bit of code, but then again, so is the default menu when you really dig into it. 🙂

    Since I have limited devices to test on, if anyone sees any issues, please let me know. (demo)

    #2701

    icristiano
    Participant

    @scott thanks for you theme!

    The only thing I could point is that, on the iPhone, the slide images are flattened…

    #2709

    Scott Nix
    Moderator

    Thanks for taking a look. I checked a few things and I do need to remove the dimensions on the images that are output by the featured image php.

    However, I was curious what you meant by flattened? Distored? Or is it actually like the slider is broke? I will try to get a iphone to test on shortly 😛

    #2751

    Scott Nix
    Moderator

    The slider is now fixed and is fully responsive (no more fixed heights at breakpoints) so it is much more fluid.

    Also, I added font icons to the post footer and cleaned up the styling a tiny bit, if anyone sees any bugs, let me know, I don’t have a mac to test on or a bunch of phones, so if anyone sees anything, let me kow. 🙂

    Demo: http://scottnix.com/themes/childs-play/

    #2844

    onelittlemoose
    Participant

    Scott, I just took a really good look at your Child’s Play demo, and I had that “A-ha” moment you’ve been referring to. I stood there amazed. Had lots of fun changing the browser width, back and forth. Invited a co-worker to come play, too. Then checked it on my iphone, spinning it back and forth. It is just so cool.

    So, I promptly downloaded and installed. Much to learn, as I’m a newbie when it comes to CSS3/HTML5. Reasonably comfortable with the old stuff, but …

    My question: by default, is there an option to add a big header image, and if so where? And if not, any advice on where to start adding it?

    Thanks!

    #2850

    Scott Nix
    Moderator

    Thanks for the accolades. When I mentioned the Aha moment, I was mostly talking about the “mobile first” approach to responsive web design. It isn’t complicated, but a lot of people just don’t get it or overlook it. I highly recommend reading up on it if you get into responsive design.

    As far as a header image, WordPress has this built in to where the functionality is really easy to add.

    http://codex.wordpress.org/Function_Reference/add_theme_support#Custom_Header

    An example snippet for Thematic would be https://gist.github.com/4563335.

    You might have to add a max-width of 100% and height auto to the CSS, but the snippet above will get you there, the rest is just some CSS. 😛

    #2855

    greenbear
    Participant

    Great child theme Scott!

    I think this is largely the way forward….thanks for your efforts there.

    I do have one problem, which I have posted about…but seeing as this is directly relevant to your thread here I thought I’d ask…do you have a method to center the menu for Child’s Play?

    I’ve tried the float:right; left:50% trick which at first glance solves the problem…but only when the screen is large enough to account for it…on decreasing browser width, it kicks out to the right side.

    Any suggestions or solutions you have come across?

    Thanks again, great work!

    #2856

    onelittlemoose
    Participant

    Thanks, Scott, for the header info. I will make the study.

    I think I get what you’re saying about the A-ha. Remember way back when we used tables for layout?  Yuck. At some point I just sat down and said ok, we’re going to learn this CSS, no more tables ever. And when it clicked, there was that A-ha moment, when the choir started singing hallelujah. They’re not singing for me here yet, but I can’t wait. Haven’t been this pumped about code in a long time.

    I will start by spending the weekend sinking my teeth into the crunchy bits.

    #2860

    greenbear
    Participant

    Scott has resolved the centered menu issue here – http://thematictheme.com/forums/topic/centering-the-menu/

    Thanks again Scott!

Viewing 15 posts - 1 through 15 (of 24 total)

The topic ‘Child's Play – responsive child theme’ is closed to new replies.