Thematic 320 and up

What is 320 and up?

The 320 and up project page explains it like this “Inspired by Using Media Queries in the Real World by Peter Gasston, ‘320 and Up’ is a device agnostic, one web boilerplate.”

[normal box title=”UPDATE” width=”100″]I’ve updated my original design and added Thematics default style, you can read more about it in this post “Thematic 320 and up Update A Responsive WordPress Child Theme
[/normal box]

320 and up was developed by Andy Clarke, and is a great starting point for building websites that utilize the latest technologies in modern web browsers. It can be used as is, or as an extension of the HTML5 Boilerplate. I don’t think I can really do it justice or explain it any better then the project page does, so head over to resize your browser a few times and view the page source.

What is Thematic 320 and up?

I’ve been using the Thematic framework for a few years and I’ve built a lot of sites, like this one, using Thematic. The Thematic community is great and the development has been as good as you can expect for something that’s completely free and open source. Needless to say, I believe in Thematic. I also believe that the future of web design lies in something like 320 and up, a “one web boilerplate”.

So I’ve started working on a combination of the two and came up with Thematic 320 and up.

Thematic 320 and up isn’t a finished project! Again, Thematic 302 and up isn’t a finished project! As I was working on it, I hesitated a bit, and wondered if I should even release it. Ultimately I decided awareness is better then nothing, so I’m release it.

320 and up uses the latest in HTML5 and Thematic doesn’t. Surely I could copy over all the files I need to convert a Thematic child theme to HTML5, and I even copied over the header file and started marking it up with HTML5. I could easily remove the Thematic access and build an appropriate nav with HTML5, I could copy over the single.php file and add appropriate markup. But doesn’t doing all this extra work defeat the purpose of using a framework and building a child theme? I don’t know, maybe. I’m torn between the two. In one hand I love working with Thematic and I’d like to start using it with the latest HTML right away. On the other hand I’d really like to see Thematic offer a XHTML/HTML checkbox in its option page and spit out the code depending on what’s selected. I think an option like this would really set Thematic apart from other Frameworks that I’ve seen.

So why release this Child Theme?

If you’re not sold on HTML5, you can still use most of what I’ve done to start building better websites. You can rework what I’ve done and keep the DOCTYPE as XHTML while still use the if IE statements, the javascript and the media quires.

What the Thematic 320 and up Child Theme does

  1. It changes the Thematic doc type to HTML
  2. Adds the If classes to the Thematic HTML tag.
  3. Changes the Thematic meta charset.
  4. Loads the multiple linked style sheets that 320 and up uses (it’s also set up to use the single style sheet option).
  5. Loads all JavaScript files used in the 320 and up boilerplate with one difference, I’m relying on Thematic to load jQuery, so It loads in the header.
  6. Changes the div id=”Header” to a HTML5 header tag.

What the Thematic 320 and up Child Theme doesn’t do

  1. It doesn’t change the entire markup to HTML5, doesn’t add in micro-formats, and doesn’t add WAI-ARIA accessibility. I really think it would be great if Thematic would offer this as an option.
  2. Currently it doesn’t include any style in the different media queries .css files. I’ll work on this and update as I go. I’m planning on using this as a starting point to redesign my site once again.

GPL Licensed.
Released under the GNU General Public License, version 2.0 just like WordPress.

Check out the starting point for this Child Theme here. Make sure you view source.

You can download a copy of it here.

One Comment

  1. Prodyot
    Posted February 19, 2012 at 5:46 am | Permalink

    I will wait patiently for the next update.
    Thanks for the post.

7 Trackbacks

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=""> <s> <strike> <strong>