Normalizing CSS presets, Global Stylesheets, Variable Fonts, etc

[JasonRX]

Hello friends. Still familiarizing myself with WP, FSE, Blocks, and Cwicly… to that end, a few Global CSS questions:

1. Is it possible to edit Cwicly’s default ‘Normalize’ presets directly? Or perhaps a way to disable them and roll my own?

2. For example… what would be the best practice in Cwicly for adding a custom font-size directly to the HTML tag?

…I like to use the 62.5% trick for managing font sizes.

3. I want to use Roboto Flex (a variable font face), which accepts any font-weight from 100 to 1000… But Cwicly’s UI does not allow for uncommon font-weight settings (e.g. a manual entry of 550 always resets to 500 in the Cwicly block settings panel).

I’m guessing all three issues could be solved by adding a new Global stylesheet… but Cwicly already loads a bunch of stylesheets. And rather than loading even more new code to overwrite Cwicly’s defaults, I’d prefer to adjust the defaults from the start.

BTW… Do we have a comprehensive list of all the Cwicly CSS defaults?

What’s the smartest (most performant) way to tackle this stuff?

Thanks.

[Marius]

Hey there @JasonRX.

@JasonRX

Is it possible to edit Cwicly’s default ‘Normalize’ presets directly? Or perhaps a way to disable them and roll my own?

That just came up recently, feel free to vote for it and/or add your thoughts directly there:

Provide a way to use our own Normalizer

Hey, as I’m diving deeper in how Cwicly works, I am happy to see that we have full control over how Styles are handled, and the minimal impact Cwicly (and the Cwicly theme) have over base styles. However, in the pursuit of creating a workflow where I have full control even over user agent styles, with an easy to modify custom-properties stylesheet, I came across the issue where I can’t dequeue the base.css or CCnorm normalizer stylesheet because it’s used as a dependency for many other styleshe…

@JasonRX

I want to use Roboto Flex (a variable font face), which accepts any font-weight from 100 to 1000… But Cwicly’s UI does not allow for uncommon font-weight settings (e.g. a manual entry of 550 always resets to 500 in the Cwicly block settings panel).

The custom font/icon area will receive an update in the future, make sure to vote for that particular feature as well:

Variable Fonts

So I think it’s good that you use .woff2 for custom fonts. However, it is a bit cumbersome if you want to use many different variants of one or even more fonts. Here it would be helpful if you could use variable fonts. More info here: https://fonts.google.com/knowledge/…

@JasonRX

BTW… Do we have a comprehensive list of all the Cwicly CSS defaults?

Maybe this can hint you a bit:

CSS Reset

Yeah, the path should be /wp-content/plugins/cwicly/assets/css/base.css It’s actually just the following: /* NORMALISE */ *, ::after, ::before { box-sizing:border-box } body { margin:0 } a { text-decoration:none; color:inherit; cursor:pointer; transition:inherit } button { border-width: 0; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; padding: 0; cursor:pointer; background:initial } figure { margin:0 } input::-moz-foc…

@JasonRX

For example… what would be the best practice in Cwicly for adding a custom font-size directly to the HTML tag?

Since the global typography settings will get added to the body, you’d need to add that manually, for example via global stylesheet inside the editor.

Hope that helps.
Welcome to the community

[JasonRX]

@Marius Brilliant reply. Thank you. Great to know Cwicly is adopting such a developer-friendly tool (and attracting a user base to match). I’ll follow up in the threads you mentioned.