murtaugh / html5-reset Goto Github PK

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

Instead of loading functions.js via a script tag in footer.php, load it in functions.php via wp_enqueue_script(). This way WP plugins that change scripts, for example, W3 Total Cache, will be able to minify the code.

more robust code

I discovered that

img,
object,
embed {max-width: 100%;}

applied by default on those elements causes more problems than other. Would it be better to associate a class to the feature, like

.responsive {max-width: 100%;}

or maybe force the responsive behaviour on figures?

figure img,
object,
embed {max-width: 100%;}

Everytime i use html5reset i have to fix that. Maybe it's a common issue. Expecially when I have to face with full page backgrounds that setting causes strange views.

Shouldn't take more than a minute!

i mostly live in google plus...

http://moz.com/blog/meta-data-templates-123

Your brand new WordPress Theme HTML5-Reset looks fantastic in all aspects but one: localisation.

Everyone is so hypered up about HTML5 and CSS3 and people come with whole new sets of tools, tips and tricks, but the basics are once again simply ignored.

Localisation would make the WordPress HTML5-Reset theme a true gem for the entire world to be admired!

I use the keyboard a lot when browsing sites and many of them use outline:none, probably without realising, which makes it impossible to know which element is currently focused. I also see many designers/developers using CSS resets and not reading the comments to replace outline:none with something else. I propose that outline:none and outline:0 should be removed and maybe a comment could be in place explaining how you can replace the outline with something else.

More info: http://outlinenone.com/

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!

i'm seeing content: "020"; when it should be content: "\0020";

otherwise, everything else looks great!

congrats on shipping 2.0, tim! :)

img,
object,
embed {max-width: 100%;}

causing problems with Google Maps Zoom controls.

Code: demo @ codepen.io

May as well use the code that is part of H5BP for these bits of JavaScript:

https://github.com/paulirish/html5-boilerplate/blob/master/index.html

IE8 & 9 are set to 'Display intranet sites in compatibility view'... they will drop into IE7 standards mode if you put the conditional comments where you've got them.

(Sorry I haven't had a chance to test in IE10 or 11)

This is also raised as an issue here.

Move them to the body tag and IE will respect the 'Edge mode' request again... and all still appears to work fine.

Several other possible solutions are discussed here - the 'pre-emptive conditional comment' method is quite neat I think

Using the HTML5-Reset code together with browser form validation in chrome 12: the popup bubles are no longer readable because they are transparent.

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?

The links in the comments of style.css which should point to more info about the new font stack and the info about using your own font don't work.

The CSS contains the following bit of code:

input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}

The bit with *vertical-align is not quite valid CSS. When using this CSS in Visual Studio 2010 (with SP1 and the "Web Standards Update" extension for CSS3 support) VS will have one warning, complaining about that particular line of code. This also prevents you from using the "Format Document" feature. The warning is:

Unexpected character sequence. Expected a property name for the "<property> : <value>" declaration.

As the piece of CSS in question is presumably for IE7 support (right?), the above snippet could perhaps be changed to:

input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}

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.

iphone, android and so...

also firefox os...

It would be great to add that

"assets" does the same thing as "" and has the added benefit of describing the contents. You'll also see "static" used as well. I'd be afraid of passing along a build kit with "" in there without first explaining what was going on. "_assets" or "static" are a lot clearer and would save me from having to write an email or get on a call to explain "".

Google is going to retire the plugin at some point:

http://blog.chromium.org/2013/06/retiring-chrome-frame.html

The current download is missing "http:" in the script src attribute.

script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"

since you are already using google's CDN for adding jQuery to it, you could use this link to stay up to date

• http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

There is an error in index.html on line 113 (including google's jQuery)

Needs an 'http:'

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.

which types of code it is i don't understand anything ...
add some description that s why easily any body can understand the project and also upload this in a formate .make clean code.

Hi,
First off, thank you for sharing your reset with us - it makes a nice counter-point to HTML5Boilerplate and is very helpful in developing my own. I'm just wondering why you have specified an id attribute on the head element? I haven't found any mention of this elsewhere (or my google-fu has failed me). Also, what are the use cases for a data-* attribute on head? Thanks for your time.
/Eoin/

The viewport meta tag in the index.html file is throwing errors in Chrome.
This is due to the use of semicolons instead of comas in the content parameter.
issue commented on: http://stackoverflow.com/questions/5555125/viewport-tag-syntax
might be wrong syntax, but it fixes the problems in chrome while still working on iOS.

1. Move posts loop to loop.php. This way the loop could easily be reusable for several templates via the get_template_part( 'loop') function.
2. Surround loop in a tag. Possibly section, or div.

The latest tagged version is still tagged to commits from February. A new tag would make installation easier for bower users who want the latest commits.

This is due to incorrect use of function_exists (http://php.net/manual/en/function.function-exists.php) and php tries to treat core_mods is an variable not a string.

changing line 14 from:

if ( !function_exists(core_mods) )

to

if ( !function_exists('core_mods') )

fixes it

In your declarations after "Let's default this puppy out" you have mentioned the tag "menu" twice ("[...] hgroup, menu, nav, section, menu, time, [...]").
Also you may use "body div" instead of only "div", see http://github.com/paulirish/html5-boilerplate/issues/374 .

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
    padding: 0;
}

http://www.karlrixon.co.uk/articles/css/remove-button-focus-outline-using-css/

Switch

<!--[if (gt IE 9)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->

To

<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->

Does the same thing (see H5BP - https://github.com/paulirish/html5-boilerplate/issues/425)

Why the bullet points can not be turned on for any class?
My class has
list-style-type: disc;
and see it there on "Inspect Element" or in FireBug but it is not rendered.

Hello,
I've noticed that the widgets disappears from my admin panel whenever i activate HTML5-Reset theme, am i doing anything wrong?

Hey guys!
I've noticed that you are using a generic ie class up to ie9 on your html tag.

I worked on a project lately and discovered that ie9 actually doesn't share lot's of issues as ie6-8 (6-7 mostly). Also, I found myself using this ie6-8 generic class only for css degradation (no border-radius or shadows) and specific classes for version related fixes, which didn't include ie9 since it rendered most of the code just fine.

Thanks!

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

There are a couple of places 2011 is still in use within index.html:

• <meta name="Copyright" content="Copyright Your Name Here 2012. All Rights Reserved.">
• <footer><p><small>&copy; Copyright Your Name Here 2012. All Rights Reserved.</small></p></footer>

Hi there,

at the end of line 126, there's what seems to be a superfluous ";}" which breaks the css or at least the font declaration for body in line 127.