
HTML5 Bones: The template that goes back to basics - gulbrandr
http://html5bones.com/
======
necolas
Hi, I'm part of the team working on HTML5 Boilerplate.

As this featured project is, in some way, defining itself relative to what it
believes HTML5 Boilerplate is and should be, I'm going to chime in with some
thoughts.

If someone wants to create a new project _after_ their concerns have not been
shared by others maintaining a large, existing, community project (e.g., how
Lo-Dash came to be) then that's fair enough. But I'm always disappointing to
see people do so before raising their concerns and making their arguments. It
would avoid the repetition of errors and discussions that have been addressed
previously. We could also work together to adapt HTML5 Boilerplate if there is
a good case to do so.

Once-upon-a-time, I didn't appreciate the work and community knowledge that
went into HTML5 Boilerplate. However, after I started to open issues against
the repo and contribute to the project, I realised that it has always been
_very_ open to contributions and changes of direction. I had significantly
underestimated how much thought and combined knowledge was going into the
project, and how much it was constantly evolving.

It's hard to design a useful starting template that's clear and friendly
enough for newcomers, documented enough for explorers, and svelte enough for
experienced developers. We're always trying to figure out the best way to
present the value of the project while not scaring away too many people.
Hopefully, we're doing a decent job of balancing those concerns and making
people feel welcome in the discussions.

I hope that developers will continue to work _with_ \-- and look to join --
the people developing HTML5 Boilerplate at any given time. If you think
something is missing or should be removed, make the case for it. We listen and
learn; we're constantly evolving the project.

Thanks

\------

> HTML5 BP is maintained by Google people.
> <http://news.ycombinator.com/item?id=4949018>

That's not true. Only Paul Irish works at Google.

> "Slim HTML5 Boilerplate" would be a better title
> <http://news.ycombinator.com/item?id=4949635>

If that's what you're looking for, just delete jQuery and Modernizr from HTML5
Boilerplate :)

~~~
recursive
There's no reason to be bothered by people creating a project in their own
vision. No one owes HTML5 Boilerplate anything. FWIW, I'd never heard of it
before today, and it looks pretty cool.

------
simonsarris
Edit: I've made my first ever pull request on Github. I hope I'm doing it
right:

<https://github.com/iandevlin/html5bones/pull/2>

\---------

Looking at all the stuff that index.html includes I think the name is
misleading. Google Analytics? I know HTML5 Boilerplate has it, but HTML5 BP is
maintained by Google people.

Actually, HTML5 BP has an index page that's _smaller_ than HTML5 Bones:
[https://github.com/h5bp/html5-boilerplate/blob/master/index....](https://github.com/h5bp/html5-boilerplate/blob/master/index.html)

I think that the index page HTML5 Bones has is rather bloated in comparison:
[https://github.com/iandevlin/html5bones/blob/master/index.ht...](https://github.com/iandevlin/html5bones/blob/master/index.html)

And it seems like a bad template to start from, since I'd be erasing most of
it, like the <aside role="complementary"> and abbr tags. In fact, most of that
page is just explaining the page, which really doesn't belong in a template.

The project does, however, showcase how to properly use a lot of the new HTML5
tags, and I think that's commendable in its own right. I just don't think it
makes the template as useful as it might otherwise be, especially if its
purporting to be (bare) bones.

I'm probably just being way too harsh though.

\---------

For the record, since I might as well be the first to pedantry, this is the
smallest validating HTML5 page:

    
    
        <!DOCTYPE html>
        <meta charset="utf-8" />
        <title></title>
    

And this is what I expected the project to look like, given the name:

    
    
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8" />
          <title></title>
        </head>
        <body>
    
        </body>
        </html>

~~~
RyanZAG
Probably way too harsh - BP gives the minimum that you can try and plug your
own code into.

html5bones is clearly taking a different route, by making everything and every
tag as clear as possible. Everything is commented to give someone starting out
a good explanation of why all this stuff is there.

eg. in HTML5 BP:

    
    
      <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
    

Newbies are now completely lost. What's going on here?

html5bones:

    
    
      <!-- An <aside> is used to enclose content that is additional to the 
      main content but not essential. If it were removed, the meaning of 
      the main content should not be lost, but the content of the <aside> 
      also retains its meaning. -->
      <!-- ARIA: the landmark role "complementary" is added here as it 
      contains supprting information for the main content that remains 
      meaningful even when separated from it -->
      <aside role="complementary">
    

I heavily applaud this idea - too much of HTML best practices is completely
arcane to most of the people using it. The more people understanding what this
stuff actually does the better for everyone.

~~~
iandevlin
Hi, I wrote HTML5 Bones and to be fair Simon has a good idea (detailed in the
GitHub pull request) in that there should be two versions, a file with all the
comments and one without - and so catering for both types of users.

I definitely don't want to remove the comments as they are integral to what I
want the "template" to help people do.

Thanks for your comments so far!

~~~
yannis
Since you adding ARIA related info a small example for a table can be useful.
Thanks for publishing it.

------
johnward
"bare minimum required to get going with HTML5."

Includes GA code? I get the point of the project and I might even use it but
I'm not sure GA fits in with the theme of the bare minimum required to create
HTML5 docs.

~~~
mrpollo
Couldn't agree more, "Slim HTML5 Boilerplate" would be a better title

------
dizzystar
I'm sort of lost on the idea of this and Boiler Plate. Is HTML really this
difficult to use? I don't understand why these are less confusing than the
very well-written WHATWG documentation. [1]

I'm not really sure who the target is for these HTML 5 frameworks: brand new
HTML users with no coding experience? This seems like a target that is
completely lost anyways, as you are now enforcing some idea that they really
won't understand anyways. Yeah, I get the idea, but I won't use it because
writing correct and valid HTML5 is not hard at all.

Twitter Bootstrap has a very simple mission statement: give those who can't
design the ability to create some minimally nice design. Why? Because design
is very hard. HTML isn't.

[1] [http://www.whatwg.org/specs/web-apps/current-
work/multipage/...](http://www.whatwg.org/specs/web-apps/current-
work/multipage/semantics.html#semantics)

~~~
gotofritz
In a word, yes.

There is a lot of knowledge about optimisation, handling different devices,
responsive design buried in these boilerplates.

------
envex
I'd suggest offering a version with no comments as well.

~~~
mnicole
This or provide a tool to strip the comments for them once they're ready to go
to production.

------
asc76
I'm frameworked out.

~~~
bradwestness
If only there were a framework for keeping track of all these frameworks!

------
tijs
I love what you've done here. It's indeed a great starting template and unlike
that -other- html5 template it does a good job explaining why you would or
wouldn't use some of the elements.

I also disagree with some of the other commenters on the inclusion of GA code,
yeah it could do without but i have never put a site online that didn't have
that tag in it while i have released many that did not need Modernizr, jquery
or some of the other fancy pants stuff in boilerplate.

Also i love the plug-and-play video template. Well done sir!

------
pacomerh
It's not simple enough to be bare bones and not useful enough to bookmark, in
my opinion. The idea is good, and the domain also.

------
DigitalSea
Not quite the simple template I expected this to be, so I created my own:
<https://github.com/Vheissu/Actually-Barebones-HTML5-Template> — Most of these
HTML5 templates I use I strip 99% of the crap out anyway and only need the
doctype, head and body tags.

------
bgarbiak
A minimal HTML5 boilerplate of my choice: <http://csswizardry.com/2011/01/the-
real-html5-boilerplate/>

I never really got why would anyone need things like image replacement or
Google Analytics in a HTML5 template. The KISS principle comes to mind.

------
lewisflude
Styling bug on homepage <http://cl.ly/image/1s3G0w2K2T0Q>

~~~
drublic
This might be a Chrome Canary Bug. Get it on a lot of pages where elements are
floated. The n+1th element always has a margin on top. Couldn't figure out
what the real issue is though.

~~~
leddt
I also get this on Chrome Dev (windows). It fixes itself if I resize the
browser to get the mobile layout and then size it back to normal.

------
spohlenz
If you are wanting to properly support IE7 (as mentioned in the README), you
may want to downgrade normalize.css to 1.0.2 as normalize.css 2.x only
supports IE8+.

There are only a few edge cases that are affected but they can bite if you
were expecting full compatibility.

------
tszming
If you are looking for a slim html5 boilerplate, Skeleton is a very good
choice I highly recommend: <http://www.getskeleton.com>

------
suyash
This is nice, HTML5 Boilerplate was too overbloated

------
debacle
If it's really barebones, it should be small enough to copy and paste it from
the site, I would think.

Right?

