June 11, 2012 at 2:05 pm #624
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.
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. 😉June 16, 2012 at 11:36 pm #740
Great work as always man. Stuff like this is why I love this community.June 17, 2012 at 7:23 am #743
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.June 18, 2012 at 4:13 am #758
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.June 22, 2012 at 6:44 pm #807
@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. 😛June 22, 2012 at 7:31 pm #809
@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.December 14, 2012 at 5:19 am #2700
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)December 14, 2012 at 2:39 pm #2701
@scott thanks for you theme!
The only thing I could point is that, on the iPhone, the slide images are flattened…December 15, 2012 at 10:04 pm #2709
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 😛December 31, 2012 at 10:29 pm #2751
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. 🙂January 17, 2013 at 1:51 pm #2844
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!January 18, 2013 at 4:05 am #2850
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.
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. 😛January 18, 2013 at 10:38 am #2855
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!January 18, 2013 at 12:45 pm #2856
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.January 18, 2013 at 3:07 pm #2860
Scott has resolved the centered menu issue here – http://thematictheme.com/forums/topic/centering-the-menu/
Thanks again Scott!
The topic ‘Child's Play – responsive child theme’ is closed to new replies.