I doubt that I need to explain to WDL readers what responsive design is, or why it’s important. Suffice it to say that it is a big part of the future of our industry. Fortunately, making responsive layouts is easier than it was when when we first started.
The advent of LESS CSS, a CSS pre-processor, has brought with it the ability to let our browsers do the hard work of calculating percentages and such. Throw in a few media queries, and the line between the so-called “mobile web” and the “normal web” begins to blur even more. This is a good thing.
Semantic.gs (which is based on LESS CSS) is not so much a frame work as it is a “layout engine”. (I just made that up.) Before you continue reading this tutorial, you should go and read the Semantic.gs documentation. You should also know that this is not a tutorial for beginners. It would help if you had some knowledge of making WordPress themes.
Done? Good, we can begin.
Planning Your Website
For the purposes of this tutorial, you have decided to make the simplest portfolio ever. It consists of three main section:
- Portfolio (this also acts as the home page)
- About Me
- Contact
Here’s what your wire-frame of the front page looks like:
Setting Up WordPress
The Template Files
I’ve set up a brand new WordPress in my local XAMPP server install to test my layout. Now, including LESS CSS in a WordPress theme isn’t as simple as it should be. I think there’s some sort of Javascript conflict. However, there is a workaround.
The lovely people who developed Perkins (another LESS CSS-based framework) went to the trouble of making a WordPress theme that incorporates LESS CSS. Of course, they did it to get their own framework to function as part of a WP theme, but we can adapt their work to suit our needs. Here’s how I’ve set up the theme files (based on Starkers, by Elliot Jay Stocks):
Now, you’re bound to notice two atypical files in the image above. That’s because I copied class.wp-less-styles.php, functions.less-styles.php, as well ast functions.php from the WP theme that the perkins guys made (you can find the theme here).
You’ll want to open up fuctions.php and edit it until it looks something like this:
<?php
/**
* @package WordPress
* @subpackage Adaptius
*/
define('WP_DEBUG', true);
require 'class.wp-less-styles.php';
include 'functions.less-styles.php';
class AdaptiusTheme
{
public function init()
{
// Register less
wp_register_script('less', get_template_directory_uri() . '/js/less-1.1.3.min.js', array(), false, true);
// Then add to the queue
wp_enqueue_script('less');
}
}
// Init
add_action('init', array('AdaptiusTheme', 'init'));
Don’t forget to download the latest version of LESS CSS and put in the theme’s directory somewhere. Make sure that functions.php points to it.
The Header
In order to make LESS CSS, and Smeantic.gs work, you have to do a little bit of finagling with the header.
<?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Adaptius * @since Adaptius 1.0 */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="stylesheet/less" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/reset.less" /> <link rel="stylesheet/less" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/typography.less" /> <link rel="stylesheet/less" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/layout.less" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php wp_head(); ?> <!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body <?php body_class(); ?>>
Take note of how the stylesheet links are formatted. They have to be wrtten exactly like that in order for the JS pre-processor to do its work. I’ve included jQuery because it’s a generally good thing to have, and the HTML5 Shiv script to make sure Internet Explorer displays things properly.
Speaking of Internet Explorer, I ran into a couple of problems while making this tutorial. IEs 7&8 don’t recognize media queries. Normally, you can fix this with a polyfill, like Respond.js, but in this case, it didn’t work. This means that certain things won’t change position in older versions of IE, that will change position in other browsers, depending on the size of the window.
The problem most likely has something to do with the combination of LESS CSS and WP. If someone know a fix for this problem, I’d love to hear about it.
Content is King
To truly demonstrate how semantic.gs works, and how it allows you to easily separate content and presentation, I’m going to show you the content before I start applying any styles.
I’ve created a copy of the page.php template called portfolio-page.png, and that’s what I’m going to use as the template for the home page.
So, here’s the HTML that’s in header.php:
<header id="pageheader" class="container">
<h1>Your Logo(type)</h1>
<nav><?php wp_nav_menu( array('menu' => 'Navigation' )); ?></nav>
</header>
And here's the code that's in portfolio-page.php:
<section class="container">
<h2>Check out my kick-ass websites!</h2>
</section>
<section class="container">
<ul>
<?php
// The Query
$the_query = new WP_Query( 'post_type=post&posts_per_page=8' );
// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();
echo '<li><a href="'; the_permalink(); echo'">';
the_post_thumbnail();
echo '</a></li>';
endwhile;
// Reset Post Data
wp_reset_postdata();
?>
</ul>
</section>
And lastly, here’s the output of that code:
The Fun Part (The CSS)
Finally, we get to start the fun stuff. The first order of business is to customize grid.less, which should be in your CSS folder with the other .less files. For the purposes of this tutorial, don’t bother with the bottom part of the file. All of the configuration options you need are at the top.
You want something that looks like this:
// Defaults which you can freely override
@column-width: 60;
@gutter-width: 40;
@columns: 12;
// Utility variable — you should never need to modify this
@_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;
// Set @total-width to 100% for a fluid layout
@total-width: 100%;
That in itself will not make any visible difference, but this code (which belongs in layout.less) will:
@import "grid.less";
ul, ol {
list-style: none;
}
.container {
width: 80%;
max-width: 960px;
margin: 0px auto;
overflow: hidden;
}
#pageheader {
padding-top: 36px;
height: 72px;
line-height: 72px;
}
#pageheader h1 {
.column(6);
height: 72px;
}
#pageheader nav {
.column(6);
}
#pageheader nav ul li {
display: block;
.column(4);
text-align: center;
}
h2.intro {
height: 208px;
line-height: 208px;
font-size: 48px;
text-align: center;
border-top: 1px solid #414141;
border-bottom: 1px solid #414141;
margin-bottom: 36px;
margin-top: 12px;
}
section#portfolio ul li {
list-style: none;
.column(3);
padding-bottom: 20px;
}
img {
width: 100%;
height: auto;
}
@media screen and (max-width: 800px) {
#pageheader {
height: auto;
}
#pageheader h1 {
.column(12);
}
#pageheader nav {
.column(12);
}
h2.intro {
height: 144px;
line-height: 144px;
font-size: 36px;
}
section#portfolio ul li {
list-style: none;
.column(4);
padding-bottom: 10px;
}
}
@media screen and (max-width: 480px) {
* {
float: none !important;
}
#pageheader {
height: auto;
}
#pageheader nav {
display: block;
}
h2.intro {
height: auto;
padding-top: 24px;
padding-bottom: 24px;
line-height: 24px;
font-size: 24px;
}
}
As you can see, the “columns” are nestable, and it’s all quite simple to use, once you’ve gotten the set-up out of the way. I hope you all find this useful, and, again, if anyone finds a fix for the IE/media queries problem I’d love to know about it.