Revision e6cb370f-addb-41db-9a53-48e5993e30a2 - Code Review Stack Exchange
Since I don't have high enough rep to comment, I'll post this instead...
fyi: @import vs <link> http://stackoverflow.com/questions/7199364/import-vs-link
I'd keep the same master stylesheet if it were me.
----------
EDIT:
`<h1>` or `<img>` as a logo? Debate on... short answer, It depends on the context of the website—is it a single page layout? a personal blog? the next Amazon? Here's a few articles on the subject that will shed some light: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ & http://webmasters.stackexchange.com/questions/4515/h1-vs-h2-vs-other-for-website-title-logo-and-seo & http://www.amberweinberg.com/the-logo-to-h1-or-not-to-h1/ make your own asumptions. I've gone both ways on different projects.
----------
Here's a few links to look up and read into. On a smaller application such as this I doubt it would matter much, however, when you get into larger projects specificity and maintainability will cause you issues. http://css-tricks.com/efficiently-rendering-css/ & http://csswizardry.com/2011/09/writing-efficient-css-selectors/
http://smacss.com/ - if you don't like it, it's at least a great starting point for thinking about maintainability and organization. OOCSS and BEM are the alternative.
Also, there are many ways to approach a menu icon, here's some methods of approach: http://css-tricks.com/three-line-menu-navicon/ I prefer font icons in place of using three elements to make the bars but that's just my opinion.
normalize.css is great! However, http://nicolasgallagher.com/about-normalize-css/ read approach 1:
> Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.
Also, if you're going to use Conditional commenting for IE at least style the `.browsehappy` class so it isn't... you know... bare bones... ;)
I'd steer clear of using heading tags for items such as this ` <h3><a href="#">Learn More About What We Do »</a></h3>` this isn't a heading, but the browser will read it as such, instead create a separate class for it and style it in a heading style if you want it to be bold and larger.
Also, bear in mind, `<section>`'s, `<article>`'s, `<main>`'s, `<footer>`'s, and <heading>'s will always label a heading as null if you don't have one (e.g. untitled) in the semantic outline. I'd drop your code into this: http://gsnedders.html5.org/outliner/ and see if some of those tags shouldn't be replaced with `<div>`'s which hold no semantic value.
as for the html5 portion. It really depends on the support levels you require for browser compatibility. I tend to forego wrapping html5 tags e.g. `<div class="header-container">` as it's a bit repetitive at this point and bulky (but I also tend to only target IE9+ too, anything under I feed a single column, but I'm lazy like that).
I use a very simple starting point for most projects. It's laid out like this:
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="www.google-analytics.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="/libs/css/main.css">
<script src="/libs/js/vendor/modernizr-custom.min.js"></script>
<body>
<header role="banner">
<a href="#"></a>
<h1 role="heading">title</h1>
</header>
<nav role="navigation">
<a role="link" href="#" accesskey="1">Who</a>
<a role="link" href="#" accesskey="2">What</a>
<a role="link" href="#" accesskey="3">When</a>
<a role="link" href="#" accesskey="4">Why</a>
</nav>
<section>
<form role="form" id="email-form" action="#" method="post" novalidate>
<label for="email" id="email-label">Email</label>
<input id="email" aria-labelledby="email-label email-form" type="email" placeholder="e.g. [email protected]" name="email">
<button role="button" aria-labelledby="email-form" type="submit">Submit</button>
</form>
</section>
<main role="main">
<h2 role="heading"></h2>
<article role="article">
<h3 role="heading"></h3>
<section>
<h4 role="heading"></h4>
<p></p>
<strong></strong>
</section>
<aside role="complimentary">
<figure>
<img role="img" src="" width="" height="" alt>
<figcaption></figcaption>
</figure>
</aside>
</article>
<hr role="separator">
<aside role="note">
</aside>
<hr role="separator">
</main>
<footer role="contentinfo">
<h2 role="heading"></h2>
</footer>
<script src="/libs/js/jquery.min.js"></script>
<script>
(function (a, h, d, c, g, f) {
a.GoogleAnalyticsObject = c;
a[c] || (a[c] = function () {
(a[c].q = a[c].q || []).push(arguments)
});
a[c].l = +new Date;
g = h.createElement(d);
f = h.getElementsByTagName(d)[0];
g.src = "//www.google-analytics.com/analytics.js";
f.parentNode.insertBefore(g, f)
}(window, document, "script", "ga"));
ga("create", "UA-XXXXX-X");
ga("send", "pageview");
</script>
P.S. If you're not going to use modernizr or jquery, make sure you don't include the libraries as they're unnecessary at that point.