layout

by secretgspot

HTML

<header id="layout_header" class="clearfix"> 
        <h1 id="logo">My Site <span>by me</span></h1> 
    <nav class="left"> 
      Nav left
    </nav> 
    <nav id="layout_header_nav_right" class="right"> 
      <button type="button" id="btn_messages"><span>Messages <em class="nav_count">59</em></span></button> 
      <button type="button" id="btn_account"><span>Account <em>*</em></span></button> 
      <button type="button" id="btn_other"><span>Other</span></button> 
    </nav> 
    </header> 
  <div id="page"> 
    <div id="content" class="clearfix"> 
      <!-- Main Content --> 
      <aside id="side_view" class="clearfix"> 
          <nav id="side_view_nav_1" class="side_nav"> 
                    <!--Nav 1 --> 
          Nav 1
          </nav> 
          <nav id="side_view_nav_2" class="side_nav"> 
              Nav 2
          </nav> 
          <nav id="side_view_nav_3" class="side_nav"> 
              Nav 3
          </nav> 
          <footer id="side_view_footer" class="clearfix"> 
                <nav class="left"> 
                  side f nav left
                </nav> 
                <nav class="right"> 
                  side f nav right
                </nav> 
          </footer> 
      </aside> 
      <section id="main_view" class="clearfix"> 
          <header id="main_view_header"> 
              <div id="main_view_header_row1" class="clearfix"> 
                    <nav class="left"> 
                            <h3> 
                                <span id="main_view_header_row1_title">Section Title</span> 
                                <span id="main_view_header_row1_span">additional info</span> 
                            </h3> 
                    </nav> 
                    <nav class="right"> 
                      main_view_header_row1 nav right
                    </nav> 
              </div> 
              <div id="main_view_header_row2" class="clearfix"> 
                    <nav class="left"> 
                     ...

CSS

/* @group CSS Reset */
/*
 *     HTML5 Reset :: style.css
 *         ----------------------------------------------------------
 *             We have learned much from/been inspired by/taken code where offered from:
 *                 
 *                     Eric Meyer                    :: http://ericmeyer.com
 *                         HTML5 Doctor                :: http://html5doctor.com
 *                             and the HTML5 Boilerplate    :: http://html5boilerplate.com
 *                                 
 *                                 -------------------------------------------------------------------------------*/

/* Let's default this puppy out
 * -------------------------------------------------------------------------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}                                    

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
 *    Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
 *       There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
 *     don't forget to restore the bullets within content. */
ul {list-style:...