Mick Redman: June 2011

Tuesday, 28 June 2011

PHP, JSON basic example using Topsy Otter

Topsy Otter

Otter API is a RESTful HTTP web service to Topsy. Topsy is a search engine that ranks links, photos and tweets by the number and quality of retweets they receive. The quality of retweets is determined by the influence of the Twitter users.

Below I have used PHP to display results of an Otter call which returns JSON. The results are for the most popular stories on wired.com today.

<?php
$data = json_decode(file_get_contents("http://otter.topsy.com/search.json?q=site:wired.com&window=d"));

foreach ($data as $name => $value)

{

echo $value->total.'<br />';

getAllItems($value->list);

}

function getAllItems($iarr)
{
foreach((array)$iarr as $itemName => $itemValue)
{
echo $itemValue->content.'<br />';
}
}
?>

SIMPLE LAYOUT #37

This example makes use of borders and spacing. It's not a bad starting position.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Design Template 37</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Quattrocento&v1' rel='stylesheet' type='text/css'>
<style>
body
{
font:0.96em/1.5em Sans-serif;
width:60em;
margin:auto;
color:#333333;
}
header, nav, section, footer, aside
{
margin:0.5em;
border:0.5em solid #EEEEEE;
}
header, nav, section, footer
{
padding:0.5em;
}
header, section
{
width:36.5em;
}
header, section
{
float:left;
}
nav, aside
{
float:right;
}
section, footer
{
clear:both;
}
nav
{
text-align:center;
width:18em;
height:3em;
padding-top:2em;
background:#94D5F8 url(images/bluefade.png) repeat-x;
}
aside
{
width:19em;
}
img
{
margin:0 0 -0.35em 0;
}
p
{
text-align:justify;
margin-bottom:0.5em;
}
h1
{
color:#0693E2;
font:4em 'Quattrocento', arial, serif;
text-transform:lowercase;
}
h1 .last-letter
{
color:#AAAAAA;
}
nav a
{
margin:0.5em;
text-decoration:none;
color:#FFFFFF;
}
nav a:hover
{
text-decoration:underline;
}
</style>
</head>
<body>
<br />
<header><h1>Header <span class="last-letter">1</span></h1></header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<section>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<aside>
<img src="http://lorempixum.com/291/300/technics" />
</aside>
<footer><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></footer>
</body>
</html>

PHP, JSON basic example using delicious

Here is an example of extracting and displaying JSON results through PHP. In this instance, I am using my delicious feed.
Having received the data and decoded it into an array, I like to see the structure of the data. This is where the <pre> tags come in handy. Once you have seen the structure, you know how to traverse and pick out the values you need. Given that the code below is so small, I have commented it.

<?php
/* Get the data and put it into an array */
$data = json_decode(file_get_contents("http://feeds.delicious.com/v2/json/guitarbeerchocolate"));

/* Display the structure of the data so that we know what to extract */
/* Comment out once understood */
echo '<pre>';
print_r($data);
echo '</pre>';

/* Traverse the array, picking out the values you need */
foreach ($data as $name => $value)
{
echo $value->u.'<br />';
echo $value->d.'<br />';
getAllItems($value->t);
echo $value->dt.'<br />';
echo $value->n.'<br />';
echo $value->a.'<br />';
}

/* Some values in this case, tags are themselves arrays so traverse those too */
function getAllItems($iarr)
{
foreach($iarr as $item)
{
echo $item.', ';
}
echo '<br />';
}
?>

Monday, 27 June 2011

PHP Form, jQuery, working in IE

Some days, you start by saying, "'I'll just get this out of the way, then I can concentrate on something heavier". You then write code without testing because you know how it works, and apart from a little syntax change, you get it working fine. About 15 minutes. This was my experience with writing a page with a form. It stored the data in a text file, then updated the page tag with the new contents. It worked fine in Chrome and Firefox. Then the dreaded IE pulled me back. 3 hours later, I find the solution. Below are code examples to a common problem.
Create a html form.
On submission, write the contents of the form to a file.
Once the file has been updated, refresh a section showing the new content.

Here is the code for readdata.php. Notice the @ before file_get_contents. This suppresses a warning if the file does not already exist.

<?php
foreach (explode("\n", @file_get_contents('data.data')) as $value)
{
echo $value."<br />";
}
?>
Here is the code for writedata.php. Nothing particularly clever here.

<?php
file_put_contents('data.data', $_POST['stuff']."\n", FILE_APPEND);
?>
Now to the main page. A few of important items here:

Only $.get works in IE .load doesn't.
$.ajaxSetup({cache: false}) is also required for IE otherwise you get all sorts of content varients coming through.
I used the jQuery Form Plugin from http://jquery.malsup.com/form/ It saves a lot of problems.

Have fun.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Read and write using jquery</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="jquery.form.js"></script>
<script>
$.fn.readStuff = function()
{
$.get('readdata.php', null, function(data)
{
$('section').html(data);
});
$('#stuff').val('');
}
$(document).ready(function()
{
$.ajaxSetup({cache: false});
$('form').ajaxForm(function()
{
$(this).readStuff();
});
});
</script>
</head>
<body>
<h1>PHP and jQuery read/write test</h1>
<h2>Write data</h2>
<form action="writedata.php" method="POST">
<input type="text" name="stuff" id="stuff" />
<input type="submit" />
</form>
<h2>Read data</h2>
<section>
<?php
include 'readdata.php';
?>
</section>
</body>
</html>

Friday, 17 June 2011

External web content in your page through the PHP Simple HTML DOM Parser

The excellent PHP Simple HTML DOM Parser, provides the opportunity to bring external content into your web pages.

Here is an example of taking the top news story from the BBC website.

See demo.

<?php
include'simple_html_dom.php';
$html = file_get_html('http://www.bbc.co.uk/news/uk/');
foreach($html->find('#top-story') as $e)
{
echo $e->innertext . '<br />';
}
?>

Using PHP to create a dynamic page navigation based on filenames

Here is the problem. You create a bunch of pages. You want to highlight the current page within the navigation. You don't want to manually change the navigation elements to each page.

See demo.

In the example below I create an associative array which contains two elements:

The name of the page which the navigation points to.
The name which should appear in the navigation.

I then grab the filename of the of the current page in the browser.
I then traverse the associative array, each time comparing the filename against the current file shown in the browser, each time creating an anchor using the values.

If array filename and current page filename are the same, then I add a CSS ID to the anchor tag.

You will need to write a little CSS to highlight the current page anchor such as:

nav a#activeMenuItem
{
background:#EEEEEE;
}

But other than that, it works like a charm. Have fun!

<nav>
<?php
$navArray = array('index.php'=>'home', 'services.php'=>'services','portfolio.php'=>'portfolio','contact.php'=>'contact');
$fileName = substr(strrchr($_SERVER['SCRIPT_NAME'],47),1);
foreach($navArray as $fname => $linktitle)
{
echo '<a href="'.$fname.'"';
if($fname==$fileName)
{
echo ' id="activeMenuItem"';
}
echo '>'.$linktitle.'</a>';
}
?>
</nav>

Monday, 13 June 2011

Using lorempixum as background images

I've been finding lately that lormepixum is also pretty darn useful in providing background images.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>lorempixum background</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css'>
<style>
#content
{
margin:auto;
width:40em;
min-height:40em;
background:url(http://lorempixum.com/g/640/640/food) no-repeat;
padding:1em;
}
h1
{
font:4em/1.5em 'Ultra', arial, serif;
color:orange;
}
h2
{
font:2em/1.5em 'Ultra', arial, serif;
}
h3
{
font:1em/1.5em 'Ultra', arial, serif;
}
h2, h3
{
color:#4577D4;
}
#innerText
{
background:url(images/opaque.png);
width:37em;
font:1em/1.5em Sans-serif;
color:#222222;
padding:0.5em;
}
</style>
</head>
<body>
<section id="content">
<header><h1>Header 1</h1></header>
<section id="innerText">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</section>
</section>
</body>
</html>

Friday, 10 June 2011

Simple liquid grid layout

I was reading this blog post earlier today, in which it recommends to "Use liquid layouts" and "Roll your own grids". The example below does just this, so with jQuery mobile, fttext etc. I may just be in a good place to develop responsive web designs.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Liquid Grid</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol, .goldenRatioLeft, .goldenRatioRight
{
clear:left;
}
.oneCol
{
width:100%;
}
.twoCol section
{
width:50%;
}
.threeCol section, .goldenRatioLeft section.first, .goldenRatioRight section.last
{
width:33.3%;
}
.oneCol, .twoCol section, .threeCol section, .goldenRatioLeft section, .goldenRatioRight section
{
background:#EEEEFE;
float:left;
}
.goldenRatioLeft section.double, .goldenRatioRight section.double
{
width:66.6%;
}
h1, p
{
margin:0.5em;
}
</style>
</head>
<body>

<section class="oneCol">
<h1>Header 1</h1>
</section>

<section class="twoCol">
<section class="first"><p>Column 1 of 2 columns.</p></section>
<section><p>Column 2 of 2 columns.</p></section>
</section>

<section class="threeCol">
<section class="first"><p>Column 1 of 3 columns.</p></section>
<section class="second"><p>Column 2 of 3 columns.</p></section>
<section><p>Column 3 of 3 columns.</p></section>
</section>

<section class="goldenRatioLeft">
<section class="first"><p>Golden ratio left column 1.</p></section>
<section class="double"><p>Golden ratio left column 2.</p></section>
</section>

<section class="goldenRatioRight">
<section class="double"><p>Golden ratio right column 1.</p></section>
<section class="last"><p>Golden ratio right column 2.</p></section>
</section>

</body>
</html>

Fittext - Not bad

I came across a great new jQuery plugin today. Namely FitText. I've done dynamic text resizing myself before, but this seems like a better implementation. To test it, resize your browser.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>FitText</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
h1
{
font-size:4em;
color:red;
line-height:1.5em;
}
h2
{
font-size:3em;
color:orange;
line-height:1em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="scripts/jquery.fittext.js"></script>
<script>
$(document).ready(function()
{
$('.fittext').fitText();
});
</script>
</head>
<body>
<header><h1 class="fittext">Header 1</h1></header>
<section id="mainContent">
<h2 class="fittext">It's all in the detail</h2>
<article>
<p class="fittext">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>

Tuesday, 7 June 2011

SIMPLE LAYOUT #36

This latest layout makes use of a seamless, tiled paper texture. Hope you like it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design template 36</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli:light,regular' rel='stylesheet' type='text/css'>
<style>
*
{
background:url(images/sedona.jpg);
}
body
{
margin:auto;
width:60em;
font:1em/1.5em 'Muli', arial, serif;;
color:#E5D6C3;
}
.floatLeft, aside, article, footer
{
margin:0.5em;
}
.floatLeft, aside
{
width:29em;
float:left;
}
section, footer
{
clear:both;
}
section#titleImages
{
float:right;
margin:-7.5em 0.5em 0 0;
}
article
{
width:19em;
float:left;
}
h1, h2, h3, h4
{
font-family:'Playfair Display', arial, serif;
color:white;
}
h1
{
font-size:7em;
margin:0.5em 0 0.25em 0.05em;

}
h2
{
font-size:2em;
margin:1.5em 0 0em 0.25em;
}
h3, h4
{
font-size:1.6em;
margin:0.5em 0 0.25em 0em;
}
p
{
text-align:justify;
}
</style>
</head>
<body>
<header>
<h1>Header 1</h1>
<h2>Strapline for you</h2>
</header>
<section id="titleImages">
<img src="http://lorempixum.com/150/150/food" />
<img src="http://lorempixum.com/150/150/technics" />
<img src="http://lorempixum.com/150/150/people" />
</section>

<section class="floatLeft">
<header>
<h3>Section header</h3>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<aside>
<header>
<h3>Aside header</h3>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>
<section>
<article>
<img src="http://lorempixum.com/300/300/food" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
<article>
<img src="http://lorempixum.com/300/300/technics" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
<article>
<img src="http://lorempixum.com/300/300/people" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
</section>
<footer>This is my footer which goes on quite a long time.</footer>
</body>
</html>

Monday, 6 June 2011

lorempixum placeholder

I am going to start using the placeholder from http://lorempixum.com/ from here on. In my last post, I added one of my GIMP creations, but it didn't give the best effect, so I've now added on of these placeholders.

Your also going to fined some of the code I use even leaner. I've been reading the excellent Smashing Book #2. It contains many of the things I'm interested in at the moment and has been improving the quality of my work no end.

For those of you with an addiction for free design code, here is a nice font display.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font test</title>

<link rel="stylesheet"
href="http://meyerweb.com/eric/tools/css/reset/reset.css" /> <style> body {
background:#CCCCCC;
color:#777777;
font:italic 1.1em/1.2em Georgia, serif; } p {
margin:4em;
width:20em;
text-align:justify;
}
</style>
</head>
<body>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</body>
</html>

Friday, 3 June 2011

Simple layout #35

The template is very similar to a previous one. I've just changed the colours, fonts, etc. This does give an entirely different impression and can therefore act as an inspiration for doing other things with the design.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 35</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<style>
body
{
margin:auto; /* center in viewport */
width: 960px;
background:#333333;
}
body, nav a
{
color:#999999;
}
nav
{
text-align:center;
}
nav a
{
float:right;
display:block;
text-decoration:none;
padding:0.25em 0 0.5em 0;
margin:0 0.2em 0 0;
background:#444444;
}
nav a:hover
{
background:orange;
color:white;
}
h1
{
font:6em/1em 'Anton', arial, serif;
color:orange;
}
h2
{
font:2em 'Anton', arial, serif;
color:#A66C00;
}
section p, footer p, img, hgroup
{
margin:0.5em 1em 1em 1em;
}
#glass
{
width:28em;
}
p, a
{
font:normal 0.9em/1.5em Sans-serif;
}
.j
{
text-align:justify;
}
</style>
</head>
<body class="yui3-g">
<section class="yui3-u-1-2"></section>
<nav class="yui3-u-1-2">
<a href="#" class="yui3-u-1-5">home</a>
<a href="#" class="yui3-u-1-5">services</a>
<a href="#" class="yui3-u-1-5">portfolio</a>
<a href="#" class="yui3-u-1-5">contact</a>
</nav>
<header class="yui3-u-1">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
</header>
<section id="glassHolder" class="yui3-u-1-2">
<img src="http://lorempixum.com/400/300/food" id="glass" />
</section>
<section class="yui3-u-1-2 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<section class="yui3-u-1-3 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section class="yui3-u-1-3 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section class="yui3-u-1-3 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<footer class="yui3-u-1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></footer>
</body>
</html>

Thursday, 2 June 2011

Simple layout #34

In this example I have applied a couple of corners to the background. I have then added text colours which would contrast with both foreground and background colours.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two corners</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
<style>
body
{
color:#777777;
}
#topLeft, #bottomRight
{
position:absolute;
width:100%;
height:100%;
}
#topLeft
{
background:url(images/topLeftGrey.png) no-repeat left top;
z-index:-10;
}
#bottomRight
{
background:url(images/bottomRightGrey.png) no-repeat right bottom;
z-index:-9;
}
section#mainContent
{
padding:0.5em 0 0 2em;
}
h1
{
font:3em/2em 'Ultra', arial, serif;
color:orange;
}
p
{
text-align:justify;
font:1em/1.5em 'Maven Pro', arial, serif;
}
article
{
float:left;
width:58.5%;
}
aside
{
text-align:center;
}
aside img
{
width:14em;
}
</style>
</head>
<body>
<section id="topLeft"></section>
<section id="bottomRight"></section>
<section id="mainContent">
<h1>It's all in the detail</h1>
<article>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</article>
<aside>
<img src="images/blueGreen.png" />
</aside>
</section>
</body>
</html>

Wednesday, 1 June 2011

Simple layout #33

I haven't done a simple design layout in a while. Haven't had much time to be honest. This one is very simple. Two fonts, 1 colour, but there is an idea how very small.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 33</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Arvo:regular' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<style>
body
{
font:0.9em/1.5em Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:60em;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:6em;
background:#00A6F2;
padding:0.5em 0 0.5em 0;
}
#middlePart
{
min-height:2em;
}
#bottomPart
{
min-height:2em;
}
#pictureHolder, #wordedContent
{
float:left;
width:48%;
}
h1, h2, h3
{
font-family:'Arvo', arial, serif;
}
h1
{
font-size:4em;
line-height:1em;
}
h2
{
font-size:2em;
}
h3
{
margin:1.5em 0 1.5em 0;
font-size:1.5em;
color:#00A6F2;
}
p
{
font-family: 'Muli', arial, serif;
text-align:justify;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<section id="topPart">
<header class="contentHolder">
<h1>Hello</h1>
<h2>And welcome to my website...</h2>
</header>
</section>
<section id="middlePart">
<section class="contentContainer">
<article id="pictureHolder">
<a href="http://www.ourecohouse.info/"><img src="http://www.publicdomainpictures.net/pictures/1000/nahled/1-1203254406i5t0.jpg" alt="An Egg by Petr Kratochvil" /></a>
</article>
<aside id="wordedContent">
<h3>Let's create something beautiful<br />
From something simple</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</aside>
</section>
</section>
</body>
</html>