html5-boilerplate - A professional front-end template for building fast, robust, and adaptable web apps or sites. HTML5 Boilerplate: The web’s most popular front-end template

What is the use of the hackers.txt file?


No I am not asking you to teach me hacking, I am just curious about this file and its content.

My journey

When I dived into the new HTML5 Boilerplate I came accross the humans.txt. I googled for it and I came at this site http://humanstxt.org/.

Immediately my attention went to this picture:

Where is it located

Do I read this correctly? Hackers.txt?

So I resumed my journey in google and stopped at this articles

When I started reading this I had the feeling that its about the difference between Hackers and Crackers. Later I got the feeling that I'm might be wrong and that this place is that this hackers.txt file is a sort of guestbook for hackers?

Also other examples about hackers.txt files I found here

Some files contain code, others have just hurtfull information.

Now I'm realy confused, guestbook, hack tutorials or just history?


What is the use of this hackers.txt file?

Source: (StackOverflow)

JavaScript on the bottom of the page?

I've read that it is better to keep all of your JavaScript files on the bottom of the webpage. The HTML5 Boilerplate template seems to agree: http://html5boilerplate.com/

And seems to be widely used.

My question is: first, does this have any real basis? I've done testing in Firebug and it seems to have some small effect, but is it trivial? Images and other sources don't seem to start loading until CSS files and script files have loaded, but sticking them on the bottom doesn't seem to make much difference in this at all.

Source: (StackOverflow)

What is the purpose of the HTML "no-js" class?

I notice that in a lot of template engines, in the HTML5 Boilerplate, in various frameworks and in plain php sites there is the no-js class added onto the <HTML> tag.

Why is this done? Is there some sort of default browser behavior that reacts to this class? Why include it always? Does that not render the class itself obsolete, if there is no no-"no-js" case and html can be addressed directly?

Here is an example from the HTML5 Boilerplate index.html:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

As you can see, the <html> element will always have this class. Can someone explain why this is done so often?

Source: (StackOverflow)

Can we use Foundation with HTML5Boilerplate?

My client wants me to use Foundation. I am habitual of HTML5Boilerplate with 960 Grid System. I am just wondering can I use Foundation with H5BP? I will appreciate your guidance.

Source: (StackOverflow)

I just created an HTML 5 Boilerplate project in WebStorm. Is there a standard command for compiling the "dist" folder?

I'm getting started with WebStorm 9. I created an HTML 5 Boilerplate project and I noticed a src and a dist folder.

Is there a standard command to compile the content of the src folder into the dist folder?

This is how my project looks like:

enter image description here

Source: (StackOverflow)

is bower install html5boilerplate is a good thing ?

My question is it good to install html5boilerplate with bower? How can one proceed after that as it have its own directory for css and javascript and everything will come under bower_component/html5boilerplate

Source: (StackOverflow)

HTML5 Boilerplate: Meta viewport and width=device-width

I'm building an adaptive/responsive website.

Regarding this recent change to the HTML5BP:

"mobile/iOS css revisions"

I've started using:

<meta name="viewport" content="width=device-width">

... and I have this in my CSS:

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;

When initial-scale=1 was included, rotating from vertical to horizontal (on iPad/iPhone) caused the layout to change from 2 columns (for example) to 3 columns (due to meida queries, initial-scale=1 and JS fix for viewport scale bug).

To summarize, when in landscape mode, this zooms the page:

<meta name="viewport" content="width=device-width">

... and this does not:

<meta name="viewport" content="width=device-width, initial-scale=1">

Note: You can see this zooming effect in action when viewing the HTML5BP website on an iPad/iPhone.

My questions:

  1. Is this becoming the new standard (i.e. zoom when in landscape mode)?
  2. I'm having a heck of a time explaining this change to my co-workers and bosses... They're used to seeing a different layout in horizontal mode; now that the page zooms and the layout stays the same (except it's larger). Any tips on how to explain this to the ignorant masses (of which, I might be included)?

@robertc: Thanks! That's very helpful.

I actually like not having the initial-scale=1; it's my co-workers who are used to seeing the layout change rather than zoom. I'm sure I'll be forced to add initial-scale=1 just to please everyone (because not zooming, and seeing the layout change, is what they're used to seeing).

I just noticed the HTML5BP index.html on github, and the website, was using <meta name="viewport" content="width=device-width">; to me, that's good enough reason to ditch initial-scale=1, but I get raised eyebrows when I try to explain these things to the "non-geeks". :D

Source: (StackOverflow)

HTML5 Boilerplate, HTML5 Reset CSS validation

I'm in the process of selecting an HTML5 template for my web projects. I've been using HTML5 Initiliazr which uses Boilerplate for the last few months but decide to reevaluate the two templates, since I don't like the issues with HTML5 Boilerplate's CSS not being valid against W3 CSS validator (CSS3).

Now my question is, given the fact that both CSS resets also take into account vendor quirknesses, will those resets ever be completely valid or is it impossible to assume such a thing?

I did noticed that HTML5 Reset actually has a few issues less than Boilerplate but that might change in the future. However, I did read Boilerplate's explanation on why each and every style was introduced and what problems it solves, so it kinda makes sense.

So what do you think?

Source: (StackOverflow)

What is the value of HTML5 Boilerplate for a Rails application?

There are several application templates (and a Rails gem) that add HTML5 Boilerplate to a Rails application. So I investigated and put together an analysis of HTML5 Boilerplate for Rails. It seems HTML5 Boilerplate doesn't add much that isn't already there in a new Rails app. What's useful:

sample humans.txt file

example index.html file for a default application layout

viewport metatag

Google Analytics snippet

There's some CSS help like CSS normalization, placeholder CSS Media Queries, and CSS helper classes but it seems you'd get all of them and more with a CSS toolkit such as Skeleton, Twitter Bootstrap or Zurb Foundation.

Finally, HTML5 Boilerplate has lots of components for websites that need to support IE6, 7, and 8 such as IE conditional comments, Modernizr, and Chrome Frame. But if I'm not supporting IE6 and I'm using Twitter Bootstrap or Zurb Foundation I don't think I need these.

HTML5 Boilerplate is a good project that has lots of community input. There's a lot of good advice on its website. But for a Rails project?

Am I missing something? What is the value of HTML5 Boilerplate for a Rails application?

Source: (StackOverflow)

HTML5 Boilerplate plugins.js

How is one expected to include additional js files in plugins.js? Is the expectation that we just copy and paste the contents of each plugin there? Or is there some method of doing a js include that I should be using?

Specifically, I'd like to see an example of goes within this function:

// remap jQuery to $


Source: (StackOverflow)

HTML5 Boilerplate vs Twitter Bootstrap with JQuery and JQueryUI [closed]

I would like advice on whether to use HTML 5 Boilerplate or Twitter Bootstrap for a web application which may use JQuery UI controls.

Also is it possible for me to replace the Bootstrap controls with JQuery UI equivalents?

Thanks in advance


Source: (StackOverflow)

AngularJS in HEAD vs BODY

In all of the AngularJS examples, the Angular library is placed in the HEAD tags of the document. I have an existing project that has been built upon the HTML5 Boilerplate layout. This defines that JS libraries should be placed at the very bottom of the DOM before the </BODY> tag.

Does AngularJS need to be placed in the HEAD?

Source: (StackOverflow)

HTML5 Boilerplate and Twitter Bootstrap

I have read various questions answered on Stack about Twitter Bootstrap and HTML5 boilerplate.

I do know the following:

  • Bootstrap and H5BP are not equivalent and are used for different purposes
  • I know what Bootstrap is used for, I use it every day - It is a front-end framework, CSS and JS ready-to-use.Just apply the right classes to your selectors/elements and Bootstrap does everything for you. They have extensive support documentation on their website where you can see what they have to offer inside the framework and how to implement it...
  • You can combine the powers of the two by using initializr
  • H5BP is a template...um thats about it...

But what I don't know yet, is the following:

  • What the heck is H5BP used for? When visiting their website they only give you the source files and that's it(oh yes, and a video). What are the benefits of using it and why would you want to use it alongside Bootstrap for example?

Source: (StackOverflow)

How to properly integrate HTML5 Boilerplate with Twitter Bootstrap?

In my Play 2.0 project I already have Bootstrap integrated (as the less files, Play can compile them in the fly) but now I found Boilerplate and I think it would be a nice idea to make use of it also.

After a bit of googling I found this: http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa

So, looks like integration should be possible, and there are even 2 projects which try to do that. The only problem is that they do completely different things and I'm not sure which one is correct.

https://gist.github.com/1422879 in its current state seems to just ignore styles.css file coming from Boilerplate. It's renamed to h5bp.css, but I don't see h5bp.css included anywhere.

https://github.com/elgreg/html5-boilerstrap on the other hand uses both of them, just splitting styles.css file into two parts (h5bp_normalize.css and styles.css, bootstrap.css is included between them). But aren't there any conflicts between Boilerplate and Bootstrap this way?

So I'm a bit lost. What is the proper way of doing things in this case?

Source: (StackOverflow)

HTML5 Boilerplate with blueprint css

I'm thinking of combining these two technologies for a new project.

Is this bad idea? Are there any recommended alternative grid systems to use with html5 boilerplate?

Source: (StackOverflow)