ThemeShaper Forums » Thematic

[closed]

Responsive Web Design and Thematic

(53 posts)
  • Started 3 years ago by cas
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. So, I've been using the Thematic framework for a couple years as the base for several child themes because it's so extensible and flexible. In anticipation of making future sites even more "mobile-friendly"' (*cough* better late than never *cough*), I've been reading about Responsive Web Design, and IMHO it seems like the way to go.

    http://www.alistapart.com/articles/responsive-web-design/
    http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
    http://www.zeldman.com/2010/06/23/responsive-design-is-the-new-black/
    http://blogs.sitepoint.com/2011/01/11/responsive-web-design-with-html5-and-the-less-framework-3/

    Apologies if this has been brought up before (my search skills didn't yield any results), but I was wondering if anyone knows if there are any plans to modify Thematic into a Responsive architecture, - OR - if anyone knows of any Child themes (existing or being built) that use a Responsive architecture and could point me in the right direction?

    Posted 3 years ago #
  2. never heard of it before, but am now curious. please keep me/us apprised of any findings or progress you make.

    Posted 3 years ago #
  3. i've been playing around with it for several weeks. media queries and such.
    it can be done with the current thematic.
    you need to use a fluid grid system. the less framework is pretty straight forward to implement.

    Posted 3 years ago #
  4. Good topic Cas. I hadn't really considered responsive arch with Thematic. I'd love to see a tut on it. *looks at Jonny* :)

    Posted 3 years ago #
  5. its current state is far from tut-able and a bit messy. if anything surfaces i'll be sure to share my findings.

    Posted 3 years ago #
  6. Hi Guys
    I have a loose implementation, please feel free to tear it apart and make it better. I have added css below altogether but you may prefer to keep your declarations on a per element basis.
    I have chosen to keep the sidebar at 300px width as a constant, it may be easier to have it at say 30%. Or you could take the widths and margin auto away from branding, menu, main and siteinfo and add them to the wrapper instead.
    Anyway add this to your css file at the end (usually default css or style.css)

    This gives the site a maximum width of 1140px, no particular reason just seemed about right to me.

    #branding {max-width: 98%; width: 1140px;}
    .menu {max-width: 98%; width: 1140px;}
    #main {max-width: 98%; width: 1140px;}
    #siteinfo {max-width: 98%; width: 1140px;}
    #container {width: 65%;}
    #content {width: 98%;}

    Now for the media queries, again you may want to adjust percentages and px, oh and nearly forgot, the header will change colour as you resize, I used this as a visual clue.

    /*thematic childtheme media queries */
    
    /* when the users browser size is below 1000px */
    @media screen and (max-width: 1000px) {
    	#header {background: lime;}
    	#main, #siteinfo, #branding, .menu {max-width: 94%;}
    	#container {width: 58%;}
    }
    /* when the users browser size is below 820px, i put this here as there was a problem with sidebar and conatiner overlapping */
    @media screen and (max-width: 820px) {
    	#container {width: 55%; }
    }
    /* when the users browser size is below 760px */
    @media screen and (max-width: 760px) {
    	#header {background: green;}
    	#main, #siteinfo, #branding, .menu {max-width: 90%;}
    	#container {width: 60%; clear: right;}
    	.main-aside {float: left;}
    }
    /* when the users browser size is below 600px */
    @media screen and (max-width: 600px) {
    	#header {background: yellow;}
    	.main-aside {float: left;}
    }
    /* when the users browser size is below 480px, there is a webkit font size adjust as this is likely to an iphone size */
    @media screen and (max-width: 480px) {
    	#header {background: fuchsia;}
    	html {-webkit-text-size-adjust: 110%;}
    }
    /* when the users browser size is below 320px */
    @media screen and (max-width: 320px) {
    	#header {background: maroon;
            html {-webkit-text-size-adjust: 110%;}}
    
    }

    you will also need to add this to your functions.php

    add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');
    
    function childtheme_media_queries_meta() { ?>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <?php
    }
    add_filter('wp_head', 'childtheme_media_queries_meta');

    and of course it wont work in Internet explorer so you need javascript for that I used this one http://code.google.com/p/css3-mediaqueries-js/ I believe it works but haven't tested it yet....sorry.
    add like so

    function childtheme_scripts() {?>
    <!--[if lt IE 9]>
        <script src="/wp-content/js/css3-mediaqueries.js" type="text/javascript"></script>
    <![endif]-->
    
    <?php }
    add_action('wp_head','childtheme_scripts');

    This script doesn't work with @import, but there are posts on the forum that cover getting around that if needed.

    Well this is about as far as I have got, hope it helps someone. I shouls also say a lot of the info I got was from this tutorial by nick la
    http://webdesignerwall.com/tutorials/css3-media-queries

    Posted 3 years ago #
  7. forgot to say this is using the 2 column right css

    Posted 3 years ago #
  8. Well if you are looking to modernize, whoever gets tasked with creating the responsive layout for Thematic may as well go ahead and move it to html5 too. ;)

    Posted 3 years ago #
  9. well lets start:
    https://github.com/helgatheviking/Thematic-978gs

    i spent the day with the 978gs (http://978.gs/) and just pushed my first thematic layout to github.

    so far i've only managed converting the 3-c-fixed.css ... which is #primary on the left, #secondary on the right. at tablet-size (or old CRT monitor-size) it shrinks to the 2c-l-fixed look. and at wide-mobile (overkill maybe) and regular mobile it becomes 1 column. should be easy enough to make it 3-c-fixed that shrinks to 2-c-r, but there were pierogies and i had priorities.

    i kept it on a 12 column grid and preserved thematic's proportions. it has got plenty of extra code that i want to try to minimize to make it smaller, but it seems to work. oh and it has colors and grids that you'd eventually want to get rid of.

    no idea if 978 is the best way to go, but it is griddy and thematic is griddy so that seemed clever at the time. lessframework was definitely the easiest to get started w/ (and i've borrowed their column notation in my comments), but they were putting max-widths on the body and padding too which was going to make thematic look funny since several thematic divs span the full width.

    also have come across:
    http://cssgrid.net/

    which is totally fluid, and wonder if that might not also be a valid option.

    i'm also going to attempt (in my spare time) to implement

    http://baselinecss.com/

    for basic typography and updated default.css

    Posted 3 years ago #
  10. Helga, thank you for posting your css for the grid. Once I saw yours, a lot of stuff made sense. I haven't tried dougal's yet, but I have a feeling the fluid is the way to go.

    I was kind of dumb and started chopping up a existing layout I had laying around because I was trying to mimic a lot of effects and layout changes on http://mediaqueri.es/, which is a showcase gallery for amazing ideas utilizing media queries.

    Back to the drawing board, this time fresh child theme and fluid. I will see what I come up with this time. Either way this seems totally doable, its just the ability to make it work "good" is not for a beginner. Especially correctly degrading the layouts like on the showcase site. :)

    Posted 3 years ago #
  11. @scottnix - i definitely want to dabble in fluid, need to try what dougal has done. but i do like my grids and don't like the constantly shifting lines when you resize. that said, how many users constantly drag their window sizes around while reading? errrr... not many.

    cssgrid.net is on a 12 column grid at the beginning, so that might be enough- and maybe at each media-size you re-establish the proportions? sort of combining the two. we'll see where this goes. if you have git, maybe you could put some stuff up? i think github is the neater site, but googlecode's SVN is probably simpler to use.. and is where thematic lives.

    the fluid layout looks like it should be a lot less code than my way and

    i am hoping to push up 2-col-left.css and 2-col-right.css in the next little bit here.

    Posted 3 years ago #
  12. good to hear you are all experimenting with responsive design :)

    just keep in mind, its not only css based. conditionals in your javascript and php for the serving of images and scripts.

    although it may look sweet on your iphone, still needs to remain optimised, not just display:none e.g, not loading unnedeed scripts. so lose that featured slider for smaller devices.

    i've been bogged with client work (at last) so still haven't been able to really dig in.

    Posted 3 years ago #
  13. totally right of course, but one thing at a time jonny! :) though I had been wondering how to handle menus at smaller sizes. i don't have a web phone, but dropdowns seem like a bad idea. how come no matter how many things i cross off my list of things to learn, it never gets shorter?

    you've got me hooked on these damned grids and now that mine seem to be a pixel off somewhere it is driving me nuts.

    Posted 3 years ago #
  14. theres plenty of web phone emulators online and for download.

    common approach for std menu, just display:block li's at 100%. so they appear more like a standard list of buttons.
    as for dropdowns, it can make you re-think your navigation (maybe simplifying). if drop downs are a must hmmmm i guess theres a big list of options. i haven't tried dropdowns yet. theres one for my list.

    i did start building my own grid. some great maths involved which i actually enjoyed.

    Posted 3 years ago #
  15. now that you've already done all the math, have you seen?
    http://www.spry-soft.com/grids/

    nice handy way to do all the calculations. are you going fluid or changing-fixed on your own grid?

    i actually prefer single-level nav (prolly b/c i hate designing the CSS for the damn dropdowns) - but was idly wondering what to do when clients insist on it. thankfully total implementation of this is a little ways down the road for me.

    Posted 3 years ago #
  16. Hey guys this is starting to get interesting. I do plan to get a proper working responsive design sorted as I think it is a must for projects from now on, however, just become a dad so very stretched for time.
    @helgatheviking thanks for posting the code there it is very helpful.
    @jonny thanks for the heads up you are right, I have a feeling that media specific optimisation could be a minefield and is possible very dependent on the final design of the site.......time will tell I guess.

    Posted 3 years ago #
  17. @dougal - you're welcome. i need to try what you posted above and play around with fluid grids. the layouts i have are just adding way too much weight to the stylesheets. i should maybe have called my git repo "adaptive thematic" and we could all contribute different types of layouts. maybe i still will.

    congrats on becoming a dad!

    Posted 3 years ago #
  18. I happened to run across http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/, which has a ton of information dealing with, as Jonny mentioned, issues with display:none, js files, etc. It is worth the read and has some in depth research, either way, media queries are going to be a very cost effective solution for a lot of small businesses.

    @helga, thanks for the spry-soft.com/grids/ resource, super handy.

    Posted 3 years ago #
  19. nice article. i think we're all in agreement that responsive layouts are just the beginning.

    Posted 3 years ago #
  20. resurrecting b/c i deleted that repo and created a new one:

    https://github.com/helgatheviking/Thematic-Adaptive

    i took a quick stab at adapting the 1140 fluid grid (2-c-r and 3-c-r): cssgrid.net and of course my attempts at the 978 are still there.

    anybody want to work w/ me on this?

    some things i'd like input on:

    1. how to handle the menu

    2. other grids to try?

    3. fluid versus fixed preferences

    4. thoughts on how to add/filter thematic classes to support some of the grid systems out of the box. for instance, both of the ones i have no dealt with come with one-col, two-col, three-col, etc classes. anybody else think it would be sweet to filter say the "container" div to have the four-col class so it could be gridded on your chosen css grid?

    if you have tried anything put it up on git and send me a pull request. lets make the Thematic-Adaptive repo a playground for generating some new layouts to thematic

    Posted 3 years ago #
  21. @helga,
    thematic is already bundled with thematic_open_class for the content div.
    so that can be conditionally targeted to add a column width for different layouts?

    i wish i had more time on my hands at the moment :(

    Posted 3 years ago #
  22. good point! now i feel that if you #container and #primary, #secondary and all the subsidiary asides had something similar, then you could re-arrange the markup with "relative" ease.

    busy pays the bills though... ;)

    Posted 3 years ago #
  23. This sounds really exciting. I love Thematic and also wish that I had more time on my hands. I will be sure to follow this development though.

    Posted 3 years ago #
  24. middlesister
    Member

    Very cool!

    Responsive design has also been on my list of things to check out for a while. I have read about different concerns and approaches regarding js files, serving optimized images to the mobile screens etc, but haven't really gotten my head around the nitty gritty details of how its actually done.

    This would be a great opportunity to dive in and get my feet wet. Working with something I am already familiar with instead of making up some static testsite locally and messing around. Great initiative!

    I think have a quite a bit to read now though before I can make any serious addition, but I will try to keep up with the development and chime in when I can.

    Posted 3 years ago #
  25. @helga, thats exactly what i've be working on.
    i wanted to control a layout via php over css.
    but couldn't intergrate into thematic so hence, the claw.
    i was also working on similar, a layout function, that can re-organise the flow of divs.

    busy pays the bills but all work and no play makes jonny a peanut!

    Posted 3 years ago #
  26. I started working on something similar to this before I read this post. I'm using the 320 and up framework. You can check it out on my site.
    The original post is here.
    http://www.ejhansel.com/thematic-320-and-up/
    And an update is here.
    http://www.ejhansel.com/thematic-320-and-up-update-a-responsive-wordpress-child-theme/

    Posted 2 years ago #
  27. wanna fork me on github? how does 320 and up progressively load assets?

    Posted 2 years ago #
  28. 320 and up uses media queries to load assets and styles. As far as loading images I think this looks interesting and might be doable with costume image sizes/thumbnails, maybe. http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

    I've never played around with github and I'm not sure I'd have the time to do it justice, but if someone else wants to grab the code off my site and set up a fork that would be awesome.

    Posted 2 years ago #
  29. what do you mean when you say 'assets'?

    also, nobody said you had to do it justice. ;) both my efforts are very rough and need work.

    thanks for that link. i had seen it before but couldn't remember it. i think adding that data-fullsrc="large.jpg" into the WP markup would be hella hard though.

    ok maybe not, since i just saw there is the post_thumbnbail_html filter that gets the following variables:

    $post_id, $post_thumbnail_id, $size, $attr

    so we could conceivably do something like:

    add_filter( 'post_thumbnail_html', 'my_thumbnails', 10, 3 );

    i wonder what $attr does.

    digging into wp_get_attachment_image() which is the function that generates the html for the the_post_thumbnail.... and also has $attr, which leads to the wp_get_attachment_image_attributes() filter.

    hmmm.... i wonder if can use something in there to add the data-src attribute.

    this is another entry into the same genre (i think):
    http://buildinternet.com/live/imageresize/

    no clue in the world what you'd do about images you insert into the post via the editor. might be screwed there or in need of more hackery than i can manage.

    Posted 2 years ago #
  30. what do you mean when you say 'assets'?

    also, nobody said you had to do it justice. ;) both my efforts are very rough and need work.

    thanks for that link. i had seen it before but couldn't remember it. i think adding that data-fullsrc="large.jpg" into the WP markup would be hella hard though.

    ok maybe not, since i just saw there is the post_thumbnbail_html filter that gets the following variables:

    $post_id, $post_thumbnail_id, $size, $attr

    so we could conceivably do something like:

    add_filter( 'post_thumbnail_html', 'my_thumbnails', 10, 3 );

    i wonder what $attr does.

    digging into wp_get_attachment_image() which is the function that generates the html for the the_post_thumbnail.... and also has $attr, which leads to the wp_get_attachment_image_attributes() filter.

    hmmm.... i wonder if can use something in there to add the data-src attribute.

    this is another entry into the same genre (i think):
    http://buildinternet.com/live/imageresize/

    no clue in the world what you'd do about images you insert into the post via the editor. might be screwed there or in need of more hackery than i can manage.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.