.notice
  %h3 Grid
  %ul
    %li http://github.com/stubbornella/oocss/wiki/Grids

.line
  .unit.size2of3
    %h3 2/3
    %p Nam mattis enim ac ligula dictum pretium. Etiam hendrerit enim at justo dictum nec porta tellus auctor. Cras blandit scelerisque tincidunt. Curabitur sagittis feugiat laoreet. Vestibulum quis erat eget magna consequat vulputate. Aliquam fringilla dapibus elit, in porttitor eros tincidunt a. Aliquam nisl turpis, consectetur vel feugiat quis, viverra ut purus. Phasellus lobortis, sem ut ultrices dapibus, orci massa semper quam, sit amet pulvinar lacus turpis et nisi. Ut non consectetur tellus. Quisque fringilla, est vel rhoncus commodo, quam erat gravida leo, a feugiat orci mi ut mi. Aenean vehicula ante tortor. Aenean turpis dolor, malesuada sed eleifend in, rutrum sed felis. Fusce nisi velit, mattis vel rutrum vel, rhoncus sed libero. Curabitur nec erat tincidunt arcu ullamcorper pharetra. Praesent rhoncus metus et elit interdum porta. Sed facilisis blandit felis id rutrum.
  .unit.size1of3
    %h3 1/3
    %p Aenean vehicula ante tortor. Aenean turpis dolor, malesuada sed eleifend in, rutrum sed felis. Fusce nisi velit, mattis vel rutrum vel, rhoncus sed libero. Curabitur nec erat tincidunt arcu ullamcorper pharetra. Praesent rhoncus metus et elit interdum porta. Sed facilisis blandit felis id rutrum.
.line
  .unit.size1of3
    %h3 1/3
    %p Aenean vehicula ante tortor. Aenean turpis dolor, malesuada sed eleifend in, rutrum sed felis. Fusce nisi velit, mattis vel rutrum vel, rhoncus sed libero. Curabitur nec erat tincidunt arcu ullamcorper pharetra. Praesent rhoncus metus et elit interdum porta. Sed facilisis blandit felis id rutrum.
  .unit.size1of3
    %h3 1/3
    %p Aenean vehicula ante tortor. Aenean turpis dolor, malesuada sed eleifend in, rutrum sed felis. Fusce nisi velit, mattis vel rutrum vel, rhoncus sed libero. Curabitur nec erat tincidunt arcu ullamcorper pharetra. Praesent rhoncus metus et elit interdum porta. Sed facilisis blandit felis id rutrum.
  .unit.size1of3
    %h3 1/3
    %p Aenean vehicula ante tortor. Aenean turpis dolor, malesuada sed eleifend in, rutrum sed felis. Fusce nisi velit, mattis vel rutrum vel, rhoncus sed libero. Curabitur nec erat tincidunt arcu ullamcorper pharetra. Praesent rhoncus metus et elit interdum porta. Sed facilisis blandit felis id rutrum.

.clearfix
%hr

.notice
  %h3 Basic styles
  %ul
    %li Headers and paragraphs.

%h1 Etiam eget magna id velit rhoncus malesuada. 

%h2 Nunc vitae sodales nulla. Quisque sed magna non arcu iaculis sodales.

%p Morbi pharetra sapien vel mauris vulputate et hendrerit velit suscipit. Sed nulla erat, pharetra at bibendum ac, condimentum quis tortor. Nulla facilisi. Etiam viverra massa nec eros scelerisque lobortis. Nam tempus erat id est iaculis consequat ut in nisl. Aliquam tempus, tellus ut luctus facilisis, nisl magna dictum sem, scelerisque pulvinar est lorem lobortis purus. Donec laoreet egestas massa non imperdiet. Nulla quis odio eget urna volutpat interdum. Fusce ac leo leo. In hac habitasse platea dictumst. Nunc a mauris risus. Sed vulputate pulvinar sapien at venenatis. Integer a mi vel turpis congue dictum a porttitor neque. Vivamus tellus sapien, accumsan eu gravida sagittis, hendrerit at velit.

%p Nam mattis enim ac ligula dictum pretium. Etiam hendrerit enim at justo dictum nec porta tellus auctor. Cras blandit scelerisque tincidunt. Curabitur sagittis feugiat laoreet. Vestibulum quis erat eget magna consequat vulputate. Aliquam fringilla dapibus elit, in porttitor eros tincidunt a. Aliquam nisl turpis, consectetur vel feugiat quis, viverra ut purus. Phasellus lobortis, sem ut ultrices dapibus, orci massa semper quam, sit amet pulvinar lacus turpis et nisi. Ut non consectetur tellus. Quisque fringilla, est vel rhoncus commodo, quam erat gravida leo, a feugiat orci mi ut mi. Aenean vehicula ante tortor. Aenean turpis dolor, malesuada sed eleifend in, rutrum sed felis. Fusce nisi velit, mattis vel rutrum vel, rhoncus sed libero. Curabitur nec erat tincidunt arcu ullamcorper pharetra. Praesent rhoncus metus et elit interdum porta. Sed facilisis blandit felis id rutrum.

.clearfix
%hr

.notice
  %h3 Extended styles
  %ul
    %li Large header, paragraph, blockquote.

%h1 Etiam eget magna id velit rhoncus malesuada. Proin imperdiet consequat consectetur. Pellentesque in leo nibh, nec porta nisl.

%p Sed sollicitudin, nunc at eleifend tincidunt, quam metus dapibus nunc, et luctus lacus ipsum sed neque. Sed eu enim enim. Suspendisse posuere iaculis lacus scelerisque aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc aliquam pretium enim, at euismod eros pellentesque id. In ac arcu orci, ut laoreet nulla. Nam in magna vel magna auctor vehicula vel sed lacus. Pellentesque nec velit id eros cursus mollis. Cras congue risus quis lectus tristique et malesuada quam cursus. Cras vestibulum lacus a leo scelerisque pulvinar. Nunc ut libero ipsum, vitae fermentum massa. Donec vitae nulla at diam malesuada congue in vitae lacus. Suspendisse id justo ac libero rhoncus fringilla.

%h2 Etiam eget magna id velit rhoncus malesuada. Proin imperdiet consequat consectetur. Pellentesque in leo nibh, nec porta nisl. Donec tortor turpis, scelerisque sed aliquam ac, varius sit amet nisi.  

%p Nam augue dui, auctor at auctor in, pellentesque at tortor. Nunc magna metus, pretium eu facilisis ut, ullamcorper a leo. Fusce tempus tincidunt nunc et vestibulum. Donec vehicula eros sed ipsum ultricies rhoncus. Sed sollicitudin turpis vitae nisi faucibus ultricies. Morbi faucibus, metus at porttitor dapibus, tellus orci aliquam tortor, vitae accumsan felis lacus at turpis. Cras dictum consectetur tristique. Aenean et risus eu ligula dapibus dapibus nec at nisl. Quisque luctus, enim id vulputate tincidunt, augue ante tempus enim, eget viverra mauris elit ut ante. Sed ut ipsum a libero ullamcorper dignissim. Etiam dictum laoreet tincidunt. Cras eu lectus nibh, non mattis arcu. Donec convallis tempus justo posuere auctor.

%blockquote
  %p Morbi pharetra sapien vel mauris vulputate et hendrerit velit suscipit. Sed nulla erat, pharetra at bibendum ac, condimentum quis tortor. Nulla facilisi. Etiam viverra massa nec eros scelerisque lobortis. Nam tempus erat id est iaculis consequat ut in nisl. Aliquam tempus, tellus ut luctus facilisis, nisl magna dictum sem, scelerisque pulvinar est lorem lobortis purus. Donec laoreet egestas massa non imperdiet. Nulla quis odio eget urna volutpat interdum. Fusce ac leo leo. In hac habitasse platea dictumst. Nunc a mauris risus. Sed vulputate pulvinar sapien at venenatis. Integer a mi vel turpis congue dictum a porttitor neque. Vivamus tellus sapien, accumsan eu gravida sagittis, hendrerit at velit.

%h3 Curabitur accumsan diam a purus fringilla pharetra.

%p Vivamus sit amet urna in est molestie venenatis. Donec in porta ligula. Mauris elit ante, viverra in sodales sit amet, elementum id augue. Quisque hendrerit pellentesque ornare. Integer vehicula, arcu ac molestie volutpat, justo magna tempus metus, quis viverra turpis augue sed purus. Quisque volutpat erat in enim fringilla imperdiet. Quisque at turpis nec quam egestas rhoncus pharetra eu orci. Suspendisse nec risus ligula. Fusce ac magna ullamcorper metus tincidunt viverra. Nunc eu consequat risus. Nullam libero ante, dapibus nec mattis ut, bibendum in felis. Duis quis arcu vitae massa posuere egestas. Vestibulum vestibulum ultricies tortor sit amet adipiscing. Vivamus neque mauris, venenatis quis facilisis vel, mattis ac est. Aenean felis nibh, congue at iaculis nec, rutrum nec erat. Curabitur suscipit metus consequat ante gravida et feugiat nunc tempus. Suspendisse ornare hendrerit viverra. Mauris id nunc magna.

.clearfix
%hr

.notice
  %h3 Header styles
  %ul
    %li h1, h2, h3, h4, h5, h6 headers.

%h1 Vivamus sit amet urna in est molestie venenatis.
%h2 Vivamus sit amet urna in est molestie venenatis.
%h3 Vivamus sit amet urna in est molestie venenatis.
%h4 Vivamus sit amet urna in est molestie venenatis.
%h5 Vivamus sit amet urna in est molestie venenatis.
%h6 Vivamus sit amet urna in est molestie venenatis.

.clearfix
%hr

.notice
  %h3 Miscellaneous Styles
  %ul
    %li .error, .notice, .success

.error
  %p This is a &lt;div&gt; with the class <strong>.error</strong>.

.notice
  %p This is a &lt;div&gt; with the class <strong>.notice</strong>.

.success
  %p This is a &lt;div&gt; with the class <strong>.success</strong>.

%p
  %strong &lt;strong&gt;
  %br
  %ins &lt;ins&gt; inserted
  %br
  %del &lt;del&gt; deleted
  %br
  %dfn &lt;dfn&gt; dfn
  %br
  %em &lt;em&gt; emphasis

%p
  %a &lt;a&gt; anchor
  %br
  = link_to '&lt;a&gt; a + href', 'http://www.google.com'

%p
  %abbr{:title => "extended abbr text should show when mouse over"} &lt;abbr&gt; abbr - extended text when mouseover.
  %br
  %acronym{:title => "extended acronym text should show when mouse over"} &lt;acronym&gt; acronym - extended text when mouseover.

%address
  &lt;address&gt;
  %br
  Donald Duck
  %br
  Box 555
  %br
  Disneyland

.clearfix
%hr

.notice
  %h3 List styles
  %ul
    %li li, ul, ol, dl, dt, dd.

%ul
  %li Vivamus sit amet urna in est molestie venenatis. 
  %li Vivamus sit amet urna in est molestie venenatis. 
  %li Vivamus sit amet urna in est molestie venenatis. 
  %li Vivamus sit amet urna in est molestie venenatis. 

%ol
  %li Vivamus sit amet urna in est molestie venenatis. 
  %li Vivamus sit amet urna in est molestie venenatis.
  %li
    Vivamus sit amet urna in est molestie venenatis. 
    %ol
      %li Vivamus sit amet urna in est molestie venenatis. 
      %li
        Vivamus sit amet urna in est molestie venenatis. 
        %ul
          %li Vivamus sit amet urna in est molestie venenatis. 
          %li Vivamus sit amet urna in est molestie venenatis. 
  %li Vivamus sit amet urna in est molestie venenatis. 
  %li
    Vivamus sit amet urna in est molestie venenatis. 
    %ol
      %li Vivamus sit amet urna in est molestie venenatis. 
      %li
        Vivamus sit amet urna in est molestie venenatis. 
        %ul
          %li Vivamus sit amet urna in est molestie venenatis. 
          %li Vivamus sit amet urna in est molestie venenatis. 

%dl
  %dt Vivamus sit amet urna in est molestie venenatis. 
  %dd Vivamus sit amet urna in est molestie venenatis. 
  %dt Vivamus sit amet urna in est molestie venenatis. 
  %dd Vivamus sit amet urna in est molestie venenatis. 
  %dt Vivamus sit amet urna in est molestie venenatis. 
  %dd Vivamus sit amet urna in est molestie venenatis. 

.clearfix
%hr

.notice
  %h3 Form styles
  %ul
    %li Basic form styles
    %li Use simple_form gem from https://github.com/plataformatec/simple_form.git
    %li And compass gem

= simple_form_for '' do |f|
  = f.input :username, :hint => 'Your username please'
  = f.input :password
  = f.hint 'No special characters, please!'
  = f.input :description, :as => :text
  = f.input :accepts,     :as => :radio
  = f.input :date_of_birth, :as => :date, :start_year => Date.today.year - 90, :end_year => Date.today.year - 12, :discard_day => true, :order => [:month, :year], :required => false
  = f.button :submit

.clearfix
%hr

.notice
  %h3 Table styles
  %ul
    %li table

.table
  %table{:summary => "This is the summary text for this table.",  :border => "0", :cellspacing => "0", :cellpadding => "0"}
    %tr
      %th Table Header One
      %th Table Header Two
    %tr
      %td TD One
      %td TD Two
    %tr
      %td{:colspan => '2'} TD colspan 2

.table
  %table{:summary => "This is the summary text for this table.",  :border => "0", :cellspacing => "0", :cellpadding => "0"}
    %thead
      %tr
        %th Table Header One
        %th Table Header Two
        %th Table Header One
        %th Table Header Two
    %tfoot
      %tr
        %td{:colspan => '4'} tfoot footer
    %tbody
      %tr
        %td TD One
        %td TD Two
        %td TD One
        %td TD Two
      %tr
        %td TD One
        %td TD Two
        %td TD One
        %td TD Two
    %tbody
      %tr
        %td TD One
        %td TD Two
        %td TD One
        %td TD Two
      %tr
        %td TD One
        %td TD Two
        %td TD One
        %td TD Two

.clearfix
%hr

.notice
  %h3 Code Styles
  %ul
    %li pre, code, pre with class code, tt

%pre
  &lt;pre&gt;
  What light
  through yonder window breaks

%code
  &lt;code&gt;
  User.new

%pre.code
  %code
    :plain
      class User &lt; ActiveRecord::Base
        has_many :groups
        belongs_to :account

        def name
          [first_name, last_name].join(' ')
        end
      end

%tt
  &lt;tt&gt;
  This tt text should be monospaced
  and 
  wrap as if 
  one line of text
  even though the code has newlines, spaces, and tabs. 
  It should be the same size as &lt;p&gt; text.

.clearfix
%hr

.notice
  %h3 Additional Styleguides
  %ul
    %li Additional styleguides