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.)
- 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?
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.