That isn’t to say that WordPress is bad – it isn’t – it’s just that for some of the projects I was working on, using WordPress was a bit like cracking a walnut with a sledgehammer.

Add to this the fact that the majority of our clients were having trouble understanding the WordPress administration interface (meaning that, more often than not, I ended up populating the content for them), I was looking for something better suited to the type of project I was working on.

Enter CouchCMS

CouchCMS is a lightweight content management system that is designed to work with pretty much any HTML template you wish to throw at it.

Unlike a lot of other CMSs I’ve used, which require that you convert your template into a theme (which, depending on the CMS at hand, can be hard work, not to meantion downright confusing for a beginner), Couch instead gets you to define the editable regions of your template via the addition of some special tags added to your existing markup, which it then uses to build the administration area of the site to your requirements.

But this post isn’t designed as a review of Couch (although if it was, it would probably say something like “two thumbs up”), or even a tutorial on how to use it - rather, the purpose of this post is to explain my plan to use Couch with Git.

Separation of data and logic

Since getting into Git I’ve discovered lots of really useful ways to make my life easier. For example, after following an article on how to Install and manage WordPress with Git, all the WordPress sites that I maintain on a daily basis are version controlled with the minimum of fuss, making it easy for me to update them as and when I need to.

This is achieved via the use of a submodule containing the core WordPress files (and nothing site specific), while the rest of the repository contained the bits specific to the site being built. This is very similar to the concept of the separation of  data and logic.

I wanted the same with Couch, but the default install has at least two folders (uploads, snippets) and one file (config.php) that exist within the main couch folder.

I made a post in the forum about this, and found that the aforementioned folders are easily moved, but without a config.php file in the correct place, Couch would just refuse to work. Although it looks as though the guy who wrote Couch might implement a fix for this himself at some point in the future, I’m impatient, so I made my own solution.

What I did

The solution, when you think about it, is really simple. First I made a copy of the default config.example.php file, renamed it config.php, then moved it into the root directory folder before customising its settings (while not forgetting to set the values for the uploads and snippets folders), then created a new config.php file in the couch folder with the following content:

<?php
$folder = dirname(dirname(__FILE__));
require $folder.'/config.php';

As you can see, this gets the path to the root folder (because relative paths don’t work), then uses it to require the config.php file that has all your settings in it.

Now that the couch folder is standalone, you’re free to do whatever you want with it, such as set it up as a submodule, or simply ignore it from your Git repository.

I’ve tested this with Couch 1.2.5 and 1.3-RC1, and so far as I can see, it works fine with both (although I can’t see any reason why it shouldn’t work with any version of Couch, past or future).

What you may not know is that I’m also the co-founder of a gaming clan/guild called Fight Club Monkey.

Fight Club Monkey?

What started as a semi-serious attempt at competing in an Urban Terror gaming league with some friends, resulted in us all realising that we’re were not actually very good at the game, and that we had far more fun messing about than trying to win.

(Most of our clan nights ended with the in-game gravity on the server being turned down, allowing us to pretend as if we were shooting terrorists on the moon.)

Although the clan lasted for a couple of years, and we ventured into new games as they were released, eventually it become less and less important as we grew up, got jobs and/or went to university.

Since late last year, however, FCM has made a return, not as a clan or guild per se, but rather as a group of friends who like to get together to play games once in a while.

Getting to the point

I mention all of this simply as a preface to the announcement that on Friday I relaunched the Fight Club Monkey website based on a fantastic WordPress theme called Responsive by ThemeID.

I’m often quite fussy about the themes I use in my WordPress projects – most of the time I prefer to build a theme using something like Roots Theme (although, not so much now it’s gone Bootstrap exclusive) or the newly discovered _s base theme.

On this occasion, however, I had limited time to work on the project, so was more interested in finding something that worked out the box, which I could then expand using child themes. Being responsive was never crucial to the project, but would have been a nice perk.

During my research I came across themes such as Hybridside and Revova, both of which I think were attractive options, but Responsive blew them both out of the water with its functionality.

What makes it good then?

Responsive theme

We’re moving into an age where more and more people are using mobile and tablet devices to access the web, and any sites that don’t keep up with the changing face of technology will get left behind.

There are some features that don’t work quite as well responsivly as I would like (such as the very top and very bottom navigation bars being far too small on phones), but these issues should fixable with a few CSS tweaks.

Child theme support

Unlike some free themes I’ve used in the past, the development and improvement of Responsive seems quite active (just a day after launching the site I saw there was a theme update waiting for me), so by having good child theme support, you’re free to go in and make your own customisations and enhancements, while retaining the ability to easily upgrade to the latest release.

Theme options

Baked into the theme are a number of settings which can be controlled within the WordPress administration area. These include being able to set-up links to popular social networking sites (such as Twitter, Facebook and even Pinterest & Instagram), adding your Google/Bing/Yahoo webmaster verification strings, as well as whatever statical tracking code you use, and an area for a small amount of custom CSS.

Also impressive is the easy way in which you can customise the elements which exist on the homepage, with the main call to action area being controlled via its own interface, and the three areas below that being widgetized (is that even a word?) allowing you to put in whatever widgets you want.

The theme also supports ten page templates, allowing you quite a lot of flexibility in how you want to display your content of your site.

Conclusion

All in all, I’m very impressed by the Responsive theme. It has ticked all the boxes I needed for the FCM site, and am looking forward to using its child theme support to enhance it further. Visit the Responsive theme website.

Much like the other CSS preprocessors, CSS Crush offers a range of features designed to make your life easier. Although these including functions that let you do things like manipulate the opacity of a colour value, or generate a data uri from a relative file path, I’m going to talk about some of the other features that I have experience with.

Vendor prefixing

The first, and possibly most important of these, is vendor prefixing. There has been a lot of talk in recent months about non-webkit browsers adopting the -webkit prefix, which has been spurred on by the fact that, to be honest, vendor prefixes are a pain in the arse.

CSS Crush helps solve issues like this by automatically adding all relevant prefixes to the properties that support them, meaning that this:

div { background: #fff linear-gradient( left, red, white ) no-repeat; }

will automatically be converted into this:

div {
    background: #fff -webkit-linear-gradient( left, red, white ) no-repeat;
    background: #fff -moz-linear-gradient( left, red, white ) no-repeat;
    background: #fff -ms-linear-gradient( left, red, white ) no-repeat;
    background: #fff -o-linear-gradient( left, red, white ) no-repeat;
    background: #fff linear-gradient( left, red, white ) no-repeat;
}

This is something that (so far as I’m aware) none of the other CSS preprocessors offer out of the box – although some creative use of mixins does offer something similar – but by using CSS Crush as a git submodule, you’ll always have access to the latest prefixes available.

Variables

Another helpful feature is that of being able to define and use variables. This allows for uniformity across all your stylesheets, meaning you can define variables such as:

@define
{
	/* fonts */
	title: "Times New Roman", Georgia, serif;
	body: Verdana, Arial, Helvetica, sans-serif;

	/* colours */
	primary-rgb: 89,168,15;
	primary: rgb($(primary-rgb));
	primary-text: #FFFFFF;

	secondary-rgb: 158,213,76;
	secondary: rgb($(secondary-rgb));
	secondary-text: #FFFFFF;

	background-rgb: 240,242,221;
	background: rgb($(background-rgb));
	background-text: #222222;
}

then if you need to change a value at a later date, rather than having to do a find/replace, and risk missing some, you simply update the value is one place, and CSS Crush does the rest for you.

Direct @import and minification

One of the things I found particularly useful was the ability to use @import to manage different CSS files for responsive sites. A practical example of this would be something like:

@import url( "mobile.css" ); /* Mobile first */
@import url( "tablet.css" ) screen and (min-width: 768px); /* Tablet and higher */
@import url( "desktop.css" ) screen and (min-width: 992px); /* desktop and higher */

which not only imports the files directly into a single stylesheet, would also put the correct @media tags around the imported code, and then performs minification on it all.

Implementing CSS Crush in WordPress

I’m actually using CSS Crush in my limeBase WordPress starter theme, so that could be a good way for you to get started, but if you wanted to create your own implementation, it couldn’t be simpler:

1. Download/clone the files into your theme folder in a folder called cssCrush
2. in your functions.php file, add the following line

   require_once 'cssCrush/CssCrush.php';

3. in your header.php, replace your existing stylesheet <link>code with

   <?php echo CssCrush::tag( TEMPLATEPATH.DIRECTORY_SEPARATOR.'style.css' ); ?>

Upon viewing your page, CSS Crush will create two new files: .csscrush and style.crush.css, and output the relevant <link> code linking to the new style.crush.css file.

If, before further page views, the original style.css gets updated, CSS Crush will detect the change, and generate a new crushed file for you, otherwise it will continue to serve the cached file.

Conclusion

If you’re already happily using LESS or SASS, then I’m not sure there is much that CSS Crush can offer you. If, however, you’re more interested in a simple way of automatically adding vendor prefixes and performing minification on your CSS, then you can’t go far wrong with CSS Crush.

As I want to use this blog as a means for sharing knowledge and information that other developers might find useful, allow me to present my first such post, designed to solve the problem with how to display images within WordPress posts and pages on responsive Web sites.

What is a responsive Web site?

For anyone unfamiliar with thm, responsive Web sites are sites that adapt and change their layout to fit the size of the device they’re viewed on.

This site, for example, is a responsive Web site, and employs responsive techniques which enables it to switch between three different layouts:

• Desktop – which has two main columns.
• Tablet – where the right column drops below the main content, and the width of the site drops.
• Mobile – everything is in a single column which spans the entire width of the device.

If you’re using a desktop computer, try resizing your browser and you’ll see the site switch between the three layouts as the window gets smaller.

As I’m sure you can imagine, due to the fact this requires designing and building multiple layouts, building a responsive site is hard work, especially once you come up against the issue of trying to display the same content on an ever decreasing screen size.

Responsive images

Anyway… One issue that I encountered while building this site was that of images embedded into posts and pages.

I had already designed both the desktop and tablet layouts to have the same width content area, meaning I can use the alignment options offered by WordPress, and know exactly how they’re going to look on two of my three layouts.

But what about the mobile layout? This is a bit more difficult to handle as the width of the device is variable. There had to be a simple way of handing this issue?

Requirements

The first thing I wanted was to remove any left or right alignments of images in the mobile layout, and instead force them onto their own line with a centre alignment. This is because on a screen that is potentially no more than 480 pixels wide, the last thing you want is a 300 pixel image sat to the right of the content you’re trying to read.

I also wanted to make sure that the images on the mobile layout are displayed at an intelligent size. For example, images that are smaller than the width of the browser should display at their native resolution, but images larger than the width of the browser should resize down to fit.

Finally, I needs to use Mobile First techniques to make the site as accessible as possible.

Solution

Below is the code that I’ve produced to solve these issues. It is based on the required WordPress Generated Classes CSS, but modifies it to allow for the behaviour described in the requirements above.

I’ve tested it as much as I can, and so far as I can tell, it works exactly as intended, but if you can find any problems with it, or can offer any suggestions on how to improve it, please let me know.

/* ===================================
   WordPress Images
   =================================== */

/*
 * Mobile First
 */
a img.aligncenter
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption,
figure
{
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    text-align: center;
    padding: 5px 5px 10px;
}

.wp-caption p.wp-caption-text,
figcaption
{
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 10px 4px 0;
}

img.alignright,
img.alignleft,
img.aligncenter
{
    float: none;
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    display: block;
}
.wp-caption img,
.wp-caption.alignright img,
.wp-caption.alignleft img,
.wp-caption.aligncenter img,
figure img,
figure.alignright img,
figure.alignleft img,
figure.aligncenter img
{
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
.wp-caption.alignright,
.wp-caption.alignleft,
.wp-caption.aligncenter,
figure.alignright,
figure.alignleft,
figure.aligncenter
{
    float: none;
    max-width: 100% !important;
    height: auto;
    margin: 0 auto;
}

/*
 * Tablet and up
*/

@media only screen and (min-width: 768px) {

    .wp-caption.alignright,
    figure.alignright
    {
        margin: 5px 0 20px 20px;
    }

    .wp-caption img,
    figure img
    {
        border: 0 none;
        height: auto;
        max-width: 98.5%;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .aligncenter,
    div.aligncenter,
    .aligncenter,
	figure.aligncenter
    {
        display: block;
        margin: 5px auto;
    }

    .alignright,
    a img.alignright
    {
        float: right !important;
        margin: 5px 0 17px 17px !important;
    }

    .alignleft,
    a img.alignleft
    {
        float: left !important;
        margin: 5px 17px 17px 0 !important;
    }

}

Figures

You may have noticed the above code featured the new HTML5 figure and figcaption tags. Although WordPress doesn’t automatically support the figure tag, it is possible to have WordPress use figure in place of its own caption solution by adding the following to your theme’s functions.php file (which was adapted from code in this article):

add_shortcode('wp_caption', 'twentyten_img_caption_shortcode');
add_shortcode('caption', 'twentyten_img_caption_shortcode');

function twentyten_img_caption_shortcode($attr, $content = null)
{
	$options = array(
		'id' => '',
		'align' => 'alignnone',
		'width' => '',
		'caption' => ''
	);

	extract(shortcode_atts($options, $attr));

	if (1 > (int) $width || empty($caption))
	{
		return $content;
	}

	if ($id)
	{
		$idtag = 'id="' . esc_attr($id) . '" ';
	}

	return '<figure ' . $idtag . 'aria-describedby="figcaption_' . $id . '" style="width: ' . (10 + (int) $width) . 'px" class="'.$align.'">'. do_shortcode($content) . '<figcaption id="figcaption_' . $id . '">' . $caption . '</figcaption></figure>';
}

But what’s the fun in that? So rather than do the sensible thing, and just upload the site, I instead chose to start fresh and build the site all over again from scratch.

Why? Well, there are a couple of reasons.

The first is that I had spent a good portion of the last week updating the limeBase theme on which the Lime Blast site was based. These updates included the latest versions of HTML5 Boilerplate, improved CSS structuring, improved media query responsiveness, and quite a lot of tweaks to the WordPress specific functionality.

The second is that the majority of time spend building the initial site was experimentation to see what was possible. I’m still new to WordPress, and while I’m much better at building for it than I was four months ago, I know I’ve still got a lot to learn. I’m also starting to understand HTML5 and CSS3 much better than I did before, but the downside of this was the labrynth of HTML and CSS that I had left behind. Pretty much the same thing happened with the Ghost Design site.

The way I see it, this site is my most important showcase – if I can’t show the world how good I am on my own site, then how good am I going to be working on someone else’s site?