7 ms·

HTML5 Bones: The template that goes back to basics

84 points by gulbrandr 14y ago

lewisflude 14y ago
Styling bug on homepage http://cl.ly/image/1s3G0w2K2T0Q http://cl.ly/image/1s3G0w2K2T0Q
- drublic 14y ago
  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.
  - iandevlin 14y ago
    I certainly can't reproduce it :-/
  - leddt 14y ago
    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.
envex 14y ago
I'd suggest offering a version with no comments as well.
- mnicole 14y ago
  This or provide a tool to strip the comments for them once they're ready to go to production.
asc76 14y ago
I'm frameworked out.
- metastew 14y ago
  2012: The year of frameworks.
- johnward 14y ago
  This isn't really a framework though. It's more like a boiler plate or template that just gives you a good place to start. Maybe you are boilerplated out...
- bradwestness 14y ago
  If only there were a framework for keeping track of all these frameworks!
johnward 14y ago
"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 14y ago
  Couldn't agree more, "Slim HTML5 Boilerplate" would be a better title
simonsarris 14y ago
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 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.html https://github.com/h5bp/html5-boilerplate/blob/master/index.... I think that the index page HTML5 Bones has is rather bloated in comparison: https://github.com/iandevlin/html5bones/blob/master/index.html https://github.com/iandevlin/html5bones/blob/master/index.ht... 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>
- camus 14y ago
  web devs dont give a "beep" about tags, if they did , they would have supported XHMLT... they give even less "beep" about validation... And they are so lazy they cant even take the time to write their own CSS files...
- suyash 14y ago
  that is correct, this is the real html5 bones
- RyanZAG 14y ago
  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:   <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.
suyash 14y ago
This is nice, HTML5 Boilerplate was too overbloated
debacle 14y ago
If it's really barebones, it should be small enough to copy and paste it from the site, I would think. Right?
tijs 14y ago
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 14y ago
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.
spohlenz 14y ago
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.
DigitalSea 14y ago
Not quite the simple template I expected this to be, so I created my own: https://github.com/Vheissu/Actually-Barebones-HTML5-Template 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.
necolas 14y ago
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 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 http://news.ycombinator.com/item?id=4949635 If that's what you're looking for, just delete jQuery and Modernizr from HTML5 Boilerplate :)
- recursive 14y ago
  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.
- xnxn 14y ago
bgarbiak 14y ago
A minimal HTML5 boilerplate of my choice: http://csswizardry.com/2011/01/the-real-html5-boilerplate/ 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.
dizzystar 14y ago
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/semantics.html#semantics http://www.whatwg.org/specs/web-apps/current-work/multipage/...
- gotofritz 14y ago
  In a word, yes. There is a lot of knowledge about optimisation, handling different devices, responsive design buried in these boilerplates.
tszming 14y ago
If you are looking for a slim html5 boilerplate, Skeleton is a very good choice I highly recommend: http://www.getskeleton.com http://www.getskeleton.com
SparrowOS 14y ago
http://www.sparrowos.com/Wb/Adam/ToHtml.html http://www.sparrowos.com/Wb/Adam/ToHtml.html Run in VMWare http://www.sparrowos.com/SparrowOSTS.ISO http://www.sparrowos.com/SparrowOSTS.ISO >TSInstall; >MakeBack; //Makes F:/Wb http://www.sparrowos.com/Wb/Demo/AcctExample/TSDistribute.html http://www.sparrowos.com/Wb/Demo/AcctExample/TSDistribute.ht...

84 points by gulbrandr 14y ago

lewisflude 14y ago

Styling bug on homepage http://cl.ly/image/1s3G0w2K2T0Q http://cl.ly/image/1s3G0w2K2T0Q

drublic 14y ago
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.
- iandevlin 14y ago
  I certainly can't reproduce it :-/
- leddt 14y ago
  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.

envex 14y ago

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

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

asc76 14y ago

I'm frameworked out.

metastew 14y ago
2012: The year of frameworks.
johnward 14y ago
This isn't really a framework though. It's more like a boiler plate or template that just gives you a good place to start. Maybe you are boilerplated out...
bradwestness 14y ago
If only there were a framework for keeping track of all these frameworks!

johnward 14y ago

"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 14y ago
Couldn't agree more, "Slim HTML5 Boilerplate" would be a better title

simonsarris 14y ago

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 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.html https://github.com/h5bp/html5-boilerplate/blob/master/index.... I think that the index page HTML5 Bones has is rather bloated in comparison: https://github.com/iandevlin/html5bones/blob/master/index.html https://github.com/iandevlin/html5bones/blob/master/index.ht... 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>

camus 14y ago
web devs dont give a "beep" about tags, if they did , they would have supported XHMLT... they give even less "beep" about validation... And they are so lazy they cant even take the time to write their own CSS files...
suyash 14y ago
that is correct, this is the real html5 bones
RyanZAG 14y ago
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:   <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.

suyash 14y ago

This is nice, HTML5 Boilerplate was too overbloated

debacle 14y ago

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

tijs 14y ago

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 14y ago

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.

spohlenz 14y ago

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.

DigitalSea 14y ago

Not quite the simple template I expected this to be, so I created my own: https://github.com/Vheissu/Actually-Barebones-HTML5-Template 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.

necolas 14y ago

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 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 http://news.ycombinator.com/item?id=4949635 If that's what you're looking for, just delete jQuery and Modernizr from HTML5 Boilerplate :)

recursive 14y ago
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.
xnxn 14y ago

bgarbiak 14y ago

A minimal HTML5 boilerplate of my choice: http://csswizardry.com/2011/01/the-real-html5-boilerplate/ 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.

dizzystar 14y ago

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/semantics.html#semantics http://www.whatwg.org/specs/web-apps/current-work/multipage/...

gotofritz 14y ago
In a word, yes. There is a lot of knowledge about optimisation, handling different devices, responsive design buried in these boilerplates.

tszming 14y ago

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

SparrowOS 14y ago

http://www.sparrowos.com/Wb/Adam/ToHtml.html http://www.sparrowos.com/Wb/Adam/ToHtml.html Run in VMWare http://www.sparrowos.com/SparrowOSTS.ISO http://www.sparrowos.com/SparrowOSTS.ISO >TSInstall; >MakeBack; //Makes F:/Wb http://www.sparrowos.com/Wb/Demo/AcctExample/TSDistribute.html http://www.sparrowos.com/Wb/Demo/AcctExample/TSDistribute.ht...