Tutorial Details
- Topic: Responsive Web Design
- Difficulty: Intermediate
- Screencast duration: 1 hour 20 mins
- Design a Professional Blog Layout in Photoshop
- Building a Responsive Layout With Skeleton: Starting Out
- Building a Responsive Layout With Skeleton: Navigation
- Building a Responsive Layout With Skeleton: jQuery Plugins
- Building a Responsive Layout With Skeleton: Finishing Off
- Building a Responsive Layout With Skeleton: Widescreen
- Skeleton to WordPress: Getting up and Running
- Skeleton to WordPress: Finishing Off
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.
- Creating Intrinsic Ratios for Video on A List Apart
- Skeleton Boilerplate and Documentation
- The Web Symbols typeface from Just Be Nice studio
- Glyn Mooney’s webkit reset for search inputs
- The hilarious 10th December by lewisnluke
- Envato marketplace referral banners
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Pingback: Building a Responsive Layout With Skeleton: Finishing Off | Shadowtek Hosting and Design Solutions
Pingback: Responsive based layouts | Pearltrees
Pingback: Best of Tuts+ in April 2012 | Webdesigntuts+
Pingback: Best of Tuts+ in April 2012 |
Pingback: Best of Tuts+ in April 2012 | Flash Video Traning Source
Pingback: Best of Tuts+ in April 2012 | Gallery.Clipapic
Pingback: Best of Tuts+ in April 2012 | Shadowtek Hosting and Design Solutions
Pingback: Best of Tuts+ in April 2012 - Milk-Break
Pingback: Best of Tuts+ in April 2012 | Omega Pixels
Pingback: Best of Tuts+ in April 2012 | How to Web
Pingback: Best of Tuts+ in April 2012 | clickshots
Pingback: Wordpress Leaks » Best of Tuts+ in April 2012
Pingback: Best of Tuts+ in April 2012 « Webby Treats
Pingback: Best of Tuts+ in April 2012 - InterlaceLab
Pingback: Best of Tuts+ in April 2012 « CSS Tips
Pingback: Use Skeleton Boilerplate to build responsive website
Pingback: Building a Responsive Layout With Skeleton : Widescreen | JDesign's Blog