How to Create a Responsive Portfolio Site with WordPress and Semantic.gs

Comics of the week #92

Comics of the week #92

Inspiring Typography in Print Ads

Inspiring Typography in Print Ads

On Hiding Designers & Hovering Directors

On Hiding Designers & Hovering Directors

WDL Premium: Apollo – Genesis Framework Child Theme

WDL Premium: Apollo – Genesis Framework Child Theme

Dolody: A new Design Dialogue – Plus a FREE ebook

Dolody: A new Design Dialogue – Plus a FREE ebook

Article Tags
web design
Inspiration
design
Compilation
Freebies
Tips
Best Of
Twitter
Humor
Funny
Comics
Resources
Premium
typography
fonts
Article
jerry king
css
Uncategorized
WordPress

Web Designers
Alabama
Arizona
California
Colorado
Connecticut
Florida
Georgia
Illinois
Indiana
Maryland
Massachusetts
Michigan
Missouri
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
Tennessee
Texas
Utah
Vermont
Virginia
Washington DC
Washington

PHP
Coldfusion
ASP
CSS
J2EE
DOT.NET
MySQL
SQL
PERL
JAVA
Dreamweaver
FrontPage
JavaScript
ActiveX
Flash
Video
AudioMP3
HTML
FLEX
AJAX
DHTML
XHTML
XML
WEB 2.0
SEO
Web-Hosting
Ruby
iPhone
Facebook
Twitter
Blogs
Joomla
Wordpress
Templates
Animation
E-commerce
Shopping-Carts
Paypal
Content-Management
JSP
Widgets
Linux
Apache
Photoshop
Drupal
Android
iPad

Compare 8 Free Web Design Bids

Service:
Location:

Budget:
Deadline:

Compare:

Web Design Calculator | Web Design Cost Guidelines

How to Create a Responsive Portfolio Site with WordPress and Semantic.gs

Advertise here with BSA

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:

Wire-frame of the Portfolio page.

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):

Template File Structure

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:

Unstyled Content

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.

Source http://webdesignledger.com/?p=11692
Tue, 27 Sep 2011 11:38:58 GMT
Tags: responsive, Tutorials,

Conroe Web Design, Berlin Web Design, Fall branch Web Design, Framingham Web Design, Branson Web Design, Bruceton mills Web Design, Lakeside Web Design, Bluff city Web Design, Newtown Web Design,

responsive

Responsive Web Design: The Book

Today! Ethan Marcotte‘s brilliant book for A Book Apart is available for purchase. You need to go buy it. Responsive Web Design is not just an assembly of technologies, but rather a new way of approaching designing for the web. To say this book is important would be an understatement. I had the pleasure of [...]

Adapted

There’s no doubt that employing a mobile first, responsive design approach to a new project is a wonderful way forward for many sites. I think the most exciting thing about seeing these best practices develop over the last few years is that it finally feels like web design. Finally. That we’re not designing sheets of [...]

Tutorials

Common Design Styles Used in Album Artwork

Whether we’re on iTunes or Spotify, browsing stores (both online and off) or watching advertisements on TV or in magazines, it’s safe to say that admiring album cover art is a part of daily life for many of us.t As long as music exists, the album design industry will thrive, regardless of how we listen [...]

CSS: Clearing Floats with Overflow

One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But [...]

HTML5 Grayscale Image Hover

Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I’ve put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images [...]

Web Design Directory: web design, web designer, web page and web site design, development firms, programming and HTML.