!!! 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
.row .large-3.columns %h1 %img{src: "http://placehold.it/400x100&text=Logo"}/ .large-9.columns %ul.right.button-group %li %a.button{href: "#"} Link 1 %li %a.button{href: "#"} Link 2 %li %a.button{href: "#"} Link 3 %li %a.button{href: "#"} Link 4 / End Header and Nav / First Band (Slider) .row .large-12.columns #slider %img{src: "http://placehold.it/1000x400&text=[ img 1 ]"}/ %hr/ / Three-up Content Blocks .row .large-4.columns %img{src: "http://placehold.it/400x300&text=[img]"}/ %h4 This is a content section. %p 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. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef. .large-4.columns %img{src: "http://placehold.it/400x300&text=[img]"}/ %h4 This is a content section. %p 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. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef. .large-4.columns %img{src: "http://placehold.it/400x300&text=[img]"}/ // It's up to you where to put your yield. Edit your layout. =) = yield / Call to Action Panel .row .large-12.columns .panel %h4 Get in touch! .row .large-9.columns %p We'd love to hear from you, you attractive person you. .large-3.columns %a.radius.button.right{href: "#"} Contact Us / Footer %footer.row .large-12.columns %hr/ .row .large-6.columns %p © Copyright no one at all. Go to town. .large-6.columns %ul.inline-list.right %li %a{href: "#"} Link 1 %li %a{href: "#"} Link 2 %li %a{href: "#"} Link 3 %li %a{href: "#"} Link 4 = javascript_include_tag "application"
:plain
</html>