Skip to content

Instantly share code, notes, and snippets.

@assimovt
Created August 20, 2011 17:28
Show Gist options
  • Select an option

  • Save assimovt/1159380 to your computer and use it in GitHub Desktop.

Select an option

Save assimovt/1159380 to your computer and use it in GitHub Desktop.

Revisions

  1. Tair Assimov created this gist Aug 20, 2011.
    117 changes: 117 additions & 0 deletions new.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,117 @@
    <!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>
    88 changes: 88 additions & 0 deletions new.html.haml
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    !!! 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'})})
    64 changes: 64 additions & 0 deletions original.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    <!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>