The Goldilocks Approach to Responsive Web Design Workless - A classy HTML5, CSS3 framework Foundation: HTML Templates News or Magazine This template puts a focus on bold images, perfect for a magazine style site with eye catching content. Your stories are easy to find with large feature blocks. See Demo Real Estate or Travel Big thumbnails with a space for captions and descriptions along with an informative header make this the perfect template for real estate or hotel booking. See Demo Ecommerce Homepage Building an online store? See Demo Agency Bring your work to the forefront with this sleek template that's perfect for agencies or freelancers. See Demo Blog w/ Sidebar Large images, an easy to navigate layout, and versatile sidebar will help you get your blog up and running. See Demo Blog Single Column This sleek, minimal approach can help your blog stand out by putting content front and center. See Demo Portfolio Show off your work and highlight what you do with this grid style thumbnail layout. See Demo Product Page Highlight your new product and educate potential customers with this classic template. See Demo
kit scaffolding All headers from h1 to h6 are available. h3 Header h4 Header h5 Header h6 Header <h1>h1. Text elements You can use tags i or b, but they often use for icons or other stuff, so it is better to avoid them. StrongItalicSmall text Paragraph text <strong>Strong</strong><em>Italic</em><small>Small text</small>This is<abbr title="Abbr">Abbr</abbr><p>Paragraph text</p> Code Use it if you have any code you want to show to user. Address If you want to separate parts of an address, use several address tags. <address> <strong>Vetrenko Maxim</strong> <div>Gagaryinskiy 27 <br/>Moscow <br/> <abbr title="Cell phone">p:</abbr> <span>+7 960 628 6999</span> </div></address><address> <strong>Email</strong> <div> <a>me@maxmert.com</a> </div></address> Blockquotes Quoted blocks used when you have some text cited from another source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Marked lists Numbered lists Descriptions Description lists
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development 34 Responsive Grid System Building a Responsive Layout With Skeleton: Starting Out Dave Gamache's Skeleton Boilerplate provides the perfect foundations upon which to build responsive websites rapidly and reliably. We're going to use Skeleton and build a responsive page based on the Magazine design featured on Webdesigntuts+ recently. We'll be looking at everything from multiple background images, through to media queries, flexible media and mobile-friendly navigation. Let's get started! First Steps In this first video we'll download the Skeleton Boilerplate and prepare our project. Structure and Columns It's time to get stuck into the markup and some styling. We'll also deal with some of the aesthetics by using CSS multiple background images on certain areas. Multiple Background Images Browser support for multiple background images is pretty good, with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all cooperating nicely. Additional Resources Here are a few bits and bobs mentioned in the videos so far:
960 Grid System