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 WordPress Theme Directory.

For more information about changes to Thematic check out the ThemeShaper forum post, Changes in Thematic or browse through the posts on ThemeShaper tagged Thematic if you want to learn more about what you can do with a WordPress Theme Framework.

• How To Protect Your WordPress Theme Against Upgrades
• Thematic Version 0.6 Is Out
• A Revolution in Theming: WordPress Theme Frameworks

• Benedict Eastaugh on Child Themes in WordPress 2.7
• How To Protect Your WordPress Theme Against Upgrades
• A Proposal for Theme Management in WordPress

• How To Create a WordPress Child Theme
• Any WordPress Theme Can Be a Blank Framework
• A Revolution in Theming: WordPress Theme Frameworks

• Junction, An Awesome New Thematic Child Theme
• Blamatic and Pinkatic for Thematic
• Instinct & The Thematic Theme Framework

• WordPress Theme Preview: Theseus
• Updates to Theseus and MNML
• What’s new in Thematic 0.7

• The Ethics of WordPress Themes at a Premium
• Thematic Version 0.3
• 3 Google Code Projects That Will Save Your WordPress Theme

• What’s new in Thematic 0.7
• Any WordPress Theme Can Be a Blank Framework
• A Revolution in Theming: WordPress Theme Frameworks

• A Revolution in Theming: WordPress Theme Frameworks
• Use WordPress As a CMS With The Travailler Theme
• Any WordPress Theme Can Be a Blank Framework

• Smart Cache-Busting For Your WordPress Stylesheet
• Example Images for Thematic
• Changes At ThemeShaper

• A Proposal for Theme Management in WordPress
• WordPress Theme Preview: Theseus
• The Ultimate WordPress Theme Test

• The Best Ideas for a New WordPress Default Theme
• Welcome to ThemeShaper
• Any WordPress Theme Can Be a Blank Framework

• A Better Spot for The WordPress Meta
• Starkers for WordPress 2.6.2
• Cozmos Labs On How Easy It Is To Design With Thematic

… what these premium theme providers are doing … we would call that “Evil”Chase Sagum

… themes link and use lots of internal WordPress functions, which make them linked under the GPL and subject to being a GPL-compatible license. If a theme (or a plugin) used no internal WP functions or APIs, then it could probably be considered independent, but that would be really really hard for a theme. Matt Mullenweg

I haven’t really talked about it a lot but I’ve been trying to do pay-for-use themes differently. Namely, giving away what might normally be considered a “Premium” theme—my WordPress theme framework Thematic—and charging for upgrades in the form of Child Themes and custom design. I think it’s a little more fair to the WordPress community and the debatable concerns around the ethics of paid WordPress themes.

But there’s still more questions. There’s always questions, isn’t there?

Is there a principled difference between on the one hand, Jon hiring Ian to build a blog - Ian using his own Thematic theme as a base, and makes a custom blog a “child theme” with a distribution of 1; on the other hand, Ian makes 10 types of “child themes” - puts them on ThemeShaper - for a small price.Jon Soroko

Good question, I don’t really know. As far as I understand the GPL license, any GPL work can be redistributed. So, um, maybe? Does that make me “evil”?

More important, I think, is what Jon is trying to get at in his question. “The general, overarching concerns,” as he says in his original comment, around open source, the GPL and pay-for-use WordPress themes. So far, there’s been no definitive answer that I know of. Excepting the oft-linked comment above from the WordPress support forums.

What do I think? I can’t answer that question either. ThemeShaper is supported by advertising from premium theme designers and, of course, I release commercial Child Themes (I call them Themelets) for my GPL WordPress Theme Framework, Thematic, at a premium. I even predicted the end of “Premium” WordPress themes. My opinion, as they say, is biased.

But! I can start a discussion.

So what do you think? Are WordPress themes open source? Do they inherit the GPL? Does the WordPress community want “premium” themes to exist? Should they?

Update: You must read the comments on this post. There is some really interesting discussion happening. Notable commentators include WordPress founder Matt Mullenweg and several designers involved in releasing commercial WordPress themes.

The Discussion Elsewhere

• Wordpress Themes Are GPL Code by Wordpress Plugins
• When Premium Wordpress themes and open source ethics collide

• When Premium WordPress Themes & Open Source Ethics Collide
• Matt Mullenweg & Joseph Scott Discuss The WordPress Themes Directory
• The Future of Premium WordPress themes

• Monochromatic, A Thematic Child Theme
• The Ultimate WordPress Theme Test
• What’s new in Thematic 0.7