Replacing string parameter

[OdedYanovich]

I use Sketch in order to replace code like this:

html.div(
    [
      attribute.style([
        #("display", "grid"),
        #("grid-template", "repeat(5, 1fr) / repeat(2, 1fr)"),
        #("place-items", "center;"),
        #("grid-auto-flow", "column"),
        #("height", "100vh"),
        #("background-color", "black"),
        #("color", "white"),
        #("font-size", "1.6rem"),
        #("padding", "1rem"),
        #("box-sizing", "border-box"),
        #(
          "background",
          "linear-gradient(to left, rgb(255, 0, 0) "
            <> model.hp |> float.round |> int.to_string
            <> "%, rgba(0,0,0,1))",
        ),
      ]), ...

with code like that:

html.div(
    css.class([
      css.display("grid"),
      css.grid_template("repeat(5, 1fr) / repeat(2, 1fr)"),
      css.place_items("center"),
      css.grid_auto_flow("column"),
      css.height(vh(100)),
      css.background_color("black"),
      css.color("white"),
      css.font_size(rem(1.6)),
      css.padding(rem(1.0)),
      css.box_sizing("border-box"),
      css.background(
        "linear-gradient(to left, rgb(255, 0, 0) "
        <> model.hp |> float.round |> int.to_string
        <> "%, rgba(0,0,0,1))",
      ),
    ]),
    [], ...

(If there is another use for the library then I missed it).
I love it for it, but when I compere these code blocks I see the need for more,
What about the other string in the pair?
Why "center" is a string and not an enum variant?
why is "repeat(5, 1fr) / repeat(2, 1fr)" not a pair of functions?
If removing strings is valuable then there is work to be done

[ghivert]

Hi, and thanks for your interest in Sketch.

You're right about certain things: currently in Sketch, most of the utility functions are simple strings, and even complex use cases are simply CSS strings. We have some utilities for some functions, like transform, thanks to some benevolent work on the subject. There is probably some more work to do, like animation, and functions like calc or blur, etc. However, the goal of Sketch has never to be a full CSS-in-Gleam library with 100% of CSS capabilities rewritten. The idea of Sketch to remains lightweight, and to never get in your way, while leveraging your CSS skills. I understand things like "Why css.place_items("center") is a string and not an enum?", but from the dev point of view, it does not bring so much value, and it creates complexity. "center" is used in place_items, in justify_content, in align_items, in text_align, and so on. How should we name them? PlaceItemsCenter, JustifyContentCenter, AlignItemsCenter, and TextAlignCenter? Not only this would make the code highly boring to write because of its verbosity, but once you're used to CSS, it's not really a gain, because it will not prevent you from writing wrong CSS (like using css.justify_content while you're not even in a flex container). So most functions are designed to be used as strings, because of that exact reason.

I know the answer can be quite disappointing, but I encourage everyone to simply build on top of Sketch. Sketch is low-level for that exact reason: it's made to be easy to use, and usable by anyone. If you want to do something like a layout builder, you could define your own types and build your package. Sketch is even open to anyone to modify and to integrate, without dependency on any framework for that purpose.
Maybe what you need is not Sketch, and you want something like Tailwind, and it's perfectly fine. No library can suit everyone, and Sketch is not fighting with Tailwind, with default styling and stuffs. Sketch is dealing with plain, bare CSS, and try to help developers that love CSS as best as possible, without adding boilerplate or too much verbosity.

That being said, I'm still happily accepting pull requests for missing obvious features, like animation. In case you want to be involved and help on the subject, feel free to implement some missing stuff!