Use normalize.css as a basis for a new and improved html-reset.css

Is this a duplicate of #1295296: Add HTML5 display definitions from D8 and normalize.css ? Not marking as dupe yet, but asking... is there anything else Zen doesn't already cover beyond what we added here? As I posted, "and perhaps other smart stuff", noting normalize.css and html5boilerplate using it. I also am delighted with Drupal devs on the same page with the dev community at large.

I was thinking similarly when I proposed the referenced issue, as I do really like normalize.css and how html5boilerplate adapted it. As I compared, it seemed the HTML5 display definitions were the significant part lacking in zen, and like you, proposed it without a patch to see how John wanted to integrate it. It just flowed into what D8 had done. Let’s see what John thinks.

I like it!

Let's do this now!

wicked, glad to see this happening.

I converted normalize to SCSS over in https://github.com/JohnAlbin/normalize.css if anyone wants to use that as a basis for a patch.

On second though, I just went and added normalize.scss to zen/STARTERKIT/sass/. I haven't linked it in via the .info file and it still needs to be merged with html-elements.scss. But that should make the patch easier to make.

I've postponed #1440910: Change font styling technique from "em"s to "rem"s and #1439712: Add default variables for use in sass files until this issue is complete.

I now have a "drupalized" normalize over at https://github.com/JohnAlbin/normalize.css/tree/drupal-normalize

Updated Zen to use that.

I suggest we remove the star hacks in this file for targetting ie6-7 with:

example:

before

legend {
  border: 0; // 1
  padding: 0;
  white-space: normal; // 2
  *margin-left: -7px; // 3  // LTR
}

after:

legend {
  border: 0; // 1
  padding: 0;
  white-space: normal; // 2
  .ie6-7 & { margin-left: -7px; } // 3  // LTR
}

output:

legend {
  border: 0; 
  padding: 0;
  white-space: normal;
}

.ie6-7 legend { 
  margin-left: -7px;
}

Another step towards using normalize.css, this further readies normalize.scss replacing hacks with ie conditional classes. @KrisBulman, thanks for the nudge, as I was already working on this. The patch caught one trailing whitespace also.

I completed porting normalize to Compass over at https://github.com/JohnAlbin/normalize.css-with-sass-or-compass

And then completed porting it to Drupal over at http://drupal.org/project/normalize

Elly, I committed your patch to a feature branch, 1372040-normalize. I need to think about that one. It bumps up the specificity on html elements in IE.

Now I just need to merge html-elements into normalize on the plane. Leaving for Drupalcon in an hour.

Elly, I committed your patch to a feature branch, 1372040-normalize. I need to think about that one. It bumps up the specificity on html elements in IE.

In the end, I decided to keep the star hacks because it is what is in the Normalize with Compass project. It will make maintenance a little easier. As well as keep the specificity lower.

I've finished merging in all the html-elements stuff into normalize.

Fixed. http://drupalcode.org/project/zen.git/commitdiff/6451c0a

I should note that our normalize doesn't contain empty rulesets for every HTML5 element like our old html-elements did. That decision follows along with what the standard normailze does. Though, I made an exception to have empty rulesets for links since the ordering of the link pseudo-selectors is important.