What’s new in Thematic 0.7

Thematic 0.7 has been officially released with two major upgrades that’ll help you get what you need done with your WordPress blog or site faster and easier.

Rapid Site Development With Modular CSS

I’m doing my best to make Thematic a tool for rapid site development whether you’re digging into it and using it as the basis for a custom site design or using it as a theme framework with a WordPress Child Theme. How? By making the CSS completely modular. Let’s take a look at two of the folders in the library directory of Thematic; layouts and styles.

/layouts
  2c-l-fixed.css
  3c-r-fixed.css
  2c-r-fixed.css
  3c-fixed.css

/styles
  18px.css
  typography.css
  21px.css
  default.css
  images.css
  plugins.css
  reset.css

Each of these files can be imported into the stylesheet of either your Thematic-based theme or Child Theme with the @import rule—or copy-pasted if you want to make changes without having to override the CSS to make structural changes. Simply put, what that means is that you can bring each of these files into play in your stylesheet and rapidly build a WordPress theme by mixing and matching them. And I mean really rapidly. For example, here’s an example of a fully finished 3 column Thematic Child Theme, with a sidebar on either side of the content, that follows the default Thematic color styles—built by you, out of only a few lines of CSS.

/*   
Theme Name:  Thematic, 3-column
Theme URI: http://themeshaper.com/
Description: A 3-column version of Thematic
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
*/

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');
 
/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');
 
/* Apply a basic 3 column layout */
@import url('../thematic/library/layouts/3c-fixed.css');

/* Apply the default Thematic style */
@import url('../thematic/library/styles/default.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');
 
/* Apply styles for popular plugins */
@import url('../thematic/library/styles/plugins.css');

That’s really all there is to it. And if you’re modifying Thematic instead of building a Child Theme, just take a look at the style.css included with it and start mixing and matching CSS files. It’s that easy.

But what if you want more of a blank template with just enough styles to build a WordPress theme from? I’ve got you covered there too with 18px.css and 21px.css. Each has just enough CSS styles to produce a blank theme based on a 18px or 21px line-height. Combine them with any of the layout styles included with Thematic—just like in the simple example above, using 18px or 21px instead of default—and you’ve saved yourself potentially hours of time.

Essentially, I’ve done all the boring CSS work that’s required to build 99% of all the WordPress themes you’ll ever see. You’re welcome. ;)

And yes, now that there’s a default there might be more included styles in the future.

A Guide To Developing With Thematic

One thing that’s really been lacking with Thematic, and really should be included with all good WordPress themes, is a good ReadMe file. That’s been fixed with version 0.7. I’ve made it an xHTML file instead of the typical text file so you can check it out in your browser.

I’ll be adding a table of contents to it in the future as it inevitably grows. Which should be very soon since it’s already out of date! I completely forgot to update the list of Thematic Child Themes before I submitted it to the WordPress Themes directory. I’ll be fixing that in an update which should come in the next couple of weeks.

Download Thematic and Build Your Own WordPress Theme

Thematic is completely free and available for download at the Thematic WordPress Theme Framework page.

18 thoughts on “What’s new in Thematic 0.7

  1. hi Ian… simply awesome ! I’m running Thematic locally and just installed version 0.7, everything went as smooth as warm butter.

    I’m designing a child theme for my new blog/site and the Thematic framework is an absolute dream to work with. I’ll post a link when my new site goes live but this has seriously cut way down on development/design time.

    I’m still very new to the concept of child themes but now that I’ve played around with it, I can’t imagine designing WP blogs any other way. Thanks so much!

  2. Thanks Ian, but now I am going to lose 20 hours this week playing with it and either changing one of my blogs or creating a new one so thanks a lot :).

    I’ll check back with what will be a new child theme I hope which I have been looking to develop. I have already created a few with Justin Tadlocks Options and Structure and really love this “new” way and appreciate the efforts of both you guys for leading all us newbies towards this concept which makes perfect sense in all respects.

    It would be great if the WP theme directory could include child themes submitted under its parent theme. I think Matt said at Wordcamp NYC that it doesn’t seem to be something they are looking to do?

    Great job and can’t wait to explore the new version sounds very exciting.

  3. Glad to hear Thematic is helping people get things done!

    I think Matt said at Wordcamp NYC that it doesn’t seem to be something they are looking to do?

    I’ll have to watch the video. I’ve been told that Child Themes in the theme directory are on the official to-do list. I can’t see why they wouldn’t be there.

  4. de says:

    okay, you are now really putting my lack of knowledge / ease of child themes to the test. I’ve done what for me is a lot of modification but (after creating backups) will upgrade this weekend. What steps do I need to take? I’ve done plenty of reading so feel free to refer me to another post if it’s already spelled out.

    which by the way, I have created a very cool child theme with zero knowledge of site design / programming / code whatever it is that you guys do so well and that has been possible because of your VERY informative posts, thank you. it feels great to have what I want (I’m rather particular ;)

  5. Pingback: Changes… again! | Moonlit Minds

  6. I find this development really interesting. I like the idea of an importable stylesheet for basic layout, a different one for typography, one for site specific stuff and the like.

    That’s an idea I’ll have to think about using in the future.

  7. Pingback: Five clean, minimalist themes for WordPress - op111.net

  8. Pingback: IAMWW » Thematic Updated to 0.7

  9. WOW IAN. I didn’t think there would be much more room for improvement considering how great Thematic already is, but you have definitely proved me wrong. *Downloads Thematic and updates about 3 sites, without a single headache*

    I haven’t started playing with 0.7 just yet but in the future will there be any ‘pluggable’ styles that tackle colors/background images/borders specifically? With 0.6 it was a bit tough/time consuming to figure which color styles to override using the child theme’s css. So, I started building a mod to Thematic(0.6) that stripped out the default colors, borders and backgrounds, so that I could start with a clean slate(ie: Sandbox). That way I could use the child theme to add the color, border and background styles. 0.7 may do the trick, but I thought I’de ask anyway.

    Great work as usual. KEEP IT COMING!

  10. Wow, just finally wrapped my head around this. To think I’ve been copying thematic and renaming it to test variations of themes lol. I think this might help just a bit. Nicely written too. Thanks for your work bro.

  11. Pingback: Thoughts on Wordpress 2.7

  12. Pingback: Thematic Updated to 0.7 - IAMWW Habari

  13. Ant Gray says:

    Way too many css files is not cool, I prefer to separate in that way:

    generic.css (stuff like module grids, reset, generic classes etc; it goes first so it not distracting in Firebug)
    main.css
    ie6.css
    ie7.css
    enchanced.css (webkit and mozilla stuff like animation and transitions; @media queries)
    print.css
    page_name-of-page.css (if some blog post has completely unique design)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s