I wanted it all.
So I had decided that I wanted to integrate HTML5 elements and responsive design into my WordPress theme. And to that end I was keeping my eye out for interesting articles on both of these topics. A while ago I had bookmarked 1140 Grid and just recently I was inspired by Twenty Ten Five. So there it was, everything I needed to update my theme!
Getting it was just too easy!
My current theme was already a child theme of Twenty Ten. It was simple, just style.css, functions.php, screenshot.png and an images directory. So after I installed the Twenty Ten Five theme all I had to do was edit style.css so that my theme was now a child theme of Twenty Ten Five instead, and go through and change a few CSS selectors to match the new HTML 5 elements.
When adding the 1140 Grid I decided for the sake of keeping the theme light I would just add CSS selectors to the layout CSS rather than add the CSS classes to the markup of several different theme files.
My take on media queries:
I added my own media queries to control the layout at smaller resolutions and higher pixel densities so that everything stays nice and readable across platforms. My philosophy on media queries is to base them on specific physical constraints and not on a device by device basis, but that’s a different article.
The spinoff!
So in about an hour I had responsive design and HTML 5 rolled into my theme. Then I realized minus my own design elements this could be a pretty good Twenty Ten variant of its own and thus Twenty Till Noon was born!
I just deleted everything in style.css and functions.php that wasn’t necessary (That’s a lie! I couldn’t help but leave in some CSS3 effects that I think really spruce up the look of Twenty Ten). The theme is so light, there’s a strong argument for just forking Twenty Ten Five on GitHub instead but a child theme fits my purposes just fine for now.
First you’ll need this:
Then you can use this:
Joe Vaughn for Congress
Twenty Till Noon
Substitute Click for Hover on Touch Devices
Pingback: Joe Vaughn for Congress | piddmedia
So spent the day yesterday at Wordcamp KC, and after attending a session on building off of twenty ten, I decided I wanted to incorporate the 1140 grid system that I’ve been using into twenty ten…
Luckily I decided to do a quick search on google just to see if anyone else had had this moment of brilliance! Dude, you rock! this is awesome.
If no one has said it recently, Thank you for doing this, and thank you for contributing to the community! This really is the best way to start any design!
Thanks for the kind words, I’ve been using it here on this blog and on my more recent client’s sites. The sites I build with it just work on mobile without my even having to think about it much, so it’s great for rapid development.
I’ve been thinking of making a version that is just a fork of Twenty Ten Five but haven’t had the time in my schedule to devote to it. So hey, both projects are on GitHub if somebody feels like doing that! I’d link it
Pingback: Maintain text and layout proportions using 1140 Grid and ems | piddmedia
Hi Scott,
Thanks for making this theme. Loving it! But I have hit an aesthetic snag. When I change orientation on an iPad/iPhone from landscape to portrait, then I flip back to landscape the width gets messed up. I’ve noticed this actually happens on your site as well. Once this happens I’m unable to pinch the landscape view back to fit screen. I’ve noticed on other responsive sites they do have the oversize issue when flipped back to landscape but I’m able to pinch back to the appropriate size. Wondering if you’ve noticed this and if you had any ideas about it. Thanks!
Thanks for the feedback! I don’t personally have any iThings so I wasn’t aware of this problem. My first thought would be that you should remove the
user-scalable=nofrom the viewport meta tag. This should allow you to zoom the page. In fact I think with the improvements I made to the text zooming in a previous update to the theme, the reasons for which I had originally set that attribute should be gone. I’ll test this on my own site and see whether or not this is true.As far as the layout not shifting back as it should, I’d like to eliminate that problem all together if I can but the rub is that you have either got to manipulate the dimensions via media queries or javascript that were designed specifically to manage these mobile issues but fail miserably at doing so thanks to vendors failing to adopt standards. It probably wouldn’t be web design if this weren’t the case! As a result, often making changes that fix something for iThings turn around and break them for Android or other mobile platforms.
To follow up/clarify I think the issue is that I’m unable to zoom in and out to reset the screen. I’m on the case and if I figure out the media query or whatever that controls this I’ll post again!
I needed to drop this meta in the header.php:
I still would like to be able to pinch to enlarge the viewport and that meta seems like it should work but I haven’t found that magic combination. But otherwise, my main issue is solved. I’d recommend you rolling this into your theme!
Hmm, It looks like the filter ate whatever you put there.
One more try
Ok, I posted about this on my blog and you can see the metacode there! http://jasonpaul.net/wordpress/meta-code-to-fix-ios-viewport-orientation-problem-in-twentytill-noon-theme/
I doubt this is the best solution to the problem as I don’t fully grasp all the viewport meta stuff yet. It’s just the one I found that works on your theme. I had tried out the meta that comes with the 320 and up package and that didn’t work so who knows if anyone knows the right way to do this!
One last follow up about the viewport pinch zoom/orientation bug. It’s really is a bug in iOS. So I think it’s case closed until Apple makes the fix. I tried to implement the solutions here and I couldn’t get them to work, but I did get this to a place where I can live with it: http://adactio.com/journal/4470/
Thanks for your work. Looks like the filament group has come up with a fix for the orientation zoom bug. You may want to add this to your theme. Check out the post and get from github here Zoom Fix
Awesome!