Mick Redman

Friday 18 March 2011

Example of good Typography Using the Magic number Principle

I've taken much of this example from the excellent article here from Harry Roberts for Smashing Magazine.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using the Magic number Principle</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
margin:1em;
}
h1, h2, h3, p, ul, ol
{
margin-bottom:1.5em;
}
h1
{
font-size:1.5em;
line-height:1em;
}
h2
{
font-size:1.38em;
line-height:1.09em;
}
h3
{
font-size:1.25em;
line-height:1.2em;
}
p
{
font-size:1em;
line-height:1.5em;
}
body > p:first-of-type
{
font-size:1.13em;
line-height:1.33em;
}
strong, code
{
font-variant:small-caps;
}
em, code
{
font-weight:bold;
}
ul
{
list-style:square outside;
}
ul ul, ol ol
{
margin: 0 0 0 3.75em;
}
blockquote
{
   margin:1.25em;
   padding:1.25em
}
</style>
</head>
<body>
<h1>HTML Ipsum Presents</h1>
<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>
<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>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</body>
</html>

Thursday 17 March 2011

Mobile friendly liquid layout #6

Another take on Mobile friendly liquid layout #5.

See demo.

<!DOCTYPE html>

<head>

<title>Mobile friendly liquid layout #5</title>

<!--[if IE]>

<![endif]-->

body

{

font-family:Sans-serif;

background:#FFFFFF;

width:100%;

color:#525252;

}

header, #text, footer, #tasters

{

padding:1em;

}

header, footer

{

height:8em;

}

header

{

float:right;

width:33%;

min-width:26em;

}

#text

{

overflow:hidden;

line-height:1.5em;

}

footer

{

clear:left;

}

h1, h2, h3

{

font-weight:900;

text-transform:uppercase;

color:#FFBC40;

}

{

font-size:4em;

}

{

font-size:2em;

}

#tasters article

{

display:block;

float:left;

width:20%;

}

</style>

</head>

<body>

<h1>Headline 1</h1>

<h1>Headline 2</h1>

<h2>Sub-Header</h2>

</header>

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

</article>

<article><h3>services</h3><p>Introductory text about services</p><p><a href="#">more...</a></p></article>

<article><h3>portfolio</h3><p>Introductory text about portfolio</p><p><a href="#">more...</a></p></article>

<article><h3>contact</h3><p>Introductory text about contact</p><p><a href="#">more...</a></p></article>

</section>

<footer>Footer</footer>

</body>

</html>

Tuesday 15 March 2011

Mobile friendly liquid layout #5

Haven't done one of these in a while so here goes.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mobile friendly liquid layout #5</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#000000;
width:100%;
color:#FFFFFF;
}
header, #text, footer, nav a
{
padding:1em;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
float:left;
width:33%;
min-width:26em;
}
#text
{
overflow:hidden;
line-height:1.5em;
}
footer
{
clear:left;
}
h1
{
font-weight:900;
font-size:4em;
text-transform:uppercase;
}
h1:nth-child(2), h3
{
color:#FFBC40;
}
</style>
</head>
<body>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Headline 1</h1>
<h1>Headline 2</h1>
<h2>Sub-Header</h2>
</header>
<aside id="text">
<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>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
<footer>Footer</footer>
</body>
</html>

Monday 14 March 2011

Google Directions API - not bad

Here, I have provided an example of implementing Google Directions. This should give you the confidence to try more out. I recommend that you visit http://code.google.com/apis/maps/documentation/directions/ for more options.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google Directions API</title>
</head>
<body>
<?php
$params = 'origin=Toddington,Bedfordshire';
$params .= '&destination=Cranfield,Bedfordshire';
$params .= '&region=uk&sensor=false';
$data = json_decode(file_get_contents('http://maps.googleapis.com/maps/api/directions/json?'.$params));
if ($data->status === 'OK')
{
$route = $data->routes[0];
foreach ($route->legs as $leg)
{
foreach ($leg->steps as $step)
{
echo $step->html_instructions .'<br />';
}
}
}
?>
</body>
</html>

Friday 11 March 2011

Google Chart API - Not bad

Here, I have provided an example of implementing Google Charts. This should give you the confidence to try more out. I recommend that you visit http://code.google.com/apis/chart/docs/making_charts.html for more options.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google chart</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$chartURL = 'http://chart.googleapis.com/chart?';
/* Add chart type */
$chartURL += 'cht=bhs';
/* add chart size */
$chartURL += '&chs=600x160';
/* add chart scale */
$chartURL += '&chxt=t&chxl=0:|Low+Value|High+Value';
/* add chart key */
$chartURL += '&chdl=Career|Happiness';
/* add chart colours */
$chartURL += '&chco=35D2AB|000000';
/* add chart values */
$chartURL += '&chd=t:';
$chartURL += '40,';
$chartURL += '80';
$('#chart').attr('src', $chartURL);
});
</script>
</head>
<body>
<img id="chart" />
</body>
</html>

Friday 4 March 2011

Prettier navigation blocks Vertical

This is an effect used by designers to add a little texture to navigation block. It works horizontally just as well if you use border-left and border-right instead of border-top and border-bottom.

See demo.

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

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:sans-serif;
}
nav a, nav a:link, nav a:active, nav a:hover, nav a:visited
{
color:#FFFFFF;
}
nav a
{
display:block;
width:4em;
height:1em;
text-decoration:none;
background:#222222 url(images/buttonbg.png) repeat-x;
padding:1em;
border-top:0.08em solid #FFFFFF;
border-bottom:0.08em solid #CCCCCC;
text-align:center;
}
nav a:hover
{
background:#666666 url(images/buttonbg.png) repeat-x;
border-bottom:0.1em solid #CCCCCC;
}
</style>
</head>
<body>
<section id="mainContent">
<nav>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</nav>
</section>
</body>
</html>

Wednesday 2 March 2011

Nice CSS button

This demonstration relies upon css3pie in order to work in IE. You can get it at http://css3pie.com/
I have tried to use gradients and box shadow to a cool effect.
It seems like a lot of code for a button, but as it's a class, you can create many buttons on the same page with it.
Hope you like it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SoM KI Box</title>

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{

});
</script>
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
.greenButton
{
float:left;
margin:1em;
}
.greenButton .outer, .greenButton .inner, .greenButton .outer:hover, .greenButton .inner:hover
{
position:relative;
behavior:url('scripts/PIE.htc');
}
.greenButton .outer, .greenButton .outer:hover
{
width:8em;
height:8em;
padding-top:0.2em;
padding-left:0.2em;
}
.greenButton .inner, .greenButton .inner:hover
{
border-radius:0.5em;
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
width:7.8em;
height:5.8em;
padding-top:2em;
text-align:center;
}
.greenButton .outer, .greenButton .outer:hover
{
box-shadow:0 0 0.8em #CCCCCC;
-moz-box-shadow:0 0 0.8em #CCCCCC;
-webkit-box-shadow:0 0 0.8em #CCCCCC;
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;
}
.greenButton .outer
{
background-image:-moz-linear-gradient(90deg, #64cc00, #8DE639);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#64cc00), to(#8DE639));
-pie-background:linear-gradient(90deg, #8DE639, #64cc00);
}
.greenButton .inner
{
background-image:-moz-linear-gradient(90deg, #8DE639, #64cc00);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#8DE639), to(#64cc00));
-pie-background:linear-gradient(90deg, #64cc00, #8DE639);
}
.greenButton .outer:hover
{
background-image:-moz-linear-gradient(90deg, #C80043, #E33972);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#C80043), to(#E33972));
-pie-background:linear-gradient(90deg, #E33972, #C80043);
}
.greenButton .inner:hover
{
background-image:-moz-linear-gradient(90deg, #E33972, #C80043);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E33972), to(#C80043));
-pie-background:linear-gradient(90deg, #C80043, #E33972);
}
.greenButton a, .greenButton a:link, .greenButton a:hover, .greenButton a:visited, .greenButton a:active
{
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<section id="mainContent">
<figure class="greenButton">
<section class="outer">
<section class="inner">
<a href="getPageContext.php">Get<br />Page<br />Context</a>
</section>
</section>
</figure>
</section>
</body>
</html>