Advertisement
CSS

Simple HTML 5 & CSS 3 Responsive Layout

Post image

Modern day web-design is no longer about laptop vs. desktop, we have mobile and tablet devices added to the mix. This originally presented developers and designers with a headache. How can you maximise the viewing of your website on a small, mobile device?

The answer is that you make it responsive. With some nifty CSS media query's we can change styles to match the device size, screen type and orientation (portrait and landscape). This feature has given both developers and designers a powerfull tool for creating easily accessible websites.

In this article I'm going to run you through a simple HTML 5 and CSS (3) website that's been optimised for mobile viewing. This will teach you how to use media query's whilst giving you scope to go and create a tablet version of the site.

Here's what we'll be creating:

See the Pen HTML 5 + CSS 3 Responsive Design by lawnch (@lawnch) on CodePen

The Basics

You can choose how to set your webpage up, I'd recommend using two files - index.html and styles.css.

As we're creating a HTML 5 design, we need to create the HTML page with a HTML 5 doctype - yes it's slightly different to HTML 4. Here's the basic HTML for any new HTML 5 webpage -

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
			

Next we want to create a basic CSS file - styles.css. A useful trick with CSS files is to reset all browser styles so we're starting with a blank slate - something the browsers should do for us.. but hey!

Within this code I've included my "clearfix" style - see this tutorial to understand it in more depth.

Importantly, the first style uses the wildcard style - applying the styles to everything. Included within this is "box-sizing: border-box;", this is important for our layout grid as it stops padding influencing the width of elements.

CSS:

* {
		margin: 0;
		padding: 0;
		outline: none;
		
		-webkit-box-sizing: border-box;
  		-moz-box-sizing: border-box;
  		box-sizing: border-box;
	}
	
	*:after, *:before {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	nav,
	section {
	  display: block;
	}
	
	html {
	  	font-size: 100%;
	  	height: auto !important;
		height: 100%;
	  	-webkit-text-size-adjust: 100%;
		  -ms-text-size-adjust: 100%;
	}
	
	.clear {
		display: block;	
	}
		
		.clear:after {
			clear: both;
			content: ".";
			display: block;
			height: 1px;
			visibility: hidden;
		}
			

Generic Styles

Within our document, we need to set some generic page styles which apply globally across many elements.

First of all we need to style the body, setting global font styles and background colors.

Secondally we need to create our generic "wrapper" style that will be used for large screens. If you want your design to span the full width of the page then this isn't needed. By setting the margin: 0 auto; we center the wrapper horizontally using CSS.

The final element of our basic CSS is to style the formatting elements - headings and paragraphs. As a generic style, I've decided to apply a 24px padding horizontally across the formatting elements. Depending on the look and feel you're going for you can change this value. If you do decide to change from 24px, make sure you change all values to keep elements aligned - a key aspect of design.

CSS:

body { 
	background: #fff;
	color: #222;
	-webkit-font-smoothing: antialiased;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1.05em;
	font-weight: 400;
	height: auto !important;
	height: 100%;
	line-height: 1.6em;
	min-height: 100%;
}

.wrapper {
	display: block;
	margin: 0 auto;
	width: 1100px;	
}

h1 {
	border-bottom: 1px solid #eee;
	font-weight: 500;	
	padding: 24px 0 12px;
	margin: 0 24px 24px;
}

h3 {
	margin: 0 0 12px;
	padding: 24px 24px 0;
}

p {
	padding: 0 24px 48px;	
}

	p > a {
		color: rgba(62,188,207,0.96);
		font-weight: bold;	
	}
			

The Header

HTML

As websites can extend vertically a long distance, many web designers have decided to fix the header and navigation bar to the top of page, allowing users easy browsing of their site. Let's give that a go!

HTML 5 has introduced the <header> element; not to be confused with the existing <head> element. With the header element we can define the top of our page and use it to contain our top navigation menu. On the right you can see the header element and it's contained navigation.

As previously discussed within the Easy HTML 5 & CSS 3 Navigation Menu tutorial, you should always use a list to mark-up your site navigation. Now with HTML 5 we can also include the <nav> element, to easily identify this list.

CSS

Styling the new HTML 5 elements with CSS and CSS 3 is no different to before, we just have more to play with.

To position the header element at the top of our page we simply use position: fixed;. This fixes the element in relation to the specified left, right, top, bottom locations. By doing so we loose the integrity of the element, so we must set it to display: block;, allowing us semantically to specify height and width. Defining a line-height and height to the same value allows us to position text in the vertical center of the element, without the need for padding. Simples.

With CSS 3 we can really make the header stand out from other websites. First of all we can use a gradient background, set using linear-gradient(). Not only is this possible, but we can also reduce the opacity of the header, allowing users to see text passing underneath. To reduce the opacity of the background only, you set the color with RGBA - the A standing for Alpha / the opacity. Alpha 1 = on, Alpha 0 = off.

The second CSS 3 style we can use is box-shadow. Combined with a low opacity shadow, we can give the illusion the header is above the main content.

The navigation styling is very similar to my previous tutorial - Easy HTML 5 & CSS 3 Navigation Menu. The two main differences are -

1) I've included a "Logo" style - you don't need this if you have an image as a logo

2) To disable the :hover state on the active link, I've used the :not() CSS 3 selector. The select is styling <li> elements that do not have class="active". This selector is very handy in situations like this, I'd recommend reading up on it to understand other uses.

HTML:

<header>
	<nav class="wrapper">
		<ul>
			<li class="logo"><a href="#">Sitename</a></li>
			<li><a href="#">Blog</a></li>
			<li class="active"><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
			

CSS:

header {
	background: linear-gradient(to left,rgba(54,194,182,0.96) 0,rgba(62,188,207,0.96) 100%);
	border-bottom: 1px solid rgba(0,0,0,.1);
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
	display: block;
	height: 60px;
	line-height: 60px;
	overflow: hidden;
	position: fixed;
	text-transform: uppercase;
	width: 100%;
	z-index: 1000;
}

nav > ul {
	list-style-type: none;
	margin: -1px 0 0 0;
}

	nav > ul > li {
		display: inline-block;
		transition: all 0.1s linear;
	}
	
		nav > ul > li > a {
			color: rgba(255,255,255,.75);
			display: block;
			font-size: .8em;
			font-weight: 600;
			letter-spacing: 1px;
			padding: 0 24px;
			text-decoration: none;
			text-shadow: 0 1px 1px rgba(0,0,0,.1);
		}
		
			nav > ul > li.active > a,
			nav > ul > li.logo > a {
				color: rgba(255,255,255,1);	
			}
		
			nav > ul > li:not([class="active"]):hover {
				background-color: rgba(0,0,0,.1);	
			}
		
			nav > ul > li.logo > a {
				font-family: Georgia, "Times New Roman", Times, serif;
				font-size: 1.15em;
				font-style: italic;
				letter-spacing: normal;
				text-transform: none;
			}
			

Creating the Grid

As the tutorial isn't dedicated to CSS Grid creation, I've limited the number of grid elements within the CSS. A typical CSS Grid system will include a variety of different grid elements, I'd recommend adding more as you expand the design.

For a better understanding of how CSS Grids work, have a look at my article - CSS 3 Grid system, all it's cracked up to be?

The first and most important style within the CSS Grid styles defines how all grid elements should act. It uses a CSS 3 selector, combined with the wildcard selector. Simply put, [class*="col-"] says - "look for elements where the class contains 'col-'". This selector is very useful when creating large-scale sites. I'm finding myself using it more and more.

By specifying a style for the first "col-" element, we can alter the guttering for the grid elements, stopping elements displaying on-top of eachother.

The final three styles define our three grid elements. This is where you can add more sizes to fit your need. For example, col-1-2. The naming convention I've used works as a fraction, use whatever you best understand.

CSS:

[class*="col-"] {
	display: block;
	float:left;
	margin: 0 0 0 1.6%;
}

[class*="col-"]:first-of-type {
	margin: 0;
}

	.col-1 {
		width: 100%;	
	}
	
	.col-2-3 {
		width: 66.1%;	
	}
	
	.col-1-3 {
		width: 32.2%;	
	}
			

Example HTML Use:

<div class="col-2-3">
	<h1>About</h1>
</div>
			

Styling the Design Body

The content area of the design is very simple. The key aspect is to remember to add significant padding to the top of the container to clear the navigation bar, if this isn't done then you'll find your content is underneath the header and won't be easily visible. To achieve this I've specified a 90px padding at the top and bottom of the main container element.

I've also included a sidebar style to the design. This allows you to include a sub-navigation and other content specific lists. As the sidebar and content areas are both positioned by the grid system, we don't need to specify any of the positioning styles again - such as float or clear. As a result, the sidebar style is purely asthetic (visual).

CSS:

section#content-main {
	padding: 90px 0;	
}

section#content-main > .sidebar {
	background-color: #fafafa;
	border: 1px solid #eee;	
	border-radius: 5px;
	color: rgb(153,153,153);
	font-size: .9em;
}
			

Going Responsive

As mentioned earlier, the key to creating a responsive design is CSS Media Query's. These are small query's or statements with CSS and HTML that specify when to use specific elements styles.

The method I've included within this tutorial is purely the CSS method. The HTML method of CSS Media Query's allows you to include different .css files depending on the criteria. This is great for larger sites where you may decide to create screen.css, mobile.css and tablet.css. For this example, it's not needed.

On the right you can see an example media query. The query includes two statements/query's -

  • Is this being viewed on a screen?
  • Is the width of the screen / browser 480px or less?

If both of the above statements are true then the browser will render the styles within the two parenthesis.

To take this query to the next level, you may decide to use (max-width: 800px; min-width: 480px) - similar to a tablet or old monitor display.

With this in mind, the second code-block shows the responsive styles for our design.

Remember: The responsive styles are adding to our other styles, they're not instead of. This is because we've specified global styles, and not individual query's, i.e. 1 for normal screens (queried), 1 for tablets (queried), 1 for mobile (queried).

CSS - example media query:

@media only screen and (max-width: 480px) {

}
			

CSS:

/*RESPONSIVE*/	
	@media only screen and (max-width: 480px) {
		.wrapper {
			width: 480px;	
		}
		
		header {
			height: auto;
			position: relative;
			width: 480px;
		}
		
		nav > ul > li {
			display: block;	
		}
		
		[class*="col-"] {
			margin: 0;
			width: 100%;	
		}
		
		section#content-main > .sidebar {
			border-radius: 0;
			border-left: 0;
			border-right: 0;	
		}
	}
			

The Code

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Responsive Layout</title>
<link href="css3_responsive.html.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
	<header>
		<nav class="wrapper">
			<ul>
				<li class="logo"><a href="#">Sitename</a></li>
				<li><a href="#">Blog</a></li>
				<li class="active"><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>
	<section id="content-main" class="wrapper clear">
		<div class="col-2-3">
			<h1>About</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis nulla in porttitor pharetra. Proin sit amet ipsum non tellus imperdiet viverra sed et sem. Nullam ligula tellus, feugiat a dolor ac, laoreet hendrerit neque. Donec vitae congue dui. Nulla varius lobortis nunc in adipiscing. Mauris sollicitudin tortor nec quam dapibus, nec euismod sem tincidunt. Sed sed ante urna. Curabitur sollicitudin enim id sapien fringilla pharetra in nec lectus. Praesent quis dolor bibendum lacus ullamcorper convallis nec consequat ligula. Sed augue ligula, feugiat sodales elit id, pretium tristique tortor. Proin malesuada tellus vel augue pharetra, a tempor massa varius. Quisque non euismod ipsum. Sed diam turpis, posuere at velit ut, vehicula faucibus nisi. Fusce rhoncus tincidunt erat vitae tincidunt.</p>
			<p>Suspendisse sed turpis vitae turpis condimentum eleifend. Ut faucibus iaculis urna, ut fringilla neque tristique a. Fusce dui nulla, venenatis lobortis dui eu, porta rutrum sapien. Donec lobortis est vel magna semper laoreet. Donec eu tortor pulvinar, sagittis nulla ac, adipiscing mauris. Vivamus iaculis commodo mattis. Aliquam vehicula, diam sit amet sagittis imperdiet, felis nulla molestie velit, quis luctus dui mi vel libero. In lobortis, velit id tincidunt venenatis, sapien tortor gravida quam, non condimentum enim erat nec purus. Ut velit nisl, vulputate eu sapien non, tristique mollis neque.</p>
		</div>
		
		<div class="col-1-3 sidebar">
			<h3>Corporate Pages</h3>
			<nav>
				<ul>
					<li class="active"><a href="#">About the company</a></li>
					<li><a href="#">Meet the Team</a></li>
					<li><a href="#">Our Mission</a></li>
				</ul>
			</nav>
		</div>
	</section>
	<footer class="wrapper">
		<div class="col-1">
			<p>Copyright MySite.com 2014 ©</p>
		</div>
	</footer>
</body>
</html>
			

CSS:

@charset "UTF-8";
/* CSS Document */
/*RESET*/
* {
	margin: 0;
	padding: 0;
	outline: none;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

html {
	font-size: 100%;
	height: auto !important;
	height: 100%;
	-webkit-text-size-adjust: 100%;
	  -ms-text-size-adjust: 100%;
}

.clear {
	display: block;	
}
	
	.clear:after {
		clear: both;
		content: ".";
		display: block;
		height: 1px;
		visibility: hidden;
	}

/*GENERIC STYLES*/

body { 
	background: #fff;
	color: #222;
	-webkit-font-smoothing: antialiased;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1.05em;
	font-weight: 400;
	height: auto !important;
	height: 100%;
	line-height: 1.6em;
	min-height: 100%;
}

.wrapper {
	display: block;
	margin: 0 auto;
	width: 1100px;	
}

header {
	background: linear-gradient(to left,rgba(54,194,182,0.96) 0,rgba(62,188,207,0.96) 100%);
	border-bottom: 1px solid rgba(0,0,0,.1);
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
	display: block;
	height: 60px;
	line-height: 60px;
	overflow: hidden;
	position: fixed;
	text-transform: uppercase;
	width: 100%;
	z-index: 1000;
}

footer {
	border-top: 1px solid #eee;
	color: rgba(0,0,0,.4);
	font-size: .75em;
	letter-spacing: 1px;
	padding: 24px 0;
	text-transform: uppercase;	
}

/*NAV*/
nav > ul {
	list-style-type: none;
	margin: -1px 0 0 0;
}

	nav > ul > li {
		display: inline-block;
		transition: all 0.1s linear;
	}
	
		nav > ul > li > a {
			color: rgba(255,255,255,.75);
			display: block;
			font-size: .8em;
			font-weight: 600;
			letter-spacing: 1px;
			padding: 0 24px;
			text-decoration: none;
			text-shadow: 0 1px 1px rgba(0,0,0,.1);
		}
		
			nav > ul > li.active > a,
			nav > ul > li.logo > a {
				color: rgba(255,255,255,1);	
			}
		
			nav > ul > li:not([class="active"]):hover {
				background-color: rgba(0,0,0,.1);	
			}
		
			nav > ul > li.logo > a {
				font-family: Georgia, "Times New Roman", Times, serif;
				font-size: 1.15em;
				font-style: italic;
				letter-spacing: normal;
				text-transform: none;
			}

/*BODY*/
section#content-main {
	padding: 90px 0;	
}

section#content-main > .sidebar {
	background-color: #fafafa;
	border: 1px solid #eee;	
	border-radius: 5px;
	color: rgb(153,153,153);
	font-size: .9em;
}

	section#content-main > .sidebar ul {
		list-style-type: none;	
	}
	
		section#content-main > .sidebar ul > li {
			display: block;	
		}
		
			section#content-main > .sidebar ul > li > a {
				color: rgba(153,153,153,.75);
				display: block;
				padding: 6px 24px;
				text-shadow: none;
			}
			
				section#content-main > .sidebar ul > li.active > a {
					color: rgba(62,188,207,0.96);
				}

/*GRID*/

[class*="col-"] {
	display: block;
	float:left;
	margin: 0 0 0 1.6%;
}

[class*="col-"]:first-of-type {
	margin: 0;
}

	.col-1 {
		width: 100%;	
	}
	
	.col-2-3 {
		width: 66.1%;	
	}
	
	.col-1-3 {
		width: 32.2%;	
	}

/*STYLE ELEMENTS*/

h1 {
	border-bottom: 1px solid #eee;
	font-weight: 500;	
	padding: 24px 0 12px;
	margin: 0 24px 24px;
}

h3 {
	margin: 0 0 12px;
	padding: 24px 24px 0;
}

p {
	padding: 0 24px 48px;	
}

	p > a {
		color: rgba(62,188,207,0.96);
		font-weight: bold;	
	}

/*RESPONSIVE*/	
@media only screen and (max-width: 480px) {
	.wrapper {
		width: 480px;	
	}
	
	header {
		height: auto;
		position: relative;
		width: 480px;
	}
	
	nav > ul > li {
		display: block;	
	}
	
	[class*="col-"] {
		margin: 0;
		width: 100%;	
	}
	
	section#content-main > .sidebar {
		border-radius: 0;
		border-left: 0;
		border-right: 0;	
	}
}

			
Advertisement
You may also like:
comments powered by Disqus