SteveBenner/html5-boilerplate-4.3.0.slim

## html5-boilerplate-4.3.0.slim
/ 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>

## •example-output-4.3.0.html
<!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>
	<!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>