Responsive HTML5/CSS Code Review

Question

Please review my code based off an responsive Initializr template. It's functional and visually correct, but I know there's better ways to write the code. Let me know if I can layout the HTML5 better and/or best practices I'm not using for CSS selectors because I feel my stylesheet is all over the place.

HTML

    <!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if lt IE 9]><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Site - example.org</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <div class="header-container">
            <header class="clearfix">                
                <nav>
                    <h1><a href="/"><img src="img/logo.png" class="logo" alt=""></a></h1>
                    <div class="toggle">
                        <span class="bars-btn"></span>
                        <span class="bars-btn"></span>
                        <span class="bars-btn"></span>
                    </div>
                    <div class="social">    
                        <ul>
                            <li><a href="http://www.facebook.com" class="facebook" target="_blank"></a></li>
                            <li><a href="http://www.twitter.com" class="twitter" target="_blank"></a></li>
                        </ul>
                    </div>                     
                    <ul class="accordion">
                        <li><a href="#">About Us</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>    
                        </li>   
                        <li><a href="#">Programs</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>    
                        </li> 
                        <li><a href="#">News and Events</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>
                        </li> 
                        <li><a href="#">Apply</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>     
                        </li>                          
                        <li><a href="#">Donate</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>    
                        </li>                          
                        <li><a href="#">Contact</a>
                            <ul>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                                <li><a href="#">Sub</a></li>
                            </ul>    
                        </li>                          
                    </ul>
                </nav>
            </header>
        </div>

        <div class="slider-container">
            <div class="slider">

                <article>
                    <section>
                        <h1>Lorem ipsum dolor sit amet, te idque corpora sit.</h1>
                        <p><a href="#">Learn More About What We Do &raquo;</a></p>
                    </section>
                </article>

            </div> <!-- #main -->
        </div> <!-- #slider-container -->

        <div class="highlighter-container">
            <div class="highlighter wrapper clearfix">

                <ul>
                    <li class="apply-btn"><a href="#">Apply</a></li>
                    <li class="donate-btn"><a href="#">Donate</a></li>
                    <li class="events-btn"><a href="#">Events</a></li>
                    <li class="volunteer-btn"><a href="#">Volunteer</a></li>
                </ul>

            </div> <!-- #main -->
        </div> <!-- #hig-container -->

        <div class="main-container">
            <div class="main wrapper clearfix">

                <aside>
                        <iframe width="499" height="281" src="//www.youtube.com/embed/mbfbzKquYYI" frameborder="0" allowfullscreen></iframe>
                </aside>

                <article>
                    <section>

                        <p>Lorem ipsum dolor sit amet, te idque corpora sit. Duo eu quas omittam, ex vis invidunt prodesset, est quem oblique at. Accusata consequat interesset ad eos, id prima vocent audire his, senserit indoctum at sit. Pro graeco reprehendunt in, vel equidem dolorum consequat id, no sea paulo platonem explicari.</p>

                        <p>Lorem ipsum dolor sit amet, te idque corpora sit. Duo eu quas omittam, ex vis invidunt prodesset, est quem oblique at. Accusata consequat interesset ad eos, id prima vocent audire his, senserit indoctum at sit.</p>

                        <h3><a href="#">Learn More About What We Do &raquo;</a></h3>
                    </section>
                </article>

            </div> <!-- #main -->
        </div> <!-- #main-container -->

        <div class="footer-container">
            <footer class="wrapper">
                <div class="legal">
                    <p><a href="#">Privacy Policy</a> | <a href="#">Legal Provisions</a></p>
                </div>

                <div class="copyright">
                    <p>12345 Fake St., Springfield IL<br><a href="tel:800-555-5555" class="telephone">(800) 555-5555</a></p>

                    <p><small>Copyright &copy; 2013 Site</small></p>

                </div>
            </footer>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>        
        <script src="js/main.js"></script>
    </body>
</html>

CSS

body {
    font-family: 'Open Sans', sans-serif;
    color: #4C4C4E;
}

a {
    text-decoration: none;
}

.wrapper {
    width: 93.445%;
    margin: 0 auto;
}

/* ===================
    ALL: Orange Theme
   =================== */

.header-container {
/*    background-color: transparent;*/
}

.light-gray {
    background-color: #F5F5F6;
}

.slider-container {
    background-color: #E6E7E8;
}

.finder-container {
    display: none;
}

.footer-container {
    background-color: transparent;
}

/* ==============
    MOBILE: Menu
   ============== */

header nav {
    width: 100%;
    margin: 0 auto;
}

header nav h1 {
    margin: 10px 0 15px 15px; /* 3% 0 5% 4% */
}

.logo {
    width: 91px;
    height: 50px;
}

.toggle {
    position: absolute;
    float: right;
    right: 15px;
    top: 18px;
    width: 30px;
    color: #FFFFFF;
    cursor: pointer;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.bars-btn {
    background-color: #4D4D4F;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    display: block;
    height: 4px;
    width: 30px;
    margin: 7.5px 0;
    border-radius: 50px 50px 50px 50px;
}

.social, .social ul, .social li {
    display: none;
}

.accordion {
    margin: 0 0 15px 0;
    padding: 0;
    list-style: none;
    *zoom: 1;
}

.accordion:before,
.accordion:after {
    content: " "; 
    display: table; 
}

.accordion:after {
    clear: both;
}

.accordion ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.accordion > li {
    position: relative;
    margin: 0;
    text-indent: 15px;
    list-style: none;
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    line-height: 45px;
    font-weight: 600;
    background-color: #404041;    
    border-top: 1px solid #B1B3B5;
}

.accordion > li > .parent {
    margin-right: 15px;
    background: url(../img/bullet-down.png) no-repeat right;
}

.accordion > li > a {
    display: block;
    color: #E6E7E8;
    text-transform: uppercase;
}

.accordion li ul {
    position: absolute;
    left: -9999px;
}

.accordion > li.hover > ul {
    left: 0;
    background-color: #fff;
}

.accordion li li.hover ul {
    top: 0;
    left: 0;   
}

.accordion li li a {
    display: block;
    color: #E6E7E8;
    font-size: 12px;
    font-weight: 600;
    background: #4D4D4F;
    position: relative;
    z-index: 100;
    border-top: 1px solid #B1B3B5;
    text-transform: none;
}

/* ==============
    MOBILE: Finder
   ============== */

/* ==============
    MOBILE: Slider
   ============== */
.slider {
    width: 93.445%;
    margin: 0 auto;
    padding: 24px 0;
}

.slider article section h1 {
    color: #626366;
    margin: 0;
    font-size: 18px;
    line-height: 27px;
    font-weight: 700;
    text-align: center;
}

.slider article section p {
    margin: 0;
    font-size: 14px;
    line-height: 39px;
    font-weight: 600;
    text-align: center;
}

.slider article p a {
    color: #7A7C7E
}

/* ==============
    MOBILE: Highlighter
   ============== */

.highlighter { 
    background: #fff repeat 0 0;
    padding: 0;
}

.highlighter ul { 
    width: 100%;
    overflow: hidden; 
    margin: 0;
    padding: 0;
    text-align: center;
    clear: both;
}

.highlighter li {
    float: left; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 100%;
    text-align: center;
}

.highlighter a { 
    margin: 0; 
    display: block; 
    text-align: center; 
    font-family: "Open Sans", sans-serif; 
    font-size: 14px;
    line-height: 52px; 
    font-weight: 600; 
    color: #ffffff; 
}

.highlighter li.apply-btn a,
.highlighter li.donate-btn a,
.highlighter li.events-btn a,
.highlighter li.volunteer-btn a {
    margin-top: 16px;
    background: #7C7E80 repeat 0 0
}

.highlighter li.volunteer-btn a {
    margin: 16px 0 ;
    background: #7C7E80 repeat 0 0
}

.highlighter li.apply-btn a:hover,
.highlighter li.donate-btn a:hover,
.highlighter li.events-btn a:hover,
.highlighter li.volunteer-btn a:hover { 
    background: #ccc repeat 0 0
}

/* ==============
    MOBILE: Main
   ============== */

.main {
    padding: 0;
}

.main aside {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.main p {
    margin: 0 0 28px 0;
}

.main iframe,   
.main object,
.main embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main article {
    width: 100%;
    padding: 15px 0;
}

.main article section p {
    font-size: 14px;
    line-height: 23px;
    font-weight: 400;
}

.main article section h3 {
    margin: 0;
    padding: 0 0 15px 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.main article section h3 a {
    color: #6F7073;
}

.footer-container footer {
    padding-top: 10px;
    border-top: 1px solid #B1B3B5;
}

.footer-container footer .legal p {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

.footer-container footer .legal p a, .footer-container footer .copyright p a {
    color: #6F7073
}

.footer-container footer .copyright p {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
}

.footer-container footer .copyright small {
    color: #B1B3B5;
    font-size: 11px;
    line-height: 23px;
}

.page {
    margin-top: 20px;
    margin-bottom: 20px;
}

.page article {
    font-size: 14px;
    line-height: 23px;
    font-weight: 400;
    margin: 0;
    vertical-align: top;
}

.page article header h1 {
    margin: 0;
    font-size: 18px;
    line-height: 27px;
    font-weight: 700;
}

.page article p {
    margin: 0 0 20px 0;
}

.page aside {
    display: none;
}

.youtube {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.youtube iframe,   
.youtube object,
.youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.focus-box {
    padding: 10px;
    background-color: #F5F5F6;
}

.focus-box h3 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 45px;
    font-weight: 600;
}

.image img {
    display: none;
}  

.focus-box ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-indent: 0;
}

.focus-box li {
    margin-bottom: 10px
}

.focus-box li:before {
    content: "- ";
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .logo {
    padding-top: 20px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 600px) {

/* ====================
    INTERMEDIATE: All
   ==================== */
    .wrapper {
        width: 93.165%;
    }

    header nav h1 {
        margin: 10px 0 15px 18px; /* 3% 0 5% 4% */
    }

    .toggle {
        right: 25px;
    }

    .slider {
        width: 93.165%;
        margin: 0 auto;
        padding: 52px 0;
    }

    .slider article section h1 {
        font-size: 30px;
        line-height: 40px;
        width: 65%;
        text-align: left;

    }

    .slider article section h3 {
        font-size: 15px;
        line-height: 39px;
        font-weight: 600;
    }

    .slider article section p {
        font-size: 15px;
        text-align: left;
    }

    .highlighter li {
        width: 50%;
    }

    .highlighter li.apply-btn a {
        margin: 16px 10px 8px 0;
    }

    .highlighter li.donate-btn a {
        margin: 16px 0px 8px 10px;
    }

    .highlighter li.events-btn a {
        margin: 8px 10px 16px 0px;
    }

    .highlighter li.volunteer-btn a {
        margin: 8px 0px 16px 10px;
    }

    .footer-container footer .legal {
        float: left;
    }

    .footer-container footer .copyright {
        float: right;
        text-align: right;
    }

    .page article {
        font-size: 16px;
    }

    .page article header h1 {
        font-size: 30px;
        line-height: 40px;
    }

    .page article p {
        margin: 0 0 30px 0;
    }

    .focus-box {
        padding: 20px;
    }

    .focus-box h3 {
        font-size: 26px;
    }


/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    .oldie nav a {
        margin: 0 0.7%;
    }
}

@media only screen and (min-width: 768px) {

/* ============
    WIDE: Menu
   ============ */

    header nav {
        width: 93%;
        margin: 0 auto;
    }

    header nav h1 {
        margin: 16px 0 14px 0px;
        width: 100%;
    }

    .finder-container {
        display: block;
        background-color: #E6E7E8;
    }

    .finder {
        font-size: 13px;
        line-height: 23px;
        font-weight: 600;
    }

    .finder a {
        color: #787A7C;
    }

    .logo {
        width: 105px;
        height: 58px;
    }

    .social {
        position: absolute;
        float: right;
        display: block;
        width: 100px;
        top: 24px;
        right: 8px;
        font-size: 12px;
    }

    .social ul {
        display: inline;
        padding: 0;
        margin: 0;
    }

    .social ul li {
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        *display: inline;
    }

    .facebook, .twitter {
        width: 39px;
        height: 39px;
        display: block;
        margin-right: 1px;
        vertical-align: middle;
        background: url(../img/icons-social.png) no-repeat;
    }

    .facebook {
        background-position: 0 0;
    }

    .twitter {
        background-position: 0 -47px ;
    }

    .accordion {
        float: right;
        margin: 0;
        padding: 0;
        list-style: none;
        *zoom: 1;
        background: none;
    }

    .accordion:before,
    .accordion:after {
        content: " "; 
        display: table; 
    }

    .accordion:after {
        clear: both;
    }

    .accordion ul {
        list-style: none;
    }

    .accordion a {
        font-size: 13px;
        line-height: 23px;
        font-weight: 700;
        color:#626366;
        text-transform: uppercase;
    }

    .accordion li {
        position: relative;
    }  

    .accordion > li {
        float: left;
        margin-right: 42px;
        padding-bottom: 8px;
        line-height: 23px;        
        text-indent: 0px;
        background-color: transparent;
        border-top: 0;
    }

    .accordion > li:last-child {
        margin-right: 0px;
    }

    .accordion > li > .parent {
        margin-right: 0;
        background-image: none;
    }

    .accordion > li > a {
        display: block;
        color: #626366;
    }

    .accordion li ul {
        position: absolute;
        left: -9999px;
    }

    .accordion > li.hover > ul {
        left: 0;
        margin-top: 6px;
    }

    .accordion li li.hover ul {
        left: 100%;
    }

    .accordion li li a {
        display: block;
        padding: 4px 0;
        min-width: 175px;
        text-indent: 10px;
        font-weight: 400;
        color: #fff;
        background: #BBBDC0;
        position: relative;
        z-index: 100;
        text-transform: none;
        border-top: 1px solid rgba(141, 144, 146, 0.3);
    }

    .accordion li li a:hover {
        background-color: #BBBDC0;
    }

    .accordion li li li a {
        z-index: 200;
    }

    .accordion ul li:first-child a {
        border-top: 3px solid #7b7c80;
    }

    .accordion ul li:first-child a:after {
        content: '';
        position: absolute;
        left: 24px;
        top: -10px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #7b7c80;
    }

   .accordion li:last-child ul li:first-child a:after {
        left: 140px;
    }

    .accordion > li:last-child.hover > ul {
        left: -112px;
    }

    .slider {
        margin: 0 auto;
        padding: 40px 0;
    }

    .slider article section h1 {
        font-size: 30px;
        width: 70%;
    }

    .page {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .page aside {
        display: block;
        float: left;
        padding-right: 20px;
        width: 26.5%;
    }

    .sub-menu {
        position: relative;
        padding: 0px;
        border: solid 1px #D1D2D4;
    }

    .sub-menu ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .sub-menu ul li {
        margin: 0;
        padding: 20px 0 0px 20px;
        font-size: 13px;
        font-weight: 700
    }

    .sub-menu ul li:last-child {
        padding: 20px 0 20px 20px;
    }

    .sub-menu ul li a {
        color: #808284;
    }

    .page article {
        display: block;
        float: right;
        width: 70.5%;
    }

    .image img {
        display: block;
        float: left;
        width: 226px;
        height: 220px;
        padding: 0px 20px 10px 0;
    }  

}
/* ============
    WIDE: Main
   ============ */

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */
   .wrapper {
        width: 86%;

   }

    header nav {
        width: 86%;
   }

    header nav h1 {
        float: left;
        width: 160px;
    }

    .logo {
        width: 160px;
        height: 88px;
    }

    .social {
        top: 10px;
        right: 68px;
    }

    .accordion {
        float: right;
        padding-top: 87px;
    }

    .accordion a {
        font-size: 15px;
    }

    .accordion > li {
        margin-right: 42px;
    }

    .slider {
        width: 86%;
        margin: 0 auto;
        padding: 62px 0;
    }

    .slider article section h1 {
        font-size: 35px;
        width: 65%;
    }

    .slider article section h3 {
        font-size: 18px;
    }

    .highlighter li {
        float: left;
        width: 25%;
    }

    .highlighter li.apply-btn a {
        margin: 16px 10px 16px 0;
    }

    .highlighter li.donate-btn a,
    .highlighter li.events-btn a {
        margin: 16px 10px 16px 10px;
    }

    .highlighter li.volunteer-btn a {
        margin: 16px 0 16px 10px;
    }

    .main {
        padding: 0 0 30px 0;
    }

    .main aside {
        position: relative;
        float: left;
        width: 47.75%;
        height: 281px;
        padding: 0 10px 0 0;
        overflow: hidden;
    }      

    .main article {
        float: right;
        padding: 0 0 0 10px;
        width: 48.75%;
        height: 281px;        
    }

    .page aside {
        padding-right: 24px;
        width: 23.35%;
    }

    .sub-menu ul li {
        font-size: 14px;
    }

    .page article {
        display: block;
        float: right;
        width: 74.25%;
    }

    .image img {
        display: block;
        float: left;
        width: 252px;
        height: 246px;
        padding: 0px 20px 10px 0;
    }  

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

I'd recommend trying to split the CSS section into separate parts since it's quite a large code block. — Jamal♦, Dec 6 at 20:15
Thanks Jamal. I've thought about using @import but I heard a mono-lithic format is better for speed. — Conor, Dec 6 at 20:17
I'm not familiar with this myself, but I received a flag concerning the code length. You could still wait for someone more experienced to weigh in on this. — Jamal♦, Dec 6 at 20:18
The CSS code is gigantic! Does it all really matter for the question? Focusing on a small important part may attract more answers. — Dmitri Zaitsev, Dec 13 at 15:49

darcher · Answer 1 · 2013-12-14 15:13:26Z

Since I don't have high enough rep to comment, I'll post this instead...

fyi: @import vs http://stackoverflow.com/questions/7199364/import-vs-link I'd keep the same master stylesheet if it were me.

One item off the bat is the heading. I'd remove the <img> and use css to make it a background of the <h1>

HTML

<h1 class="logo">Title</h1> <!-- no image and using text has better semantic value -->

CSS

.logo{
      background:url(img/logo.png) no-repeat;
      background-size:100px 100px; /* or whatever the size is */
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden; /*http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
}

Another small gripe is the CSS is very generalized. 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.

as the alternative works, but requires more css to override later...

Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.

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 '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 (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 lte IE 9]><html class="no-js lte-ie9"><![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css?v=beta">
<script src="/libs/js/vendor/modernizr.min.js"></script>
<body>
<header role="banner">
    <h1></h1>
    <nav role="navigation"></nav>
    <section></section>
    <section></section>
</header>
<main role="main">
    <article role="article">
        <section><h2></h2>
          <p>
        </section>
        <aside>
            <figure>
            <img src="" width="" height="" alt>
                <figcaption></figcaption>
            </figure>
        </aside>
    </article>
    <hr role="separator">
</main>
<footer role="contentinfo">
    <section></section>
    <section></section>
    <section></section>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/libs/js/vendor/jquery.min.js?v=2.0.3"><\/script>')</script>
<script src="/libs/js/vendor/jquery-migrate.min.js?v=1.2.1"></script>

Ha, thanks. That was very kind of you. But says I require 50 rep to comment on the main post. I'll just edit this with more revisions in a few. — darcher, Dec 6 at 23:40
@darcher, thanks for the detailed review! If I had 50 extra reps, I'd give them to you. — Conor, Dec 9 at 0:17

asked	17 days ago
viewed	71 times
active	9 days ago

Explore our sites

Responsive HTML5/CSS Code Review

1 Answer

Your Answer

Not the answer you're looking for? Browse other questions tagged html css or ask your own question.

Community Bulletin

Hot Network Questions

Explore our sites

Responsive HTML5/CSS Code Review

1 Answer

Your Answer

Sign up or login

Post as a guest

Not the answer you're looking for? Browse other questions tagged html css or ask your own question.

Community Bulletin

Related

Hot Network Questions