search

matejlatin / Gutenberg

A meaningful web typography starter kit.
Other
2.84k stars 159 forks source link

Gutenberg doesn't play nice with other styles/libs #63

Open stefanchrobot opened 7 years ago

stefanchrobot commented 7 years ago

It's tough to use Gutenberg together with other styles/libs, since it's hijacking top-level and generic selectors, i.e. *, html and body.

What do you think about scoping Gutenberg's application to a certain subtree, i.e.:

...
<body>
  <div class="some-stuff">
  </div>
  <div class="gutenberg">
    <!-- Gutenberg's rules apply here -->
  </div>
</body>
...
matejlatin commented 7 years ago

Hey @stefanchrobot I think that's a good idea. This issue has never crossed my mind tbh. I'll keep it in mind for the next release...

juh2 commented 6 years ago

I wonder if it is possible to create a marriage between Bulma and Gutenberg. Bulma does not affect the generic selectors and has a special class "content" for an area where a CMS or whatever inserts html-formatted content with generic selectors only.

matejlatin commented 6 years ago

@juh2 I haven't heard of Bulma... what is it?

billiegoose commented 6 years ago

I really like Gutenberg's look, but am struggling to figure out how I could sneak it into an existing project without it breaking everything is styled globally without a "gutenberg" class.

matejlatin commented 6 years ago

@wmhilton I know what you mean, others mentioned this and I experience it myself. Unfortunately, I don't have much time to work on this. Do you have any ideas how this could be done better?

billiegoose commented 6 years ago

Well, I started by just prepending a .gutenberg class selector to all the styles in src/style/gutenberg.css. Then I deleted the styles applied directly to the top-level body and html.

There's probably a way to do it cleverly using SASS... hold on while I try something... if it works I'll make a PR.

matejlatin commented 6 years ago

Awesome, that would be much appreciated @wmhilton !

SwagDevOps commented 5 years ago

Use sass :

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