index.jade

html
  head
    title Nib
    link(rel='stylesheet', href='/test.css')
    link(rel='stylesheet', href='/gradients.css')
    link(rel='stylesheet', href='/buttons.css')
    link(rel='stylesheet', href='/clearfix.css')
    script(src='/jquery.min.js')
    script
      $(function(){
        $(':button, :submit, a.button').click(function(){
          return false;
        });
      });
  body
    h2 Gradients
    table#gradients
      - var n = 9
      tbody
        - while (n--)
          tr
            td
            td
    h2 Buttons
    table#buttons
      tbody
      - var buttons = []
      - buttons.push(['minimal', 'minimal-alternate'])
      - buttons.push(['smooth', 'smooth-alternate'])
      - buttons.push(['download', 'download-alternate'])
      - buttons.push(['bold', 'bold-alternate', 'bold-alternate-2'])
      - buttons.push(['pill'])
      - each names in buttons
        tr
          td blur
          - each name in names
            td: a(href='#', class=name).button= name
        tr
          td hover
          - each name in names
            td: input(type='button', value=name, class=name).hover
        tr
          td active
          - each name in names
            td: button(class=name).active= name
        tr
          td focus
          - each name in names
            td: button(class=name).focus= name
    h2 Clearfix
    div#clearfix
      div
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo
        | turpis quis mauris tempus commodo a non tellus. Sed eu convallis
        | mauris. Donec scelerisque lacus quis orci viverra tincidunt. Nunc sed
        | risus lectus. Proin vulputate elit sed eros consectetur interdum.
      | Suspendisse potenti.