My current set of blog posts have had focused on the presentational aspects of the Textpattern CMS front-end and admin-side, specifically the application of an existing theme or template. In my research for these posts, I was reminded of some of the challenges that Textpattern users have when deciding on the look-and-feel of their websites. The main Textpattern CMS theme repository is Textgarden, a community-driven site with numerous pre-rolled templates for Textpattern. The current state of Textgarden is that it’s alive and operational, but hasn’t had much in the way of new content over the last year or two.
I haven’t actively used Textgarden in some years as I prefer to build my own themes and templates for my own sites, and my clients invariably have a look-and-feel in mind by way of a commercial, website-agnostic template from a theme website such as Theme Forest or Template Monster. My recent site designs have been mobile-aware and responsive. I don’t recall the exact date of when I made the decision to factor in mobile traffic, but as the Internet landscape changes with considerably more mobile and smaller screened devices, my designs are now ‘mobile first’. The Textgarden repository has a bunch of themes that, in general, don’t have specific mobile-friendly features. The handful of responsive themes are all ported from other platforms with permission from the owner/designer. The Hive theme, included with Textpattern by default from version 4.5.0, is fully responsive, actively maintained and evolves as specifications change.
I was comparing and contrasting Textpattern with other CMSes to see how they handle common tasks. I picked up on a number of things that piqued my interest, one of which was the way users of CMSes use themes. Textpattern users, I found, seem to use custom designs more than, say, WordPress users. This could be for a number of reasons:
- The number and variety of WordPress themes greatly outnumbers that of Textpattern
- Theme application is much more straightforward with WordPress compared to Textpattern
- WordPress is considered a blog-focused application, where Textpattern is considered a CMS with some blogging features
I haven’t yet pinned down what the root cause of the theme situation is, but it has made me think about designing some themes for the community in 2014. Working with my ‘mobile first’ design philosophy, I usually start with a framework and apply design rules on top. Right now, I’m a fan of ZURB Foundation 5, the most recent iteration of their framework. I emigrated to Foundation from Twitter Bootstrap in late 2013, having spent weeks (months, maybe) learning the innards and best way to do things. There was a certain amount of ‘unlearning’ involved in the transition, but I am confident I made the right move. If I’d not learned Bootstrap first, I would be way out of my depth with Foundation.
If you haven’t used a framework before, it’s pretty straightforward. The page element of Textpattern, nestled in the Presentation tab, is where your HTML skeleton lives. To use Twitter Bootstrap, an excellent place to start with frameworks, you might have something like this:
<!DOCTYPE html> <html> <head> <title>Textpattern + Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script> <![endif]--> </head> <body> <h1>Welcome to <txp:site_name />.</h1> <script src="https://code.jquery.com/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> </body> </html>