Quick website prototyping

by Xavi Esteve
on December 12, 2011
(2 minute read)

This is a little compilation I’ve made of my most used code snippets every time I build a prototype, website or theme. By following these steps you can save 80% of coding time for any HTML/CSS website or WordPress theme. For some of my projects I use the Zen Coding plugin to develop the HTML. Most of the CSS itself is optimized already using short names and what some people call OOCSS (Object Oriented CSS).

1. CSS Reset and Minimal Grid

Yahoo CSS Reset

/* Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0 */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}

960px Grid (12 cols, 60px width, 20px gutter)

/* Minimal Grid */
.g1{width:60px;}.g2{width:140px;}.g3{width:220px;}.g4{width:300px;}.g5{width:380px;}.g6{width:460px;}.g7{width:540px;}.g8{width:620px;}.g9{width:700px;}.g10{width:780px;}.g11{width:860px;}.g12{width:940px;}.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12{overflow:hidden;float:left;display:inline;margin:0 10px;}.r{width:960px;overflow:hidden;margin:0 auto;}.r .r{width:auto;display:inline-block;margin:0 -10px;}

CSS 100% box model

Padding, borders, margins and width equals 100%:

* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing: border-box;}

Common CSS

/* Common CSS */
html {}body {font-family:Arial,sans-serif;font-size:14px;}
a{color:#0085d5;text-decoration:none}a:hover{}
li{display:inline}
h1,h2,h3,h4,h5,h6 {}
strong,.strong {font-weight:900}em,.em {font-style:italic}
.right{text-align:right}.center {text-align:center}
.fright{float:right}.fleft{float:left}
.hide{display:none}

Sprite map

/* Sprite */
#logo,.button,
.sprite{background:transparent url('images/sprite.jpg') no-repeat;}
.ico {display:inline-block;height:16px;width:16px}
.ico.aa {background-position:-px -px}

Forms and buttons

.button{background:#eee;border:1px solid #ccc;cursor:pointer;font-weight:900;padding:5px 10px;text-decoration:none}

CSS for the coming HTML template

/* Main structure */
#wrap {}
#header {}
 #logo {}
  #logo span {display:none}
 #s {}
#topnav {}
 #nav {}
  #nav li {display:inline}
#container {}
 #container a {text-decoration:underline}
 #container li {display:list-item}
 .main {}
 .main h1 {}
 .main h2 {}
 .main p {}

 .side {}
  .side h4 {}
  .side h5 {}
  .side p {}

#footer {}
 #footer p {}
 #footer p a {}

Overlap design watermark for pixel perfect CSS

    <style>
        #watermark {position:fixed;top:0;left:0;width:100%;background:url(images/watermark.jpg) top center;height:5px;opacity:0.2}
        #watermark:hover {height:1000px;opacity:0.5}
    </style>
    <div id="watermark"></div>

2. HTML Zen Coding shortcuts

Typical HTML website structure

With the power of Zen Coding, I can code a full HTML website in one line of code, then press the shortcut (Ctrl+, in Dreamweaver) and voila, there you have all the HTML ready:

html:xt>(div#wrap>(div#header.r>(div.g6>p#logo>span)+(div.g6>form#search>input[type=text]#s+input[type=submit].hide))+(div#topnav.r>div.g12>ul.nav>li*5>a)+(div#container.r>(div.main.g8>div.post>h1+p+img[src=http://dummyimage.com/150x150])+(div.side.g4>h4+p>ul>li*5>a))+(div#footer.r>(div.g6>p>a*1)+(div.g6>p>a*4)))

Here’s the fragmented HTML:

html:xt
div#wrap
div#header.r>div.g6*2
div#header.r>(div.g6>p#logo>span)+(div.g6>form#search>input[type=text]#s+input[type=submit].hide)
div#topnav.r>div.g12>ul.nav>li*5>a
div#container.r>(div.main.g8>div.post>h1+p+img[src=http://dummyimage.com/150x150])+(div.side.g4>h4+p>ul>li*5>a)
div#footer.r>(div.g6>p>a*1)+(div.g6>p>a*4)

Forms and tables

form>label+input:text+input:submit
select#items>option[value=item-$]*3
table>(tr>th*2)+(tr>td*2)

Listings

div.list-vert>(img[src=http://dummyimage.com/100x100]+h3+p.brand+span.rating-5+p.price+(p>a.button-m))

3. WordPress theme

Download the Starter Theme
Add TimThumb
Then grab snippets from WP Snippets
Start coding and customizing

4. WordPress customization

In the functions.php

date_default_timezone_set('Europe/Madrid');
date_default_timezone_set('Europe/London');

TimThumb shortcut

function timthumb($src, $w, $h, $q=90, $zc=1) {
    return get_bloginfo('template_url').'/thumb.php?src='.$src.'&amp;w='.$w.'&amp;h='.$h.'&amp;q='.$q.'&amp;zc='.$zc;
}

Custom field shortcut

function customfield($name, $id="") {
    $value = get_post_custom_values($name, $id);
    return $value[0];
}

Extract images of a post

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

    if(empty($first_img)){ $first_img = "/images/default.jpg"; }
    return $first_img;
}

Nice excerpts

/* This function will trim text without
cutting it in the middle of the word and
adding … if longer
*/
function trimtext($text, $length) {
    $words = explode(" ", strip_tags($text));
    $newtext = "";
    $addhellip = "";
    foreach ($words as $word) {
        if (strlen($newtext." ".$word) < $length) {
            $newtext .= " ".$word;
        }else{
            $addhellip = 1;
            break;
        }
    }
    if ($addhellip) {$newtext .= "…";}
    return $newtext;
}

Get exact current page URL

function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}

Optimize WYSIWYG editor for SEO

if (isset($wp_version)) {
    add_filter("mce_buttons", "extended_editor_mce_buttons", 0);
    add_filter("mce_buttons_2", "extended_editor_mce_buttons_2", 0);
    add_filter('tiny_mce_before_init', 'extended_editor_change_mce_buttons', 0);
}

function extended_editor_mce_buttons($buttons) {
    return array(
        "formatselect", "separator",
        "bold", "italic", "separator",
        "bullist", "numlist", "blockquote", "separator",
        "link", "unlink", "separator",
        "charmap", "separator",
        "pasteword", "separator",
        "fullscreen", "separator",
    );
}

function extended_editor_mce_buttons_2($buttons) {
// the second toolbar line
return array();
}

function extended_editor_change_mce_buttons( $initArray ) {
    $initArray['theme_advanced_blockformats'] = 'p,h2,h3,h4,h5,h6,pre';
    return $initArray;
}

In the wp-config.php

Disable/limit revisions

# Maximum 5 revisions
define('WP_POST_REVISIONS', 5);
# Disable revisions
define('WP_POST_REVISIONS', false);

5. WordPress must-have plugins

Photo by CoffeGeek

Free 100% online banking account

💳 Get your free debit Mastercard

No comments yet

iPad/iPhone/mobile HTML/CSS template for web apps (responsive, no javascript)

CSS Sprite Map in Adobe Fireworks Tutorial

Get notified of new projects I make
Usually one email every 3 months

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.

Follow me on Twitter