EzDev.org

html5-boilerplate

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


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)

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 use of the hackers.txt file?

First

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?

Question

What is the use of this hackers.txt file?


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)

Bootstrap equivalent of HTML5Boilerplate's .visuallyhidden

Is there a Twitter Bootstrap equivalent of HTML5Boilerplate's .visuallyhidden non-semantic helper class? I can't see anything similar in the CSS files. The purpose of the .visuallyhidden class is to visually hide it, but make the text available to screenreaders. Is there a different Bootstrappy approach to achieve the same goal?

// HTML5Boilerplate's non-semantic helper class
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}  

The related Bootstrap non-semantic helper classes don't achieve the same effect:

// Some of Twitter Bootstrap's non-semantic helper classes
.hide {
    display: none;
}

.invisible {
    visibility: hidden;
}

Source: (StackOverflow)

Adding a Header to Bootstrap

I’m fairly new to Bootstrap and am having trouble placing a header above the navigation bar. I need to have a header for the current website with at least 70 px in height, at the same time I need to make sure the Responsiveness works when seen through mobile phone. My current code is

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" rel='nofollow' href="#index.html"><img src="img/navigationlogo.png" alt="Home"/></a>

          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active">
                <a rel='nofollow' href="#index.html"><img src="img/Home_Button.png" width="24" height="21" alt="Home"/></a>
              </li>
</ul>
          </div>
        </div>
      </div>
    </div>

What is was think I could do is to add

<header></header>

Above navigation bar and place my logo there.

Can someone please provide me a sample code with css on how I can achieve this ? As I heard that some minimum padding is to be maintained so that the responsive navigation works if seen through a mobile device.


Source: (StackOverflow)

How to use the .clearfix class?

I think I'm misunderstanding the concept of the .clearfix class. Maybe somebody can help me out.

I'm looking for a way to use float and clear without messing up my markup. So I thought, that's where .clearfix can be used for.

Inside of an empty H5BP-project, my markup looks like:

    <div></div>
    <div></div>
    <div class="clearfix"></div>
    <div></div>
    <div></div>
    <div class="clearfix"></div>
    <div></div>
    <div></div>
    <div class="clearfix"></div>

Below the result. I was expecting a tic tac toe-field, though. Can somebody tell me:

  1. How I can achieve my goal and
  2. What the .clearfix class really can be used for?


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)

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 $
(function($){

})(this.jQuery);

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

Stephen


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)