Hacker News Reader

Comment by manjalyc | Hacker News Reader

Longtime user of bootstrap & tailwindcss for pet projects. I've looked at the 'What Problem Does This Solve', but I'm not sure where Shoelace could fit into my workflow.

Bootstrap is great for when I just want to quickly prototype and build a decent looking interface, but it feels confined when I start wanting to style things myself. When designing MPAs I typically use Bootstrap.

Tailwindcss is great for styling anything and everything, but I find sometimes I waste too much time styling little things that other CSS frameworks already have nice defaults for (and I am a terrible designer so this compounds my dificulties). I often use tailwind for SPAs.

Forgive me if my question is a little naive, but where could I fit Shoelace in for pet projects? Do you see it as being a suitable replacement for one of these usecases? Complementing them? Does it lie somewhere in the middle?

View on HN

Shoelace is more akin to Bootstrap. You can use it for quickly tinkering, prototyping, or as a foundation for your own design system.

One thing Shoelace doesn't provide right now is a set of base styles. I've considered offering these as an opt-in CSS class or a <sl-prose> component, but I'm not sure it belongs tightly coupled with the library.

On one hand, it makes sense to provide a single "theme" that styles both components AND the underlying website/app. On the other hand, this will make themes very opinionated and potentially overbearing. I still need to think about this more.

In the meantime, you can use something like Tailwind's typography plugin [1] to handle base styles and use Shoelace in lieu of Bootstrap. IMO Shoelace + Tailwind is a great combination for those who prefer utility classes.

1. https://github.com/tailwindcss/typography

What would be the convention for using tailwind to style components in general?

You can use Tailwind classes on all your markup as you normally would. In terms of Shoelace components, they're more limited to layout, spacing, flexbox, grid, etc. for arranging and positioning (e.g. don't expect class="btn btn-blue" to turn a Shoelace button into a Tailwind button — although you can use them alongside each other if you want).

To style the internals of a Shoelace component, you can target it in a stylesheet using CSS custom properties or CSS parts as described in the docs. [1]

1. https://shoelace.style/getting-started/customizing

Sounds great! I'll have try it out in my next pet project.

I think Shoelace would be roughly equivalent to if Bootstrap offered web-component versions of their components, so instead of

    <button class="btn btn-outline-secondary">...</button>

would be like:

    <bs-button outline color="secondary">...</bs-button>

While this doesn't sound all that useful, I think this would be very handy for the interactive components like popovers, tooltips, carousels that need a lot of tag soup and javascript:

    <bs-popover>
      Hello World
    </bs-popover>

Reply on news.ycombinator.com