Initializr HTML5 Responsive with Jade and Stylus

index.jade

doctype
//if lt IE 7
  html.no-js.lt-ie9.lt-ie8.lt-ie7
//if IE 7
  html.no-js.lt-ie9.lt-ie8
//if IE 8
  html.no-js.lt-ie9
//[if gt IE 8]><!
html.no-js
  //<![endif]
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width')
    link(rel='stylesheet', href='/css/normalize.min.css')
    link(rel='stylesheet', href='/css/main.css')
    script(src='javascripts/vendor/modernizr-2.6.2-respond-1.1.0.min.js')
  body
    include chrome-frame.jade

    .header-container
      .wrapper.clearfix
        h1.title h1.title
        nav
          ul
            li.ir
              a(href='#') nav ul li a
            li
              a(href='#') nav ul li a
            li
              a(href='#') nav ul li a

    .main-container
      .main.wrapper.clearfix
        article
          header
            h1 article header h1
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
          section
            h2 article header h2
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
          section
            h2 article header h2
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
          section
            h3 article header h3
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
        aside
          h3 aside
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

    .footer-container
      footer.wrapper
        h3 footer


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

main.styl

html
button
input
select
textarea
  color #222

body 
  font-size 1em
  line-height 1.4

::-moz-selection 
  background #b3d4fc
  text-shadow none

::selection 
  background #b3d4fc
  text-shadow none

hr 
  display block
  height 1px
  border 0
  border-top 1px solid #ccc
  margin 1em 0
  padding 0

img 
  vertical-align middle

fieldset 
  border 0
  margin 0
  padding 0

textarea 
  resize vertical

.chromeframe 
  margin 0.2em 0
  background #ccc
  color #000
  padding 0.2em 0

//- Initializr Styles
//- Author Jonathan Verrecchia - verekia.com/initializr/responsive-template
body 
  font 16px/26px Helvetica, Helvetica Neue, Arial

.wrapper 
  width 90%
  margin 0 5%

//- ALL Orange Theme

.header-container 
  border-bottom 20px solid #e44d26

.footer-container
.main aside 
  border-top 20px solid #e44d26

.header-container
.footer-container
.main aside 
  background #f16529

.title 
  color white

//- MOBILE Menu

nav
  ul 
     margin 0
     padding 0

  a 
    display block
    margin-bottom 10px
    padding 15px 0

    text-align center
    text-decoration none
    font-weight bold

    color white
    background #e44d26

  &:hover
  &:visited 
    color white

  &:hover 
    text-decoration underline


//- MOBILE Main

.main 
  padding 30px 0

.main
   article h1 
     font-size 2em

   aside 
     color white
     padding 0px 5% 10px

.footer-container
  footer 
    color white
    padding 20px 0

//- ALL IE Fixes

.ie7 .title 
  padding-top 20px

//- 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

@import 'mq.styl'

mq.styl

//- Media Queries
@media only screen and (min-width: 480px) 
  //- INTERMEDIATE Menu
  nav
    a 
      float left
      width 27%
      margin 0 1.7%
      padding 25px 2%
      margin-bottom 0
  
    li:first-child
      a 
        margin-left 0
  

    li:last-child
      a 
        margin-right 0

  //- INTERMEDIATE IE Fixes
  ul
    li 
      display inline
  

  .oldie 
    nav
      a 
        margin 0 0.7%

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

  //- WIDE CSS3 Effects

  .header-container
  .main aside 
      box-shadow 0 5px 10px #aaa
  
  //- WIDE Menu

  .title 
    float left

  nav 
    float right
    width 38%
  
  //- WIDE Main

  .main
    article 
      float left
      width 57%
  
    aside 
      float right
      width 28%

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

  //- Maximal Width

  .wrapper 
    width 1026px /* 1140px - 10% for margins */
    margin 0 auto