jcanfield
9/25/2014 - 3:06 PM

Slim template - HTML5 Boilerplate index page

Slim template - HTML5 Boilerplate index page

<!DOCTYPE html>
<!--[if lt IE 7]      <html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]         <html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]         <html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]<!--> <html class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
  <!--Place favicon.ico and apple-touch-icon.png in the root directory--> 
  
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/main.css" />
  <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <!--[if lt IE 7]>
  <p class="browsehappy">
    You are using an <strong>outdated</strong> browser. Please<a href="http://browsehappy.com/">Upgrade your browser to improve your experience</a>
  </p>
  <![endif]-->
   
  <!--Add your site or application content here-->
  <p>
    Hello world! This is HTML5 Boilerplate.
  </p>
  
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
    window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')
  </script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  
  <!--Google Analytics: change UA-XXXXX-X to be your site's ID.-->
  <script type="text/javascript">
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','UA-XXXXX-X');ga('send','pageview');
  </script>
</body>
</html>
/ This template produces an EXACT replica of the `index.html` file found in HTML5 Boilerplate v4.3.0
/ The official distribution is located at: https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/index.html
/
/ For a more elegant way to generate the HTML tags within IE conditional comments, see the abstraction
/ in my gist at: https://gist.github.com/SteveBenner/a71f41e175f135b7d69b
/
doctype html
/ The min and max values of the version range actually represent all values below or above the limit
- ie_versions = 6..9 # A minimum value of 6 for example, translates into 'less than 7'
- for version in ie_versions
  ruby:
    html_class_str = (version+1..ie_versions.max).to_a.reverse.collect { |j| " lt-ie#{j}" }.join
    html_tag       = %Q[      <html class="no-js#{html_class_str}">]
    version_string = case version
      when ie_versions.min then "lt IE #{version + 1}"
      when ie_versions.max
        html_tag.lstrip!.prepend('<!--> ').concat(' <!--')
        "gt IE #{version - 1}"
      else
        html_tag.prepend('   ')
        "IE #{version}"
    end
  / Note the use of interpolation within the HTML comment directive below. Though this feature is not
  / officially documented, it works fine. IE conditional comments may NOT use interpolation, however.
  /
  / WARNING!!! Pay attention to your Slim settings for escaping HTML content; by default, a valid HTML
  / string must be 'unescaped' by enclosing the interpolated content within an extra set of brackets.
  /
  /! [if #{version_string}]#{{html_tag}}<![endif]

head
  meta charset="utf-8"
  meta http-equiv="X-UA-Compatible" content="IE=edge"
  title
  meta name="description" content=""
  meta name="viewport" content="width=device-width, initial-scale=1"
  '
  = $/
  /! Place favicon.ico and apple-touch-icon.png in the root directory
  '
  = $/

  link rel="stylesheet" href="css/normalize.css"
  link rel="stylesheet" href="css/main.css"
  script src="js/vendor/modernizr-2.6.2.min.js"
body
  /[if lt IE 7]
    p.browsehappy
      | You are using an <strong>outdated</strong> browser. Please
      | <a href="http://browsehappy.com/">Upgrade your browser to improve your experience</a>
  = $/
  '
  = $/
  /! Add your site or application content here
  p Hello world! This is HTML5 Boilerplate.
  '
  script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
  javascript:
    window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')
  script src="js/plugins.js"
  script src="js/main.js"
  '
  = $/
  /! Google Analytics: change UA-XXXXX-X to be your site's ID.
  javascript:
    (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','UA-XXXXX-X');ga('send','pageview');
| </html>