A new default theme for Textpattern 4.5
After nine years of using the same default theme—the one that has shipped since Textpattern’s inception—Textpattern CMS will sport a new theme beginning with the next major release of the system, version 4.5. I’d like to share how it all came about, the thinking that went into the new theme’s development, and what’s coming up next.
I’m first and foremost a Graphic Designer, I also do some web design. Nothing extraordinary about that—but as part of my job I realise people do judge a book by its cover, so to speak.
I love Textpattern, but I’ve always felt potential users–perhaps accustomed to the instant gratification of WordPress and its plethora of ready-made themes—may be overlooking this great CMS and what it has to offer due to the dated theme that comes with it. And if looks alone didn’t run people off, then the structural inconsistencies (such as forms that were not used) and general lack of commented code (explaining what the heck some code was for) probably did.
This would also be a good opportunity to put as many current best practices into the theme, and of course it has to be written in HTML5, since that’s what everyone seems to be buzzing about these days.
Breaking it down
The design of a new default theme throws up a lot of unique challenges.
Out with the bad
First was to decide what I couldn’t use…
Graphics: Since this is a content management system, I didn’t want to pollute the database with theme graphics. Best practice dictates that content and style should always be kept separate.
JavaScript: We don’t force users to have a JavaScript directory on the front side, and it would be imprudent to have in-line JavaScript spoiling our lovely HTML code, so this option was gone.
Plugins: There are hundreds of useful plugins created by—and for—the Textpattern community. But only the Textpattern core is available for this theme. We aren’t going to force installation of any third-party plugins before users have even started building their dream site.
Defined language: Being stereotype British, I only speak one language, but this theme needs to be multinational—used by people the world over—so each and every piece of language had to be a string pulled from the language database table. No English language could be left hard-coded into the HTML content.
It’s was going to be a challenge working all that out, but I’d just have to be creative with CSS and HTML instead.
In with the good
And here’s what I wanted to achieve…
HTML5 valid code: If I wanted to encourage users to design the best websites they possibly could, I had to make sure the HTML code in our example was 100% valid.
Responsive, mobile-first layout: The last couple of years have seen a titanic shift in how people access and surf the internet. End users are just as likely to be viewing a website on their smartphone as they are on a 24” desktop monitor or even a 50” Internet-enabled TV.
Accessibility: For the visually impaired, text should be legible, links should have visual feedback such as focus and hover, and text should be scalable and zoomable. The use of common Microformats, WAI-ARIA document landmark roles and a proper document outlining model will help those utilising screen readers and other assistive technologies. Also, the design needs to be keyboard navigable (using the tab key) to be polite.
Browser compatibility: It’s not worth designing a theme that only runs on the latest and greatest browsers, as tempting as that is. The theme needed to run on the lowest of the low—so Internet Explorer 7 was chosen as the lowliest common denominator (or course it’ll look much nicer in modern browsers). Internet Explorer 6 wasn’t considered since even Microsoft wants to kill that browser off, not to mention the volume of hacks needed to make it work would have been too much to bear.
Easy to work with: Probably the most important aspect! I wanted to encourage new users to understand how the code works and build upon it. The theme is certainly not intended to be a finished solution that you need ninja PHP skills to decipher and change it—we’ll leave that to other CMS platforms. After all, Textpattern’s strength is in it flexibility and ease of use.
Building it up
I started with the excellent HTML5 Boilerplate by Paul Irish et al., which provides a clean and stable starting point for any HTML5 project. It was then a matter of analysing the current Textpattern default templates and replicating the functionality I wanted to keep in modern code structure. Using <header>, <article>, <section> etc., and providing descriptive class/IDs and WAI-ARIA roles where appropriate.
All superfluous Textpattern forms that did not compose part of the theme have been discarded (forms such as lo-fi and noted) so as not to confuse. Where forms and pages reference other forms I have provided comments and tips on usage. Hopefully that will ease newcomers learning of the system.
On the CSS side, I started with Normalize—this ‘CSS reset’ alternative normalises all the various browser’s rendering inconsistencies to provide a stable unified base for your CSS files. Normalize radically reduces the amount of work, tears, and frustration later when you find that your beautiful new minimalist design, which looked fine in Google Chrome 17, looks like a Picasso painting in Internet Explorer 8.
I’ve kept the yellow and blue accent colours from Textpattern.com, and carefully chosen fonts that complement each other… well, OK, one of them is Arial, but it has a very good cross-platform consistency that’s hard to ignore!
In the spirit of mobile first, the navigation is vertical at narrow screen widths and changes to a horizontal format as space allows. Likewise, once the single column article text surpasses the golden ratio, the structure moves to a two column layout. Finally, at very large screen widths the page content I’d built with em measurements jump up a few point sizes; this makes for easier reading on a king-size monitor or a television screen.
Available now
Newer versions of the theme will be submitted to Textpattern’s subversion repository and make their way into future CMS releases, beginning with version 4.5. But brave souls can download the latest versions (and stable releases) from the Github project page. Read the supplied documentation for the latest installation instructions. For Sass users, I also provide the CSS in .scss format.
I continuously prod, poke and tweak at the theme as better techniques are discovered or issues are raised, all in the public glare of Github. If you find a bug, please raise an issue and I will look into it.
I also have some bolt-on goodies not part of the core theme, such as social media button integration and Flickr feeds. I plan on adding various other common UI elements such as image carousels and sliders over time.
Admin-side up next
As I’ve learned from the time put into working on the new front-end theme, there’s a lot of details to think about and make better in the back-end code; I’d like to start initially with an updated, more user-friendly and modern-looking theme and eventually with a complete overhaul and rewrite of the underlying HTML code structure of the system. With time, and with your help, we’ll get there. Skinning Textpattern back and front will become a pleasurable pastime, not a frustrating experience.
To that end, I’d encourage everyone to get involved, and to post and debate their ideas for future improvements they’d like to see in Textpattern on the discussion forums.
comments powered by Disqus
