Variables for shared width across page

[zuckerruebe]

Hi all

I'm writing an input form mask which looks like this:

<grid 1>
<special 1>
<grid 2>
<special 2>

The <> shouldn't be read as HTML tags but rather generic placeholders.

All the <grids> look the same: rows consisting of a label, a number input and a unit label.

The grids are interrupted, however, with <specials>.

I've tried integrating <grids> and <specials> into one grid using subgrid but soon gave up. So I'm stuck with what I have.

I'd like the <grids> to align with each other. That means I have to manually make sure that all their CSS colum widths agree, and keep doing so when refactoring (in addition, it would be nice if I could make this "requirement" explicit). That's something that we as developers are conditioned to dislike, isn't it?

At the same time creating a generic <grid> component with a slot for the rows and a hard-coded column definition feels like overkill and a bit weird.

I realize questions like this have been asked before regarding skeleton and tailwind, but I'd still be interested in what skeleton cracks would do in this concrete example.

I hope I managed to explain sufficiently what I'd like to do: bit of a challenge on my phone.

Thanks!

[endigo9740]

Hey @zuckerruebe, so just to be clear, I'm not immediately sure how this relates to Skeleton. We do provide a section in the upcoming Skeleton v3 documentation covering layouts if this is beneficial:

https://next.skeleton.dev/docs/guides/layouts

The thing to note about this guide is that nothing provided there is Skeleton-specific, we've just implemented HTML + Tailwind utilities for all examples.

As per Grid itself, Tailwind provides a number of guides for implementing both CSS flexbox and grid features, which is our recommendation for layout. You can find information about these in the "Flexbox & Grid" section on the Tailwind docs:

https://v3.tailwindcss.com/docs/flex-basis

These can be a little tricky to learn, so I'm a fan of CSS Trick's guides - but they are lacking some new feature, such as subgrid, if I recall:

• Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

The goal with Skeleton is to extend and build on top of the foundation Tailwind provides, not replace it. And we we're pretty big advocates against abstracting layouts to components. As this breaks from the utility-first approach Tailwind is all about:

https://v3.tailwindcss.com/docs/utility-first

By it's nature, utility classes are your reusable abstraction. Components would be redundant in that case.

But again, this is just our stance, and you are free to do what you wish. But if this is a request for Skeleton to add layout components, that would be highly unlikely. But hope the info above helps.

[zuckerruebe]

Thanks! Definitely not a request. :) Yeah, just seems unnatural to write grid-cols-[20%_20%_60%] eight times, have to rediscover the concept of "they all have to align" every half year I look at the code and make sure to change them all whenever I want to change the layout. But realize this "objection" has been raised many times already.

[endigo9740]

Thanks! Definitely not a request. :)

All good, just want to set expectations here in terms of my response and our level of support around this. To be clear we only provide support for Skeleton issues mostly for the sake of time. That said, I'm happy to leave this thread open for others to chime in.

Yeah, just seems unnatural to write grid-cols-[20%_20%_60%] eight times, have to rediscover the concept of "they all have to align" every half year I look at the code and make sure to change them all whenever I want to change the layout. But realize this "objection" has been raised many times already.

I mean you're always configuring things somewhere, whether it's CSS or components. I will say that a lot of folk, especially when getting started with Tailwind, think they're suddenly banned from using vanilla CSS. That's definitely not the case. Tailwind, CSS, Components, etc - these are all tools, just use the one that works best with your mental model.

[zuckerruebe]

I think my new favourite approach for this now is https://stackoverflow.com/questions/77053984/how-can-i-use-css-variables-to-style-components-in-svelte. There we define a CSS property for the column definitions and scope the property to the component.