The Simplest HTML5 & CSS3 Responsive Grid Ever

This has to be the simplest responsive grid or framework ever. Its so lightweight & can be built in minutes from scratch. No need for bloated frameworks like Twitter Bootstrap.

DEMO

It uses (only) 2 new CSS3 features:

  1. box-sizing
  2. calc()

The ‘box-sizing‘ property should by now be familiar to every front-end developer by now. It forces the browser to include one or more of the padding, border & margin in the specified height and/or width. For example we’ve set our height to 100px, padding to 10px & a border of 1 pixel below.

.box{
	height:100px;
	border:1px solid #CCC;
	padding:10px;
	box-sizing:border-box;
}

Usually, the css box-model would create a box covering a total height of 122px (100px height, 10px by 2 padding for the top & bottom & 1px x 2 for the border top & bottom). With ‘box-sizing’ set to ‘border-box’ the total height is set to 100px, therefore the area available for content is 78px;

The ‘calc()‘ unit value calculator allows us to calculate values by mixing multiple unit types, in our case its percentages & pixels but you can use any css values. These can be added, subtracted, multiplied or divided. The declaration would look something like this:

width:calc(100% - 20px)

Lets say the element in question is in a container 1000px wide, the element would be 980px wide.

box-sizing‘ can be used in this way on Chrome, Firefox (with vendor prefix), Safari, Opera & IE8+
calc()‘ can be used with Chrome, Firefox, Safari (with vendor prefix), Opera & IE9+

The demo below demonstrates the technique with 4, 3, 2 & 1 columns with 2 break points. On desktop it responds at 480px & on iPad it can be demo-ed successfully by rotating the device from landscape to portrait or vice versa.

DEMO
View Source

Simple Responsive Mobile Template

I was playing about with media queries & CSS to test a responsive HTML5 template that adjusts to any device whose width is less than 960px. Its not perfect, just a first attempt. Feel free to use it if you like. You can test it on your mobile or by narrowing your browser.

View Demo»
Download»

Some features include:

View Demo»
Download»

Stick a Footer to the Bottom – HTML5

Below is some updated/streamlined code of my earlier post on how to stick a footer to the bottom of a page whose content is not sufficient to push below the fold. Its using some HTML5 features like the ‘footer’ & ‘header’ tags & lightweight doctype. I’ve embedded the CSS but you can link to an external file. It also has a script to create the HTML5 elements in older Microsoft browsers. Its been tested on modern browsers & seems to work fine….hope it helps.

<!DOCTYPE HTML>
<html>
<head>
<!--[if lte IE 8 ]>
<script>  
    document.createElement("footer");  
    document.createElement("header");    
</script>
<![endif]-->
<style>
    body, html{ height:100%; margin:0; }
    .wrapper{ min-height:100%; }
    header{ height:100px; background:#CCC; overflow:auto; display:block; }
    .content{ padding-bottom: 100px; }
    footer{ height: 100px; width:100%; background:#CCC; margin-top:-100px; display:block; }
</style>
</head>

<body>

    <div class="wrapper">

         <header>This is my header!</header>
         <div class="content">This is my content!</div>

    </div><!--end wrapper-->

    <footer>This is my footer!</footer>

</body>
</html>

CSS Image Rollovers without Javascript

What we want to create.

Web Designers use a few different ways to create rollover images, usually for buttons. The most popular techniques use javascript to preload the hover image or ‘over state’ however pure CSS is a better more efficient technique. Alot of people however only get it half right. 

a{
background:(my-image.jpg);
}
 

a:hover{
background:(my-image2.jpg);
}

The problem here is that when the image is rolled over the second image still needs to be downloaded from the server. The user will usually experience an unsightly delay between the rollover action and the appearance of the replacement image. Visit hosting.digiweb.ie for an example.

Why people use javascript is to preload the second image in the browser so when its called it instantly appears. CSS alone cant preload a second image from the server but there is a clever work around.

 

 

 

 

 

Above we have our 2 images. The left one is the link with the right one being the the rollover. We need these two images loaded with the page but using CSS alone this is not possible. Each image is 240px by 160px.

To get around this we create an image 240px wide by 320px high. Twice the size of the original and place toe 2 images, one on top of the other inside it creating the image below.

null

So now for the HTML. Its fairly simple, just a basic link.

<a href="portrait.html" title="portrait">protrait</a>

CSS Bit.
First we need to define the links style. We’ll set the width & height to 240 x 160 and the background as image1.jpg

a{
background:url(my-image.jpg);
width:240px;
height:160px;
}

This leaves us with a text link with a small piece of the imahe as the background. The width & height atributes are not being used. To activate these we need to add display:block

a{
background:url(my-image.jpg);
width:240px;
height:160px;
display:block
}

Next we need to remove or hide the ‘Portraits’ text. To do this we add line-height:999px

This moves the text 999px down the screen. The problem now is that the text is displayed way down the screen. to hide this we need to add another piece of code: overflow:hidden. This hides everything thats outside the 240px by 160px box.

a#portraits{
background:url(my-image.jpg);
width:240px;
height:160px;
display:block;
line-height:999px;
overflow:hidden;
}

Next we need to specify the rollover. What we do is position the background image 160px higher when the mouse is over the link. We can do this with one line of code.

a:hover{
background:url(my-image.jpg) bottom
}

And there you go. View the finished link here.

Here’s the code:
CSS
a{
background:url(my-image.jpg);
width:240px;
height:160px;
display:block;
line-height:999px;
overflow:hidden;
}

 

a:hover{
background:url(my-image.jpg) bottom;
}

HTML
<a id="portraits" title="portraits" href="#">Portraits</a>;

View the finished link here.

Irish Web Design Gallery


Talented Belfast Designer Lee Munroe has recently launched a Web Design Gallery to showcase Irish talent @ www.webdesignire.com

He claims its a “CSS & Flash Website Design Gallery for Web Designers and Websites from Ireland and Northern Ireland” & that to be included “The website must have an Irish relation (i.e. website or designer based in Ireland or Northern Ireland)”. I’m actually surprised that nobody’s done this before. It should be a good source of inspiration for Irish designers & it would be great if a community could spring up around it maybe in the form of a forum.

It does look very similar to www.bestwebgallery.com but i suppose there’s not alot you can or want to do with a gallery without distracting from the content. All the same, as long as it displays good designs i’ll continue to visit and hopefully submit a few of my own.

How to Stick a Footer to the Bottom with CSS

+++++++++++++++++++++++++++++++++++++++++++++++++++++
PLEASE NOTE: This technique has been updated & streamlined for HTML5.
Click here for the updated post
+++++++++++++++++++++++++++++++++++++++++++++++++++++

CSS footer problem

Ideally we want the situation above, where the footer naturally rests on the bottom of the browser irrespective of the amount of content on the page. In a nutshell, you need to set the height of a container layer or div to 100% and create a content div and a footer div within this.

The content div’s height is also set at 100%. This will push the footer off the bottom of the page, immediately below the fold. Lets say you want the footer to be 100px high.

 

Now set the bottom padding of the content div to 100px. This will create empty space at the bottom of the div for the footer to fit into. Finally, set the top margin of the footer to -100px. This will move the footer up into the 100px space you created with the contents bottom padding.

Simples:)

I’ve created a starting template for all sites I create. You can download it here.

It contains a html file & css starting point. I’ve also added a header along with the footer & content divs. Its 800px wide and centred. its fairly simple to figure out & modify. Have a look.