Skip to content

Instantly share code, notes, and snippets.

@assimovt

assimovt/new.html

Created August 20, 2011 17:28
Show Gist options
  • Save assimovt/1159380 to your computer and use it in GitHub Desktop.
Save assimovt/1159380 to your computer and use it in GitHub Desktop.
Download ZIP
Refactor Rails application layout to use HTML5 semantics with HAML
Raw
new.html
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset='utf-8'>
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>My cool app</title>
<meta content='' name='description'>
<meta content='' name='author'>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta content='width=device-width,initial-scale=1' name='viewport'>
<link href='/favicon.ico' rel='shortcut icon'>
<!-- CSS concatenated and minified -->
<link href="/stylesheets/screen.css?1313858568" media="screen, projection" rel="stylesheet" />
<link href="/stylesheets/print.css?1312488571" media="print" rel="stylesheet" />
<script src='https://www.google.com/jsapi?key=YOUR_GOOGLE_KEY'></script>
<script src="/javascripts/modernizr-2.0.6.min.js?1313778879"></script>
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
</head>
<body>
<div id='container'>
<!-- Put your global header here, with title of the web site, navigation, etc. -->
<header>
<h1>My cool app</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
...
</ul>
</nav>
<div class='topbar'>
</div>
</header>
<!-- This is a three-column site, so left sidebar -->
<aside class='left'>
</aside>
<!-- Your main content goes here -->
<div id='content'>
</div>
<!-- This is a three-column site, so right sidebar with example sections -->
<aside class='right'>
<section class='map'>
</section>
<section class='favorites'>
</section>
<section class='some_other_module'>
</section>
</aside>
<!-- Your footer goes here -->
<footer></footer>
</div>
<!-- See http://code.google.com/apis/libraries/ for more libraries used from Google CDN -->
<script type='text/javascript'>
//<![CDATA[
google.load('jquery', '1.6.2');
google.load('jqueryui', '1.8.15');
// fall back to local if Google is offline
if (!window.jQuery) {
document.write('<script src="/javascripts/jquery.min.js"><\/script>');
document.write('<script src="/javascripts/jquery-ui.min.js"><\/script>');
};
//]]>
</script>
<!-- Load plugins and application JavaScripts here -->
<script src="/javascripts/application.js?1311006923"></script>
<!-- Replace UAXXXXXXXX1 with your Google Analytics code -->
<script type='text/javascript'>
//<![CDATA[
// Google analytics
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
//]]>
</script>
<!--[if lt IE 7 ]>
<script src='//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js'></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
Raw
new.html.haml
!!! 5
:erb
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="<%= I18n.locale %>"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="<%= I18n.locale %>"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="<%= I18n.locale %>"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="<%= I18n.locale %>"> <!--<![endif]-->
%head
%meta{:charset => 'utf-8'}
%meta{'http-equiv' => 'X-UA-Compatible', :content => 'IE=edge,chrome=1'}
%title= CONFIG[:app_name]
= csrf_meta_tag
%meta{:name => 'description', :content => ''}
%meta{:name => 'author', :content => ''}
%meta{:name => 'viewport', :content => 'width=device-width,initial-scale=1'}
%link{:rel => "shortcut icon", :href => "/favicon.ico"}
= include_stylesheets :common, :media => 'screen, projection'
= include_stylesheets :print, :media => 'print'
%script{:src => "https://www.google.com/jsapi?key=#{CONFIG[:google_api]}"}
- # This loads modernizr through Jammit
= include_javascripts :pre
= yield :head
/ More ideas for your <head> here: h5bp.com/d/head-Tips
%body
#container
%header
%h1= CONFIG[:app_name]
%nav
%ul= render :partial => 'shared/main_navigation'
.topbar
%aside.left= render :partial => 'shared/left_sidebar'
#content
= yield
%aside.right
- # Each partial is defined in a <section> element
= render :partial => 'shared/map'
= render :partial => 'favorites/index'
= yield :sidebar
%footer
:javascript
google.load('jquery', '1.6.2');
google.load('jqueryui', '1.8.15');
// fall back to local if Google is offline
if (!window.jQuery) {
document.write('<script src="/javascripts/jquery.min.js"><\/script>');
document.write('<script src="/javascripts/jquery-ui.min.js"><\/script>');
};
= include_javascripts :common, :jquery
- # Inline scripts may be added with
- # content_for :scripts do
- # :javascripts
= yield :scripts
:javascript
// Google analytics
window._gaq = [['_setAccount','#{CONFIG[:google_analytics]}'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
/[if lt IE 7 ]
%script{:src => "//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"}
%script window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})
Raw
original.html
<!DOCTYPE html>
<html>
<head>
<title>My cool app</title>
<link href="/stylesheets/screen.css?1313860738" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css?1312488571" media="print" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link href="/stylesheets/ie6.css?1313779737" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 8]>
<link href="/stylesheets/ie.css?1313779737" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
<script src='https://www.google.com/jsapi?key=YOUR_GOOGLE_KEY' type='text/javascript'></script>
<script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script>
</head>
</html>
<body>
<div id='container'>
<div id='header_wrapper'>
<div id='header'>
<div class='logo'></div>
<ul id='main_navigation'>
<li><a href="/">Home</a></li>
</ul>
</div>
<div id='topbar'>
</div>
</div>
<div id='left'>
</div>
<div id='content'>
</div>
<div id='sidebar'>
<div class='module' id='map'>
</div>
<div class='module' id='favorites'>
</div>
</div>
<div id='footer'></div>
</div>
<script type='text/javascript'>
//<![CDATA[
google.load("jquery", "1.5.2");
google.load("jqueryui", "1.8.11");
//]]>
</script>
<script src="/javascripts/application.js?1311006923" type="text/javascript"></script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment