New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

YUI3, meet normalize.css #447

Merged
merged 28 commits into from Feb 15, 2013

Conversation

Projects
None yet
7 participants
@tilomitra

tilomitra commented Feb 11, 2013

This pull request brings in normalize.css into YUI3. The thoughts and discussion behind this pull request were discussed on this hangout. Here's an earlier wiki with my thoughts.

Use-cases of CSSReset, CSSBase, and Normalize.css

Currently, people who are using these modules are probably doing one of the following:

  • Using CSSReset to get a clean slate without any styles
  • Using CSSReset and then CSSBase to add some basic styles.

The first use-case is untouched by this pull request. People can keep using CSSReset. However, bringing in Normalize.css means that people don't need to do the CSSReset + CSSBase combo. Normalize.css is a more modern alternative to CSSBase, and contains a superset of the rules that were present in CSSBase.

Why not in the gallery?

Pulling Normalize.css into core allows us to deprecate CSSBase, which is pretty old. Also, all the YUI CSS stuff such as Forms, Tables, Lists, and other stuff depend on normalize.css, so it makes to put something this foundational in the core.

What's in the pull request?

As part of the earlier discussion, this pull request includes a naked normalize.css and a contextual normalize.css that affects HTML elements that are children of an element marked by .yui3-normalized.

There's a Makefile in there that imports normalize.css similar to how it works with Y.Handlebars (just run make all). It assumes that you have cloned the normalize.css repo in the same directory as yui3/. There's also a little NodeJS script that writes normalize-context.css by parsing through normalize.css. Docs and examples attached with some basic example and manual tests.

Todos

  • Change module name to cssnormalize to follow CSS-only module naming convention.
  • Add missing newlines to ends of files.
  • Add copyright and license info to all imported files.
  • Forecast cssbase deprecation.
  • Scope html input[type="button"] in contextual normalize while avoiding Android breakage.
  • Add content to HISTORY.md
@tilomitra

This comment has been minimized.

Show comment
Hide comment
@tilomitra

tilomitra Feb 11, 2013

Forgot to mention that we got OSWG Inbound and Outbound approval for Normalize. I've added the project's license inside this repo. It's my understanding that I'll have to add it here (will submit a commit for that), and on the site. Anywhere else?

tilomitra commented Feb 11, 2013

Forgot to mention that we got OSWG Inbound and Outbound approval for Normalize. I've added the project's license inside this repo. It's my understanding that I'll have to add it here (will submit a commit for that), and on the site. Anywhere else?

@tilomitra

This comment has been minimized.

Show comment
Hide comment
@tilomitra

tilomitra Feb 11, 2013

Would love @msweeney to take a look at this.

tilomitra commented Feb 11, 2013

Would love @msweeney to take a look at this.

@msweeney

This comment has been minimized.

Show comment
Hide comment
@msweeney

msweeney Feb 11, 2013

+1 Looks good to me.

msweeney commented Feb 11, 2013

+1 Looks good to me.

Show outdated Hide outdated src/normalize/Makefile Outdated
Show outdated Hide outdated src/normalize/Makefile Outdated
Show outdated Hide outdated src/normalize/LICENSE.md Outdated
Show outdated Hide outdated src/normalize/Makefile Outdated
Show outdated Hide outdated src/normalize/build.json Outdated
Show outdated Hide outdated src/normalize/README.md Outdated
Show outdated Hide outdated src/normalize/css/normalize.css Outdated
Show outdated Hide outdated src/normalize/docs/component.json Outdated
Show outdated Hide outdated src/normalize/tests/manual/test.html Outdated
@tivac

This comment has been minimized.

Show comment
Hide comment
@tivac

tivac Feb 13, 2013

Does grids depend on reset being loaded? I was pretty sure it did but maybe that's old information.

tivac commented Feb 13, 2013

Does grids depend on reset being loaded? I was pretty sure it did but maybe that's old information.

@davglass

This comment has been minimized.

Show comment
Hide comment
@davglass

davglass Feb 13, 2013

Member

No, grids is stand alone.

Member

davglass commented Feb 13, 2013

No, grids is stand alone.

@ericf

This comment has been minimized.

Show comment
Hide comment
@ericf

ericf Feb 14, 2013

Member

@tilomitra I updated the Pull Request description with the todos list. (A handy thing about this is on the Pull Request list page it shows a summary of the todos.)

Member

ericf commented Feb 14, 2013

@tilomitra I updated the Pull Request description with the todos list. (A handy thing about this is on the Pull Request list page it shows a summary of the todos.)

@tilomitra

This comment has been minimized.

Show comment
Hide comment
@tilomitra

tilomitra Feb 14, 2013

I'm leaving the build files out of this commit. I'll build yui + cssnormalize prior to merging.

tilomitra commented Feb 14, 2013

I'm leaving the build files out of this commit. I'll build yui + cssnormalize prior to merging.

@ericf

This comment has been minimized.

Show comment
Hide comment
@ericf

ericf Feb 14, 2013

Member

@tilomitra We still have the open issue (added it as task) for scoping the html input[type="button"] in the contextual normalize.

According to the code comments, it looks like this is to protect breaking things in Android:

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

Can you create a manual test which reproduces this bug in Android, and then determine if the html is in the selector simply to make it more specific? And if that's the case, then check whether replacing html with .yui3-normalized in that selector also fixes the bug.

Member

ericf commented Feb 14, 2013

@tilomitra We still have the open issue (added it as task) for scoping the html input[type="button"] in the contextual normalize.

According to the code comments, it looks like this is to protect breaking things in Android:

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

Can you create a manual test which reproduces this bug in Android, and then determine if the html is in the selector simply to make it more specific? And if that's the case, then check whether replacing html with .yui3-normalized in that selector also fixes the bug.

@tilomitra

This comment has been minimized.

Show comment
Hide comment
@tilomitra

tilomitra commented Feb 14, 2013

@ericf Will do.

@ericf

This comment has been minimized.

Show comment
Hide comment
@ericf

ericf Feb 14, 2013

Member

We were able to confirm that .yui3-normalized input[type="button"] works correctly in Android and fixes the issue just like html input[type="button"] does.

Member

ericf commented Feb 14, 2013

We were able to confirm that .yui3-normalized input[type="button"] works correctly in Android and fixes the issue just like html input[type="button"] does.

Show outdated Hide outdated src/cssnormalize/css/normalize.css Outdated
@tilomitra

This comment has been minimized.

Show comment
Hide comment
@tilomitra

tilomitra Feb 15, 2013

@ericf Good to merge?

tilomitra commented Feb 15, 2013

@ericf Good to merge?

@tilomitra

This comment has been minimized.

Show comment
Hide comment
@tilomitra

tilomitra Feb 15, 2013

Merging...

tilomitra commented Feb 15, 2013

Merging...

@tilomitra tilomitra merged commit a73bd48 into yui:dev-3.x Feb 15, 2013

@tilomitra tilomitra deleted the tilomitra:normalize branch Feb 16, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment