A simple set of best practices to get HTML5 projects off on the right foot.

  • By Tim Murtaugh
  • Last update: Jan 4, 2023
  • Comments: 12

HTML5 Reset

HTML5 Reset is a simple set of best practices to get web projects off on the right foot.

Command-line installation:

bower install HTML5-Reset

Some of the features:

  1. A style sheet designed to strip initial styles from browsers, starting your development off with a blank slate.
  2. Easy to customize — remove whatever you don't need, keep what you do.
  3. Google Analytics and jQuery calls
  4. Meta tags ready for population
  5. Empty print and small-screen media queries
  6. Modernizr.js http://www.modernizr.com/ enables HTML5 compatibility with IE (and a dozen other great features)
  7. Prefix-free.js allowing us to only use un-prefixed styles in our CSS
  8. IE-specific classes for simple CSS targeting (if that's your thing)
  9. iPhone/iPad/iTouch icon snippets, plus social/app meta tags for Twitter, Facebook
  10. Lots of other keen details

Get the WordPress theme:

https://github.com/murtaugh/HTML5-Reset-WordPress-Theme

Github

https://github.com/murtaugh/HTML5-Reset

Comments(12)

  • 1

    Make [hidden] more !important

    I was wondering if you'd consider adding the rule

    [hidden] { display: none !important; }

    To your reset as it seems like the people in the WhatWG don't want to make their rule any more specific than [hidden] { display: none; }, so using your awesome reset will result in people having anomalies like:

    <section hidden>I'm still visible!</section>

    as

    /*...*/ section /*...*/ { display: block; }

    will override this. (http://jsfiddle.net/danbeam/MrEjL/2/)

  • 2

    Remove cracy IE6 CSS notation in order to be compatible with LESS

    If you try to include the current reset.css into LESS (in order to combine a bunch of CSS files), you get the error:

    ParseError: Syntax Error on line 113 in /home/simon/HTML5-Reset/_/css/reset.css:113:11

112 /* prevent BG image flicker upon hover */
113 .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
114

    This is because LESS does not understand the cracy IE6 CSS notation.

    Can we drop this filter in favor of LESS and probably other CSS pre-compilers?

  • 3

    google analytics should be placed just before

    To use this on your pages, copy the code snippet below, replacing UA-XXXXX-X with your web property ID. Paste this snippet into your website template page so that it appears before the closing tag.

    http://code.google.com/apis/analytics/docs/tracking/asyncTracking.html

  • 4

    Add package.json with style entry.

    This allows npm-capable css bundlers like sheetify, postcss-import, npm-css, and rework-npm to load the reset stylesheet with @import 'HTML5-Reset'.

    Having a package.json also allows this to be installed with npm. Would appreciate if you could publish it to npm too!

  • 5

    Question: Should HTML5 Reset break into more files?

    Should we break the Reset up into more files? (This would affect CSS the most, I think.)

    A couple of thoughts:

    1. Multiple files are easier to develop with, segregating styles, logic, and markup into discrete files based on their purpose. (For example, I think a legacy.css file would be nice for styles that only affect older browsers.)
    2. Multiple files cause browsers to take longer to render a page, but I think it's safe to assume that most people are either running pre-processors to concatenate their files or they'd be prepared to manually concatenate pre-launch.

    What do you think?

  • 6

    Problem listing tags

    Hi! I have noticed that was a problem with listing tags. Some tags doesn't list any posts and sometimes if I have 2 posts filed under the same tag, only shows 1.

    Can you help me with that? Sorry for my english if I have made any mistake.

    Thanks!

  • 7

    Put jQuery code inside the anonymous "remap jQuery to $" function

    At _/js/functions.js, it uses an anonymous function to have a local $ variable with jQuery. That $ variable only exists inside the anonymous function, so the current way its written doesn't make much sense - the rest of the code should be inside that anonymous function too.

  • 8

    Dynamically-generated site name instead of www-sitename-com

    Hey all, here's a solution I added to make the little

    <head id="www-sitename-com" in header.php a dynamic thing based on the user-entered site title, not just a static thing that would need be to be replaced.

    First, I created a hook in functions.php:

    function html5reset_head_id() {
    do_action('html5reset_head_id');
}

function head_id_slug() {
 $headidslug = get_bloginfo('name');
 $headidslug = ereg_replace("[^A-Za-z]", "", $headidslug);
 $headidslug = strtolower($headidslug);
 echo $headidslug; 
}          
add_action('html5reset_head_id','head_id_slug');

    This removes all non-letter characters, even numbers, and then makes the string all lowercase.

    Then, I just replaced

    <head id="www-sitename-com" data-template-set="html5-reset-wordpress-theme" profile="http://gmpg.org/xfn/11">

    with

    <head id="www-<?php html5reset_head_id(); ?>-com" data-template-set="html5-reset-wordpress-theme" profile="http://gmpg.org/xfn/11">

    So for the site I have with the title Hey It's George, www-heyitsgeorge-com is returned :)

    Let me know if you guys have problems with this, if not maybe it can be added to the Reset.

  • 9

    Missing display: block for main tag

    Internet Explorer up to version 11 doesn't support the main tag and seems to apply display: inline (at least in v11) which isn't quite what you'd expect imho.

  • 10

    Some simple tweaks to improve beginner knowledge

    • Re-ordered some comments
    • Added a note about the meta copyright tag
    • Linked to Apple's page on the apple-touch-icon tags, and added tags as per their guidance
    • Added URLs for the Windows 8, Twitter and FB meta tags
    • Removed the chrome frame code, as it's no longer supported.
  • 11

    IE input button styling

    Hi,

    Currently there is:/* make buttons play nice in IE */ button {width: auto; overflow: visible;}

    But what about input type buttons <input type="button" value="ahsdfhasdfh asdlfjkasdklfj asd"/> ? These buttons suffer the same fate in IE. Shouldn't there be a reset for it too?

    Thanks. D

  • 12

    Update readme.md; Clarification and summarisation

    1. Added a lime before the downloading code for clarification to the user of what it exactly means, in case the user is new to the concept.
    2. Summarized two points (regarding meta tags and meta tags for Twitter and Facebook) have been summarized into one to prevent repetition.
    3. Minor addition for another clarification of getting WordPress

Popular Tag

Related