Advertisement

Building a Responsive Layout With Skeleton: Finishing Off

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
This post is part of a series called Build a Responsive Layout With Skeleton.
Building a Responsive Layout With Skeleton: jQuery Plugins
Building a Responsive Layout With Skeleton: Widescreen

During previous screencasts in this series we've covered a lot of ground, building our responsive (or adaptive) layout with the Skeleton boilerplate. It's now time to finish all the final details; arguably the most time-consuming part of any website build!

Over the course of these three screencasts we'll be looking at nesting columns, flexible video embeds, Skeleton's form elements and tabs. We'll flesh out any missing markup and complete the accompanying CSS. There's a lot to talk about; well over an hour of footage to absorb, so you might need to mentally prepare yourself..


Nesting Columns

We've previously looked at the sixteen column structure of Skeleton and how the styling alters with a few select media queries. We're now going to look at what happens when we nest columns within each other.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


The Sidebar

It's time to add some meat to our sidebar. We'll add all the necessary markup, then begin styling the various sections. Whilst we're doing that we'll quickly talk about Skeleton's form styling and we'll grab some web fonts for our icons.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Flexible Video

If you're serious about flexible web design, you'll need to know how to handle flexible embedded content. In this video we'll take a look at making our video content elastic. There's more to be discussed on the topic, but this basic approach is a great start.

Once we've covered that, we'll quickly talk about Skeleton's tabs, plus we'll add some promotional banners which alter depending on the media queries being used.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!


Flexible Embeds

The subject of flexible embeds is quite an interesting one. Here, for your dissection, are the basic snippets you'll need to start things off. First the markup:

<!--
first we'll need a container for our video,
the 'restraining' element.
-->
<div class="embed">

	<!--  
	here's your embedded content,
	whatever it may be..
	-->
	<iframe></iframe>

</div><!--end embed-->

And then the styles:

/*
firstly we deal with the container element
making it relatively positioned
and defining its height proportionally
to its width - giving us a 16:9 ratio
*/
.embed {
	position: relative;
	padding: 0;
	padding-bottom: 56.25%; /* 16:9 ratio*/
	height: 0;
	overflow: hidden;
}

/*
then we make the actual embedded content 
behave in terms of its dimensions
and its position within the container
*/
.embed iframe,
.embed object,
.embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Note: In the screencast I set the height of the .embed container at 56.25%, I should have set it to zero (hey, I was getting tired..) In most cases this won't have any detrimental effects, but I thought it worth mentioning :)


Additional Resources

Some useful links to further build on what's been covered in these videos.

Advertisement