WIP: locally scope CSS to '.gutenberg' class

[billiegoose]

An effort to address #63

This is still a WORK IN PROGRESS but I thought I'd share where I'm at in case a) I never finish or b) somebody has a suggestion.

Right now, everything is locally scoped except some stray 'html' and 'body' references. I'm comparing the output with the example and eyeballing it to make sure it matches. Right now, I can detect one flaw, and that's the h1 font-size is off (45px instead of 40px).

One potential issue is the 'rem' usage. Since rem depends on the font-size on the html element, and since setting the font-size on the html element affects the entire page, it could conflict with the CSS of existing sites. So I've added an option to disable the 'rem' output and only use the pixels.

I'd like to go further, and empower users of CSS-in-JS frameworks to apply the styles from individual modules (say, _quote.scss) to their own components, rather than hard coding the CSS to the <blockquote> element. However, I'm not sure what the best way to do that is yet.

I'm building a WYSIWYG editor using Slate by the way. I wanted it to look nice, which is how I stumbled across Gutenberg.

[billiegoose]

@matejlatin I discovered a race condition in the JavaScript code. If the images haven't fully loaded before the resize code runs, it can end up setting their height to 0 which is not good, because then the image isn't visible.

@matejlatin Would you prefer one big PR or 3-4 small PRs? I can separate my changes into bug-fixes vs enhancements if that would make your job easier reviewing them.

[matejlatin]

I can separate my changes into bug-fixes vs enhancements if that would make your job easier reviewing them.

@wmhilton that would be really helpful thanks. In terms of sizes of PRs, I don't have a preference. Whatever is easier for you.

[matejlatin]

@wmhilton let me know when you're done and I'll review the PR in detail.

[billiegoose]

I'll never get around to finishing this PR... the project I was using Gutenberg for at work switched to a different style and Gutenberg wasn't being used anymore so I had to work on other things. Sorry. :-(

[SwagDevOps]

Use sass :

.gutenberg {
  @import "~gutenberg-web-type/src/style/gutenberg";
}