Assorted CSS Mixins

mixins.styl

// Clearfix

clearfix()
  content ''
  display block
  clear both

// Layouts

basicLayout(padding, max-width)
  .content
    padding padding
    height 100%
    max-width max-width
    margin 0 auto
    
headerLayout(size, padding, max-width)
  .header
    width 100%
    height size
    padding 0 padding
    position fixed
    
  .content
    padding size+padding padding padding
    max-width max-width
    margin 0 auto    

footerLayout(size, padding, max-width)
  .wrapper
    position relative
    min-height 100%

  .content
    padding padding padding size+padding
    max-width max-width
    margin 0 auto
  
  .footer
    position absolute
    bottom 0
    width 100%
    height size
    
headerFooterLayout(header-size, footer-size, padding, max-width)
  .wrapper
    position relative
    min-height 100%
    
  .header   
    width 100%
    height header-size
    padding 0 padding
    position fixed

  .content
    padding header-size+padding padding footer-size+padding
    max-width max-width
    margin 0 auto
  
  .footer
    position absolute
    bottom 0
    width 100%
    height footer-size
    
// Positioning

posY(n)
  position relative
  top (n)%
  transform translateY(-(n)%)