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: https://themeshaper.com/ Description: A 3-column version of Thematic Author: Ian Stewart Author URI: https://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.