legos - Layout and style that's easy to refactor, all without thinking about CSS.

[finite depot]

I love elm-ui, it helped me get into frontend dev and let me finally learn HTML.

legos is an implementation of elm-ui in Gleam/Lustre with a few changes:

• the core module (Element in Elm UI) is renamed to ui
• I've added a color module with all the tailwind colors

https://github.com/NduatiK/legos
https://hex.pm/packages/legos

---

Why you should care:

• The elm-ui mental model is simple enough that you can build UIs without opening your browser
  • You get to think in rows and columns (no flexbox)
  • You get to reposition items with align_{left,right,top,bottom}, center_x and center_y.
• Styles are all typed
• Escape hatches to use plain Lustre with ui.html and ui.html_attr

It looks something like this:

import legos/background
import legos/border
import legos/color
import legos/ui
import legos/font
import lustre

pub fn main() {
  let app =
    lustre.element(ui.layout(
      [
        ui.height(ui.fill()),
        ui.width(ui.fill()),
        ui.scrollbars(),
        font.family([font.typeface("Inter"), font.sans_serif()]),
        background.color(color.gray_50()),
        font.color(color.gray_800()),
      ],
      my_row_of_stuff(),
    ))
  let assert Ok(_) = lustre.start(app, "#app", Nil)

  Nil
}

pub fn my_row_of_stuff() -> ui.Element(_) {
  ui.row([
      ui.width(ui.fill()),
      ui.center_y(),
      ui.spacing(30)
  ], 
  [
    my_element(),
    my_element(),
    ui.el([ui.align_right()], my_element()),
  ])
}

pub fn my_element() -> ui.Element(_) {
  ui.el(
    [
      background.color(color.blue_500()),
      font.color(color.white()),
      border.rounded(3),
      ui.padding(30),
    ],
    ui.text("stylish!"),
  )
}

[strange fox]

i saw this on the package site the other day, waiting for someone to post it ^.^

super cool

[sonic jetty]

I was looking and it is very interesting! Just a suggestion, couldn't some (or all) of the zero argument functions just be constants? For example, ui.fill could be pub const fill = model.Length(1). Also, I believe (could be wrong) that if you imported lustre/element.Element instead of lustre/vdom/vnode then, in the docs, Lustre's Element would appear as element.Element instead of @internal Element

[sonic jetty]

Also, I believe this doesn't work that well with lustre_ssg, as (for me) aligning isn't working

[finite depot]

Thanks @sonic jetty, I'll look into the documentation issue (@internal Element) and the lustre_ssg issue.

I'm not 100% sure on using constants vs functions, I currently like the consistency of all attributes being functions, but I'll definitely think about it.

[finite depot]

v1.4.0 fixes the lustre_ssg issue (there was some html escaping going on for ssg).

The@internal Element is referencing legos' model.Element which is internal. That can't be fixed.

[strange fox]

What was the issue in ssg?