Skip to content

Instantly share code, notes, and snippets.

@xtian
Last active December 23, 2023 15:05
Show Gist options
  • Star 69 You must be signed in to star a gist
  • Fork 34 You must be signed in to fork a gist
  • Save xtian/888338 to your computer and use it in GitHub Desktop.
Save xtian/888338 to your computer and use it in GitHub Desktop.
HTML5 Boilerplate in jade
!!! 5
html(class='no-js')
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')
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 8
p.chromeframe.
You are using an <strong>outdated</strong> browser.
Please <a href="http://browsehappy.com/">upgrade your browser</a>
to improve your experience.
p Hello world! This is HTML5 Boilerplate.
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
script 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')
script
(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');
@xtian
Copy link
Author

xtian commented Apr 17, 2011

https://github.com/visionmedia/jade/blob/master/lib/doctypes.js#L9

!!! html is for non-terse rendering (i.e., self-closing tags and self-referencing boolean attributes), which I prefer.

@busticated
Copy link

line 37 (the jQuery fallback) isn't working for me... I'll take a swing at fixing in a bit.

@xtian
Copy link
Author

xtian commented Apr 19, 2011

Not working how? As far as I can tell it renders identically to what's in the Boilerplate.

Edit: Maybe it was that the src attribute didn't use double quotes? I must have missed it when I did a find and replace on double to single quotes.

@busticated
Copy link

yup I think that was it! it's working like a charm now... thanks!

@L-four
Copy link

L-four commented Aug 15, 2011

Awsome thanks!

@arruda
Copy link

arruda commented Jun 9, 2012

don't get it, why no one use jade block in templates?
Is it a bad way of doing things?
Because from my point of view letting everything out of the template engine is...er... strange...
Shouldn't be somewhere in there something like:
h5bp.jade:

body
    block content
         // content goes here

base_layout.jade:

extends h5bp
block content
    p Hi!

I'm used to Django template engine, and get very confused why no one uses * extends * or * block *

@xtian
Copy link
Author

xtian commented Jun 10, 2012

@arruda I do use extends and block. This is just a jade version of the h5bp index.html, not an example of how you should structure your templates.

@arruda
Copy link

arruda commented Jun 10, 2012

Oh, I see, well, good to know that the idea of using blocks and extends is used.
Thanks for the enlighment

@j0lv3r4
Copy link

j0lv3r4 commented Aug 5, 2012

why codekit doesn't compile and show me this error: http://d.pr/i/3CSF ?

@maeseele
Copy link

I had to change line 10 to

//<![endif]-->

In order for jade to compile it correctly for me.

@kaosf
Copy link

kaosf commented May 14, 2013

Hi, @xtian.

Thanks to a marvelous Jade code for h5bp. It's very helpful for me.

I think that <\\/script> in line 35 should be changed to <\/script>.

https://gist.github.com/kaosf/5579155/98c949a32d1aa5fe747800cf6021785deddc7895

My environment is;

  • Node.js 0.10.0
  • Jade 0.30.0

I transfered Jade to HTML and checked with the following command;

jade -P < html5boilerplate.jade

@xtian
Copy link
Author

xtian commented Oct 23, 2013

@kaosf Thanks, that was a workaround for a double escaping issue in Jade that must have been fixed since I last updated this gist.

@Danilovesovic
Copy link

Thanks...

@chiunhau
Copy link

nice!

@tonymtz
Copy link

tonymtz commented Jan 1, 2016

That doctype was deprecated some time ago, now this is the way to go:

doctype html

Cheers

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