Responsive Page Example

index.jade

// load the page layout
extends layout

block styles
  != css("index")

block content
  header This is a responsive page

  section.activities
    ul
      li Some
      li List
      li Of
      li Things

  section.map
    div Map goes here

index.styl

@import "main"

.activities
  column(4)
  @media phone
    column(12)
  background-color: red

.map
  column(8)
  hideOn('phone')
  background-color: yellow

main.styl

@import "lib/grid" //semantic.gs, sans the body style

// Semantic GridSystem settings
total-width = 100%

// Device media queries
tablet = "(min-width: 768px) and (max-width: 979px)"
phone = "(max-width: 767px)"

// Useful mixins
hideOn(device)
  display: inherit // bug in stylus, we need a core rule
  @media device
    display: none !important

showOn(device)
  display: none
  @media device
    display: inherit !important