Create a gist now

Instantly share code, notes, and snippets.

Embed
How to get HTML5 Boilerplate-style Conditional Comments Working in Slim
doctype html
/[if lt IE 7]
| <html class="ie6">
/[if IE 7]
| <html class="ie7">
/[if IE 8]
| <html class="ie8">
/[if IE 9]
| <html class="ie9">
| <!--[if (gte IE 9)|!(IE)]<!--> <html> <!--<![endif]-->
head
/ various head stuff
body
/ various body stuff
| </html>
@helloluis

This comment has been minimized.

Show comment
Hide comment
@helloluis

helloluis Aug 31, 2011

On the off chance that this will help someone else out there:

The main trick here is using the pipe character ( | ) to print unprocessed text into your template. Notice that "head" and "body" are both un-indented, because Slim isn't aware of an "html" container element anywhere on the page. That means that you'll need to create your own closing "html" tag at the bottom of the document, not that this is strictly necessary anymore in this day and age, but we want to be neat if we can.

Owner

helloluis commented Aug 31, 2011

On the off chance that this will help someone else out there:

The main trick here is using the pipe character ( | ) to print unprocessed text into your template. Notice that "head" and "body" are both un-indented, because Slim isn't aware of an "html" container element anywhere on the page. That means that you'll need to create your own closing "html" tag at the bottom of the document, not that this is strictly necessary anymore in this day and age, but we want to be neat if we can.

@sobering

This comment has been minimized.

Show comment
Hide comment
@sobering

sobering Jan 17, 2012

Wow, thank you! I spent about an hour fiddling to try and get this working with Slim, but never quite got where I needed to be. Thank you!

Wow, thank you! I spent about an hour fiddling to try and get this working with Slim, but never quite got where I needed to be. Thank you!

@recipher

This comment has been minimized.

Show comment
Hide comment
@recipher

recipher Mar 2, 2012

Excellent. I've struggled with this for a long time (and given up). Slim can be a pain sometimes. But I forgive it.

Thanks.

recipher commented Mar 2, 2012

Excellent. I've struggled with this for a long time (and given up). Slim can be a pain sometimes. But I forgive it.

Thanks.

@joe1chen

This comment has been minimized.

Show comment
Hide comment
@joe1chen

joe1chen Jul 18, 2012

Thanks for the tip. I tweaked the above code to avoid the non-standard un-indented "head" and "body" and also removed the end "html" tag, which is no longer necessary. The advantage of this is that the "html" tag is now in slim, and can be styled (i.e. adding a class or id to the html tag).

doctype html
/[if lt IE 7]
  | <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7">
/[if IE 7]
  | <html class="ie ie7 lt-ie9 lt-ie8">
/[if IE 8]
  | <html class="ie ie8 lt-ie9">
/[if IE 9]
  | <html class="ie ie9">
| <!--[if (gte IE 9)|!(IE)]<!-->
html
  | <!--<![endif]-->
  head
    / various head stuff

  body
    / various body stuff

Thanks for the tip. I tweaked the above code to avoid the non-standard un-indented "head" and "body" and also removed the end "html" tag, which is no longer necessary. The advantage of this is that the "html" tag is now in slim, and can be styled (i.e. adding a class or id to the html tag).

doctype html
/[if lt IE 7]
  | <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7">
/[if IE 7]
  | <html class="ie ie7 lt-ie9 lt-ie8">
/[if IE 8]
  | <html class="ie ie8 lt-ie9">
/[if IE 9]
  | <html class="ie ie9">
| <!--[if (gte IE 9)|!(IE)]<!-->
html
  | <!--<![endif]-->
  head
    / various head stuff

  body
    / various body stuff
@wesbos

This comment has been minimized.

Show comment
Hide comment
@wesbos

wesbos Jul 22, 2014

Even simpler, just use the /! for an HTML comment:

doctype html
/[if IE 8]
  | <html class="ie8 lt-ie9" lang="en">
/[if IE 9]
  | <html class="ie9" lang="en">
/! [if (gte IE 9)|!(IE)]<!--> <html lang="en"> <!--<![endif]

wesbos commented Jul 22, 2014

Even simpler, just use the /! for an HTML comment:

doctype html
/[if IE 8]
  | <html class="ie8 lt-ie9" lang="en">
/[if IE 9]
  | <html class="ie9" lang="en">
/! [if (gte IE 9)|!(IE)]<!--> <html lang="en"> <!--<![endif]
@arxpoetica

This comment has been minimized.

Show comment
Hide comment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment