Over the weekend I’ve worked a bit to update my Thematic 320 and up child theme. It now includes most of the style that the Thematic Frame Work comes with and incorporates 4 different screen size media queries. (Check it out and resize you browser, or go to it on your phone and tablet.)
[normal box title=”UPDATE” width=”100″] Feb. 7, 2013
- Only compatible with WordPress 3.4 and up.
- Registering and enqueuing scripts properly now. Except IE conditional scripts that are not supported by WordPress at this time.
- Removed header.php and footer.php files to avoid future conflicts with Thematic updates. Wrapping header and footer in header/footer tags.
- Updated and rebuild all HTML5 loops to newest Thematic version.
- Added support for header and background images. Places header image in the header rather then adding it to the background like the default Thematic child theme does.
- Combined all style sheets to style.css
- Commented out 1382px mediaquery. I don’t think most sites need this extra width, but if you like it you can uncomment it out.
- Other CSS changes.
- TODO LIST
// Clean up style sheets
// Better menu style on smaller and largest screen
// Better drop down styles
// Add Less CSS in separate style sheets
// Rethink mediaquery break points
// Add option to turn on/off HTML5 markup???
// Rethink Navigation
// Rebuild header and footer to avoid unnecessary tags?
// Move to Github
// Test in I.E.
// Change the name to something that doesn’t include “Thematic” in the title?? Any suggestions?
[normal box title=”UPDATE” width=”100″]June 5, 2012. Rebuilt the index loop.[/normal box]
[normal box title=”UPDATE” width=”100″]May 30, 2012. Thematic got an update! Yay, but If you’re using this theme and update Thematic without updating this theme your site will break. So update it now! If you’ve made a lot of custom changes to thematic320, don’t worry, the only file that really needs to be updated is the header.php file in the thematic320 folder. If you have any questions let me know in the comments. Download the Update here.[/normal box]
[normal box title=”UPDATE” width=”100″]August 29, 2011. The theme is pretty much ported entirely to HTML5. I’m sure there are improvements that can be made, but I wouldn’t hesitate to use this theme in a production environment as long as you test and fix in I.E.. I’m currently redesigning this site with this theme as a basis. Download it now and let me know if you have any improvements. Download the Thematic 320 and up theme here.[/normal box]
[normal box title=”Thematic320 Update Feb. 23 2012″ width=”100″]
What’s been updated?
The conditional classes have been updated to the latest version of 320 and up.
Modernizr.js has been updated to version 2.5.3. You may want to create your own build to fit your need.
Respond.js has been updated to the latest version.
I’ve added an additional style sheet for 600px devices like the Kindle Fire. I encourage you to use it in your projects.
Thematic 320 and up still needs a lot of work. Like I said before I’d like to see Thematic give us an HTML/XHTML option, but until then we can use child themes to create HTML5 pages. I’ll continue to work on changing things over to HTML5 and updating as I go.
What’s changed from my original post?
- The basic look and style of Thematic has been added. I’ve combined most of Thematic’s style sheets into the main style sheet (style.css). I did this because I don’t like overriding styles unnecessarily.
- Almost everything has been converted to ems. Seems like I’m going backwards here, I quit designing in ems a couple years ago, but I think this is the way forward.
- I’ve rebuilt the navigation (in functions.php) to use the nav tag. There might be a better way to do this and if you have a better way I’d love to hear it. I’m still including the “skip to content” link, but if I rebuild everything in HTML5 this will most likely go away.
What still needs work?
- More of the theme needs to be converted to HTML5. I’m also still including id and class, but this will most likely change to role as I move forward, no need to add unnecessary markup.
- I haven’t decided on the look of the navigation. I think on smaller screens the nav needs to change to a vertical look. Otherwise if you have more than 4-5 pages the nav will look a bit strange.
- I haven’t decided what to do about the dropdown navigation. I’m not sure how to handle it on smaller screens. I’d love to hear your thoughts.
- Line height still needs some work.
- I haven’t tested things like the calendar in asides.
- I haven’t tested at all in Internet Explorer. The theme is set up to easily correct problems in I.E. without adding I.E. specific style sheets.