What are your thoughts on Skeleton(Svelte)?

Comments

• snowe@programming.dev ⁨9⁩ ⁨months⁩ ago

  Could someone explain tailwind and skeleton for me? I’ve heard of tailwind but haven’t ever looked into it

  source

  • Hexarei@programming.dev ⁨9⁩ ⁨months⁩ ago

    Tailwind is an unrelated project, that’s just used by this one.

    Basically, TailwindCSS is a combination of two things:

    1. A huge set of “utility” CSS classes that apply consistent, basic styles, with tons of handy conventions for stuff like colors, shadows, border-radii, spacing - and it even lets you target them to hover state, active state, disabled state, users with prefers-color-scheme set to dark, etc.
    2. A JIT-compiled system of creating one-off CSS by just writing the name of a not-yet-existent utility class.

    The main benefits, I find, are mostly:

    • Keeping your style controls directly present in the HTML, without needing to remember conventions or arbitrary “semantic” names for things.
    • Consistency in convention. Need a color? There’s a set (configurable) list of them. text-green-500 and you suddenly have green text with a middle-of-the-road luminosity. Need spacing? Use one of the padding or margin utilities, and you’ll have consistent spacing based on a convention. py-4 and you know you get “level 4” padding without having to care what the exact pixel amount is. But! You know it’s the same as everywhere else you’ve done py-4. No need to go fiddle with a stylesheet.

    Tailwind focuses on coupling your styling to your HTML by using tiny, focused, glanceable utility classes (<div></div>) rather than by needing to create a ton of potentially-confusing “semantic” classes^[1]^ (<div></div>).

    There are tons of classes in it, and I’ve found it to be super useful. Want to center something, horizontally and vertically? Here’s how in Tailwind:

    <div>
        <div>I'm centered!</div>
    </div>
    

    And if you need a one-off specific setup - something like display: grid; grid-template-columns: 30px 1fr 1fr 20px, you can do it with the JIT as such: `

    source

    • snowe@programming.dev ⁨9⁩ ⁨months⁩ ago

      Thanks for the explanation. Looks like there was a lemmy issue with that classes but I think I get it.

      source
    • ahto@feddit.de ⁨9⁩ ⁨months⁩ ago

      FYI lemmy ate all the classes on your divs.

      source

      • -> View More Comments
• Hazzard@lemm.ee ⁨10⁩ ⁨months⁩ ago

  Having used tailwind a little bit, I have nothing but praise for it. Effortless copy/pasting of components with confidence, really nice look by default, easy tweaking, absolutely no management or planning required to organize your CSS, and it’s all right there, directly on your html, never anywhere you have to hunt for it. Feels very freeing to just… not think about CSS at all.

  And the “clutter” really is fine, modern IDEs with good syntax highlighting, plus a tailwind extension to help complete the class names and clean up accidental duplicates or conflicting properties, and you’re good.

  source

  • Hexarei@programming.dev ⁨9⁩ ⁨months⁩ ago

    and the “clutter” really is fine

    Yeah, even then - I’ve seen at least a few IDEs offer extensions that hide the contents of the class attribute until you hover it. So if you’re the sort who finds it visually distracting, it’s fairly easy to overcome.

    source
  • MashedTech@lemmy.world ⁨9⁩ ⁨months⁩ ago

    You and with plugins to sort the classes order it’s so much easier to read and debug.

    source