How to customize Gutenberg?

[ricardozea]

Ok, I have Gutenberg working now :+1:

How do I customize it? The documentation is extensive in explaining how it's built (which is great), but it doesn't dive much into the customization part. A designer like me wants to implement and then tweak to fit my design :)

For example, I want to modify the Modular Scale values. Before implementing Gutenberg I was using straight up Modular Scale Sass plugin and this was the scale I was using: http://www.modularscale.com/?1,1280,1&em&1.618&sass&table

So in the _modular-scale.scss partial, I have the scale values:

$ms-base: 1em,1280em,1em;
$ms-ratio: 1.618;

But since I wanted to try out Gutenberg because it also uses Modular Scale, I thought that maybe I could combine both concepts in some way.

Makes sense? :p

Thanks.

[matejlatin]

Hey @ricardozea are you looking to customise it through font sizes only?

The current sizes in Gutenberg are based on modular scale: perfect fifth and yes I do plan to make it easier to switch different scales easily in the future. The problem is this could be quite tricky to implement.

For now, you should change the sizes in the _gutenberg-config file. There's a special section for headings sizes, line-heights and margins and two variables for mobile body text and desktop body text sizes respectively. But you should, at the moment, copy the ratios from modularscale.com (sorry about that but I really have to figure out a good way of implementing different modular scales)

The tricky part is, you'll probably need different ratios depending on the scale to get the desired effect.

[ricardozea]

Hey @matejlatin, I see the sections you mention.

Yes, for now my intentions are more around using my scale since I understand the concepts behind Modular Scale, that way, if in the future I want to keep some of the same ratios but change another, I know the starting point the new scale comes from.

I'm planning to use both for now, Gutenberg and Modular Scale with my custom ratios. Is this something you think it's worth doing? Or is just better to use one or the other? (at least for now).

[matejlatin]

Hey @ricardozea if you find a way to use both I'd definitely go this way. Also, let me know if you come up with a good idea of how to incorporate modular scale in Gutenberg so it provides further flexibility.

[ricardozea]

@matejlatin at this point I'm importing all Gutenberg's and Modular Scale's partials, so my main SCSS file looks like this:

@import
    "gutenberg/gutenberg-reset",
    "gutenberg/gutenberg-config",
    "gutenberg/gutenberg-mixins",
    "gutenberg/gutenberg-typography",
    "gutenberg/gutenberg-style",
    "modular-scale",
    "bg-colors",
    "mixins";

Not sure if this is ideal or not but so far everything is working fine.

I only use MS for font sizes and my idea is to let Gutengberg (GTB) handle my line height. The thing is that since I'm using different ratios than the ones GTB have, then I may not be taking full advantage of GTB framework.

I don't know if this is the case, but it's what I think I can understand, I may very well be missing other stuff :p

Also, I'm not a Sass guru by any means, the level of complexity of how MS and GTB are built is way beyond my comprehension. What I do know is that for every project I create a different MS, so I always go the MS site, create my scale and add it to my _modular-scale.scss partial.

I would like GTB to somehow detect that I'm using a particular MS and "adapt" the line height accordingly.

Then again, I don't know if what I'm saying makes any sense or not because I don't understand how MS and GTB are built >_<

For now, everything works for me.

[matejlatin]

Hey @ricardozea I'm really glad you got it working for you.

Yes, that's exaclty how I envisioned integrating modular scale into Gutenberg. You can see in the config file that there's a section dedicated to modular scale but it does nothing at the moment.