!!! 5 / paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ /[if lt IE 7 ] <html class="ie6" lang="en"> /[if IE 7 ] <html class="ie7" lang="en"> /[if IE 8 ] <html class="ie8" lang="en"> /[if IE 9 ] <html class="ie9" lang="en"> /[if (gt IE 9)|!(IE)] <!–> <html lang="en">

%head

%meta{ :charset => "utf-8" }

-# Uncomment to make IE8 render like IE7
-# meta http-equiv="X-UA-Compatible" content="IE=7"

-# Set the viewport width to device width for mobile
%meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0" }

%title= content_for?(:title) ? yield(:title) : "Untitled"

= stylesheet_link_tag "application"
= javascript_include_tag "vendor/custom.modernizr"
= csrf_meta_tag

%body

/ Header and Nav
.row
  .large-12.columns
    .panel
      %h1 Feed Template
/ End Header and Nav
.row
  / Nav Sidebar
  / This is source ordered to be pulled to the left on larger screens
  .large-3.columns
    .panel
      %a{href: "#"}
        %img{src: "http://placehold.it/300x240&text=[img]"}/
      %h5
        %a{href: "#"} Your Name
      .section-container.vertical-nav{"data-options" => "deep_linking: false; one_up: true", "data-section" => ""}
        %section.section
          %h5.title
            %a{href: "#"} Section 1
        %section.section
          %h5.title
            %a{href: "#"} Section 2
        %section.section
          %h5.title
            %a{href: "#"} Section 3
        %section.section
          %h5.title
            %a{href: "#"} Section 4
        %section.section
          %h5.title
            %a{href: "#"} Section 5
        %section.section
          %h5.title
            %a{href: "#"} Section 6
  / Main Feed
  / This has been source ordered to come first in the markup (and on small devices) but to be to the right of the nav on larger screens
  .large-6.columns
    / Feed Entry
    .row
      .large-2.columns.small-3
        %img{src: "http://placehold.it/80x80&text=[img]"}/
      .large-10.columns
        %p
          %strong Some Person said:
          Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
        %ul.inline-list
          %li
            %a{href: ""} Reply
          %li
            %a{href: ""} Share
        %h6 2 Comments
        .row
          .large-2.columns.small-3
            %img{src: "http://placehold.it/50x50&text=[img]"}/
          .large-10.columns
            %p Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit
        .row
          .large-2.columns.small-3
            %img{src: "http://placehold.it/50x50&text=[img]"}/
          .large-10.columns
            %p Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit
    / End Feed Entry
    %hr/
    / Feed Entry
    .row
      .large-2.columns.small-3
        %img{src: "http://placehold.it/80x80&text=[img]"}/
      .large-10.columns
        %p
          %strong Some Person said:
          Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
        %ul.inline-list
          %li
            %a{href: ""} Reply
          %li
            %a{href: ""} Share
    / End Feed Entry
    %hr/
    / Feed Entry
    .row
      .large-2.columns.small-3
        %img{src: "http://placehold.it/80x80&text=[img]"}/
      .large-10.columns
        %p
          %strong Some Person said:
          Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
        %ul.inline-list
          %li
            %a{href: ""} Reply
          %li
            %a{href: ""} Share
        %h6 2 Comments
        .row
          .large-2.columns.small-3
            %img{src: "http://placehold.it/50x50&text=[img]"}/
          .large-10.columns
            %p Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit
    / End Feed Entry
  / Right Sidebar
  / On small devices this column is hidden
  %aside.large-3.columns.hide-for-small
    %p
      %img{src: "http://placehold.it/300x440&text=[ad]"}/
    %p
      %img{src: "http://placehold.it/300x440&text=[ad]"}/
/ Footer
%footer.row
  .large-12.columns
    %hr/
    .row
      .large-5.columns
        %p © Copyright no one at all. Go to town.
      .large-7.columns
        %ul.inline-list.right
          %li
            %a{href: "#"} Section 1
          %li
            %a{href: "#"} Section 2
          %li
            %a{href: "#"} Section 3
          %li
            %a{href: "#"} Section 4
          %li
            %a{href: "#"} Section 5
          %li
            %a{href: "#"} Section 6

= javascript_include_tag "application"

:plain

</html>