Global Styles Embed Ideas

Client-First
1

One of my most significant issues with Global Styles is that it’s just an embed wrapper with position: absolute set to it. The organization is pretty good, but it could be better. Especially cause I add custom code to my stuff a lot, and want it to show up on all my pages without creating another component. Plus I fear the 10,000 character limit for an embed.

The style guide is divided into specific sections, so what if Global Styles was divided into separate embeds and wrapped into a div called global-styles?

Classes would be organized as:

  • global-styles (div wrapper)
  • global-styles-typography
  • global-styles-spacing
  • global-styles-utility
  • global-styles-script
  • global-styles-custom

The above are just class ideas, what it really would allow, is for us to create whatever global-styles-classes we’d like, and have it all wrapped in div, keeping everything better organized.

1 Like
2

Hey @Keithen! Thank you for your suggestion. I have forwarded this to the team :slight_smile:

3

Hey @Keithen! Touching back on this with you. Have you tried using it this way? Do you have a read-only to a project where you’ve done this?

4

Sorry for the late reply here @Support-Luis! I don’t currently have a read-only this way. But I’m in the middle of developing a project and organizing my CSS in such a way. Once I get it somewhere decent I’ll share it with you!!

However, if I must be honest, the idea does come from some of what Timothy Ricks has done with his Lumos Framework.

5

Thank you @Keithen! I’ll be waiting for that read-only :slight_smile: