Skip to content

Instantly share code, notes, and snippets.

@jcanfield

jcanfield/html5-boilerplate-4.3.0.slim

Forked from SteveBenner/html5-boilerplate-4.3.0.slim
Created August 17, 2016 07:44
Show Gist options
  • Save jcanfield/2bd6928f11ac4af1239729df6a7e285f to your computer and use it in GitHub Desktop.
Save jcanfield/2bd6928f11ac4af1239729df6a7e285f to your computer and use it in GitHub Desktop.
Download ZIP
Slim template - HTML5 Boilerplate index page
Raw
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>
Raw
•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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment