.element-spacing
  .assets-logo-iugu-ux

.container.small-padding
  .button-group.no-bottom-margin.nav
    = link_to "Typography", "/", :class => 'button selected default'
    = link_to "Components", "/components", :class => 'button'

.grid
  .grid-item{ :style => "width:60%" }
    %h3 Titles
    %h1 H1 Lorem ipsum dolor sit amet
    %h2 H2 Lorem ipsum dolor sit amet
    %h3 H3 Lorem ipsum dolor sit amet
    %h4 H4 Lorem ipsum dolor sit amet
    %h5 H5 Lorem ipsum dolor sit amet
    %h6 H6 Lorem ipsum dolor sit amet

    %h3 Titles With No Bottom Margin
    .element-spacing
      %h1.no-bottom-margin H1 Lorem ipsum dolor sit amet
      %h2.no-bottom-margin H2 Lorem ipsum dolor sit amet
      %h3.no-bottom-margin H3 Lorem ipsum dolor sit amet
      %h4.no-bottom-margin H4 Lorem ipsum dolor sit amet
      %h5.no-bottom-margin H5 Lorem ipsum dolor sit amet
      %h6.no-bottom-margin H6 Lorem ipsum dolor sit amet

    %h3 Leading Body Texts

    %img.responsive{ :src => "http://kaluuja.files.wordpress.com/2010/08/vector_wallpaper_by_seppoftw.jpg" }

    %p.lead
      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Integer <em>posuere erat</em> a ante venenatis dapibus posuere <strong>velit aliquet</strong>.

  .grid-item-right{ :style => "width:30%" }
    %h3 Titles in a Box
    .wrapper.b10

      %h1 H1 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
      %h2 H2 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
      %h3 H3 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
      %h4 H4 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
      %h5 H5 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
      %h6 H6 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

%h3 Paragraphs

%p
  Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

%hr

%p
  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.

%p
  Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.

.auto-clear
  %h3 Paragraphs with Blocks

  .floating-right
    .box-model{ :style => "background: #CCC;width:200px;height:200px" }
    

  %p
    Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  %p
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.

  .floating-left
    .box-model{ :style => "background: #CCC;width:200px;height:200px" }

  %p
    Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

  %p
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.

%h3
  Grid

.grid
  .grid-item.b10
    %h1 B10
    %p
      Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.
  .grid-item.b21
    %h1 Fixed B21
    %p
      Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.
  .grid-item.b10
    %h1 B10
    %p
      Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.

%h3
  Quotes

%blockquote
  %p
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
  %small
    Someone famous in Body of work

%h3
  Lists

.grid
  .grid-item.b15
    %h4 Unordered
    %ul
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li
        Maecenas faucibus mollis interdum.
        %ul
          %li Maecenas faucibus mollis interdum.
          %li Maecenas faucibus mollis interdum.
          %li Maecenas faucibus mollis interdum.
          %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.

  .grid-item.b13
    %h4 Unstyled
    %ul.rip
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li
        Maecenas faucibus mollis interdum.
        %ul
          %li Maecenas faucibus mollis interdum.
          %li Maecenas faucibus mollis interdum.
          %li Maecenas faucibus mollis interdum.
          %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.

  .grid-item.b13
    %h4 Ordered
    %ol
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.
      %li Maecenas faucibus mollis interdum.

%h3
  Code

%pre{ :class => "prettyprint linenums:97 linenums" }
  &lt;p&gt;Sample text here...&lt;/p&gt;
  &lt;p&gt;Sample text here...&lt;/p&gt;
  &lt;p&gt;Sample text here...&lt;/p&gt;
  &lt;p&gt;Sample text here...&lt;/p&gt;

%pre{ :class => "prettyprint linenums:1 linenums" }
  :plain
    def sum( a, b )
      a + b
    end

%p
  Etiam porta sem malesuada
  %code magna
  mollis euismod.

%h3 Description Lists
.grid
  .grid-item.b14
    %dl
      %dt Description Lists
      %dd A description list is perfect for defining terms.
      %dt Euismod
      %dd Vestibulum id ligula porta felis euismod semper.
  .grid-item.b18
    %dl.dl-horizontal
      %dt Description Lists
      %dd A description list is perfect for defining terms.
      %dt Euismod
      %dd Vestibulum id ligula porta felis euismod semper.

%h3 Tables

%table.table-stripping.table-highlighting
  %thead
    %tr
      %th.tar #
      %th First Name
      %th Last name
      %th Username
  %tbody
    %tr
      %td.tar 1
      %td Patrick
      %td Negri
      %td pnegri
    %tr
      %td.tar 2
      %td Marcelo
      %td Paez
      %td paezao
    %tr
      %td.tar 3
      %td Alexandre
      %td Paez
      %td alepaez

%table.table-highlighting
  %thead
    %tr
      %th.tar #
      %th First Name
      %th Last name
      %th Username
  %tbody
    %tr
      %td.tar 1
      %td Patrick
      %td Negri
      %td pnegri
    %tr
      %td.tar 2
      %td Marcelo
      %td Paez
      %td paezao
    %tr
      %td.tar 3
      %td Alexandre
      %td Paez
      %td alepaez

%h3.no-bottom-margin
  Boxes
%h6 Box, Box-Highlighting &amp; Box-Rounded

.grid
  .grid-item.b21
    .box.box-highlighting
      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
  .grid-item.b21
    .box.box-highlighting
      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
  .grid-item.b21
    .box.box-highlighting
      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
  .grid-item.b21
    .box.box-highlighting
      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }

.grid
  .grid-item.b21
    .box.box-highlighting.box-rounded
      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
  .grid-item.b21
    .box.box-highlighting.box-rounded
      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
  .grid-item.b21
    .box.box-highlighting.box-rounded
      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
  .grid-item.b21
    .box.box-highlighting.box-rounded
      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }

%h3
  Grid System

.element-spacing
  .grid
    .grid-item
      .box{ :style => "width:200px;height:200px" }
        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
    .grid-item
      .box{ :style => "width:200px;height:200px" }
        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
    .grid-item
      .box{ :style => "width:200px;height:200px" }
        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
    .grid-item
      .box{ :style => "width:200px;height:200px" }
        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
    .grid-item
      .box{ :style => "width:200px;height:200px" }
        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
    .grid-item
      .box{ :style => "width:200px;height:200px" }
        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }

%h3
  Borderless Buttons

.element-spacing
  %button.borderless
    &times;