Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Open
stefanchrobot opened this issue Dec 12, 2016 · 8 comments
Open

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

stefanchrobot opened this issue Dec 12, 2016 · 8 comments

Comments

@stefanchrobot
Copy link

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
Copy link
Owner

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
Copy link

juh2 commented Jun 17, 2018

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
Copy link
Owner

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

@billiegoose
Copy link

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
Copy link
Owner

@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
Copy link

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
Copy link
Owner

Awesome, that would be much appreciated @wmhilton !

@billiegoose billiegoose mentioned this issue Aug 23, 2018
Open
@SwagDevOps
Copy link

Use sass :

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@billiegoose @juh2 @matejlatin @stefanchrobot @SwagDevOps