[COMP]: Add layout utilities

[andrewrubin]

Even just a CSS file that gets added — I think it will be useful to have Sass helpers like @include full-absolute(4px) (yes I'm aware of inset 😛 )

[marlonmarcello]

@andrewrubin can you give another example? Something that we definitely use?

[andrewrubin]

No. No, I cannot 😃

Any ideas? I'm happy to just add this specific helper, as needed, on projects.

[marlonmarcello]

All good, let's leave this here and if something pops up we can come back to it.

[andrewrubin]

Some utilities I often find helpful are below. Should these be included in some kind of utility class stylesheet, or would we rather implement that on a per-project basis? These are, admittedly, pretty arbitrary.

Let me know your thoughts @marlonmarcello @rvno @NicholasLancey !

.block {
  display: block;
}

.relative {
  position: relative;
}

.fill {
  width: 100%;
}

.constrain {
  max-width: 100%;
}

.center {
  margin-inline: auto;
}

[NicholasLancey]

I use pretty much all of those helpers frequently. I usually set up text alignment ones too, txt-center, txt-left and txt-right.

I feel it would be best to include these in some kind of utility stylesheet, purely because I see them so often in our codebases I just assume most projects already have them!

[liamegan]

Should we just move to tailwind?

Liam Egan | We The Collective Design Inc.

37 Dunlevy Ave. Vancouver BC V6A 3A3

Phone: +1 (604) 363-6466

www.wethecollective.com

I respectfully acknowledge and am honoured to live, work and play within the ancestral, traditional, and unceded territory of the Coast Salish Peoples, specifically the territory of the xʷməθkʷəy̓əm (Musqueam), Sḵwx̱wú7mesh (Squamish), and Sel̓íl̓witulh (Tsleil-Waututh) Nations.

On Wed, May 1, 2024 at 11:54 AM Nicholas Lancey @.***> wrote:

I use pretty much all of those helpers frequently. I usually set up text alignment ones too, txt-center, txt-left and txt-right.

I feel it would be best to include these in some kind of utility stylesheet, purely because I see them so often in our codebases I just assume most projects already have them!

— Reply to this email directly, view it on GitHub https://github.com/wethegit/component-library/issues/98#issuecomment-2088922151, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEZJ2HPTVDZDXLS2XQDKZTZAE27HAVCNFSM6AAAAABCTSMANSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBYHEZDEMJVGE . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[andrewrubin]

Thanks for your input @NicholasLancey ! I agree, the text alignment ones are nice. Our Text component does have an align prop, but it's nice to be able to set that on a parent instead of on each text node.

Aside: .center { margin-inline: auto; } can be achieved with our existing spacing utility, so we could ditch that one from my "proposal".

[marlonmarcello]

I am not sure if @liamegan was joking but he does have a point. If I remember when doing research for this Tailwind could:

1. prefix classes to avoid clashes
2. restrict which category of utilities were available

We could use tailwind solely for these types of utilities, the ones that don't affect the visual parts of the website. Things like margin, padding, text alignment, display, overflow, etc, these are all just functional.

Should we start an RFC?

[marlonmarcello]

Found it.

Disable classes: https://tailwindcss.com/docs/configuration#core-plugins
Prefix: https://tailwindcss.com/docs/configuration#prefix

[marlonmarcello]

Let's chat some time, now that we've used this for a few projects and have a better understanding of our needs. My initial concern which was having to learn a new framework still holds true but it might have less weight.

[marlonmarcello]

@andrewrubin in out slack chat you mentioned that we should just import the utility css modules and use them directly like so:

// components/my-component/my-component.tsx

import spacing from '@local/styles/spacing.module.scss

function Component {
  return <div className={spacing.margin2} />
}

I think this is a great idea and we should give it a shot. When you get a chance could explore that a bit more?

• try to define a naming standard, prolly camelCase but maybe try others, who knows
• because these will be imported in many places, please check if the bundlers actually just generate a single set of classnames or if they are created for every single instance that this is imported. you can check this by just inspecting the markup in the browser and comparing the classnames