HTML5 Boilerplate vs HTML5 Reset

Hello to all; HTML5 Boilerplate and HTML5 Reset are two HTML, CSS, and JavaScript templates with many modern best practices. Their goals are basically the same:

  • Fast, reliable, modern web development.
  • HTML5 (duh!)
  • Browser compatibility (including support for IE6 browsers and mobile browsers)
  • Progressive improvement and graceful degradation.
  • Performance optimization
  • Not a framework, but a starting point for your next project.

Obviously, they are very similar in function. How are their implementations different (for example, perhaps certain CSS CSS fixes are achieved using different methods)? Are they completely different? It looks like the HTML5 Boilerplate is a bit larger (build tools, server configuration, etc.), but it's hard to see where it goes beyond the HTML5 Reset when it comes to the actual site that people will see.

+54
javascript html css html5 boilerplate
Apr 19 '11 at 16:13
source share
4 answers

In general, both projects provide a solid starting point for developers working on web projects. They both get rid of a lot of tedious, some, some kind of erroneous template that many developers can recreate for each project. The details of how they go about this are slightly different, but for the most part they achieve the same results.

HTML5Boilerplate, as you noted, has been added to some build-script parts to help developers follow best practices to speed up their pages in terms of server elements such as long-future expires headers, etc. because the HTML5Reset project is more focused on semantics, content, and style. For example, HTML5Reset has a more sample structure for the content of a page in HTML5 (to show people how to use some of the new elements), while HTML5Boilerplate does not.

The parts of the response time and page speed that HTML5Boilerplate uses are becoming more and more important as more and more users are on mobile platforms, and as Google increases the effect of page response time on the page ranking . There are many documents that show a slight increase in page response time, which has a noticeable negative effect on how your site is used and perceived ( especially in eCommerce setup ... often a 100 ms slower page will receive a percentage of less sold items).

On the CSS front, most of the reset style sections for both projects are very much the same, with some slight differences in the baseline settings. However, certain IE fixes mostly coincide with the HTML5Boilerplate, which claims a bit more control than HTML5Reset over how IE styles some elements, such as form elements (e.g. checkbox / radio buttons and valid / invalid states)

The two main areas of CSS that HTML5Boilerplate covers are that HTML5Reset is not a public helper class to help make sites more accessible, such as .hidden and .visuallyhidden , as well as some significant print style adjustments that both make printing more similar in browsers. , as well as some economical and affordable things, for example, to make transparent background images (so as not to waste toner), and also add the actual URL to the links and the title for abbreviations.

I would strongly suggest reading information about all the projects and how they do things side by side, because the similarities, as well as the differences (and the arguments behind them) are very informative and helped me better decide which parts of each I wanted use.

Ultimately, like any β€œlibrary” project, you, as a developer, should understand what you are doing, and probably need to customize your baseline to meet the specific needs of the project.

+47
Apr 19 '11 at 16:30
source share

I work in an environment where previous developers tied the company to using JQuery and Prototype ... and this is a mess. We must not only work in compatibility mode, but also think about the additional overhead that it causes. When debugging, Prototype "captures" debugging messages in Firebug, which leads to even greater work. And the crazy part is that I canceled this mess for several months, and I'm just starting to get closer to being connected to it ... and when I am going to pull the cork out on Prototype, I always seem to have a section that relies on him ...

For this reason, I argue every time with combinations of frameworks that have similar goals. For example, no matter how cool you think of YUI Grids , if you download the entire YUI Framework you better not do JQuery, Moo, or Prototype. You just need to get bogged down. It kills loading times ( destroys the user interface ) and simply gives developers headaches and unnecessary work.

Look at this phase of your site as building a foundation. You have the opportunity to use everything you want to use, but you must be careful not to "draw yourself into a corner," so to speak. Thus, use targeted and best-in-class tools available based on your resources. Don't just use something to be cute! We are fortunate that many very high-quality tools are free, so we have a choice. But know that you are directing your site to the future, and you can be a person like me who must deal with the consequences if your decisions are made hastily.

So, if you are NEVER going to use a different framework, I support Reset ... or even just fulfilling quality standards compatible with high quality.

0
Apr 19 2018-11-11T00:
source share

You can use one of ...

Like @murtaugh (http://5by5.tv/bigwebshow/45), you don’t need to know anything when you start with Reset first. In my experience, while working in the R&D department, when you need to demonstrate or perform fast iterations, you can use Reset (or Boiler if u already know this). When I need to build a product for deployment, I go to the boiler only because it has more things. It works for me, but now because I know that I can easily use any of them.

0
Apr 19 '11 at 17:15
source share

Actually, I almost want to say that using traditional reset.css is the best ... I have no compatibility issues in mobile applications. However, I am developing these applications using the jQuery mobile platform.

Therefore, I think it’s really conditional what tools you use. Phonegap has no problem compiling my code into all OSs. And looking at my source code in emulators looks great ...

That way, I really don't see the point in the template unless you are trying to get polynes.

0
Dec 29 '11 at 7:51
source share



All Articles