LiftKit – UI where "everything derives from the golden ratio"(www.chainlift.io)
66 pointsby peter_d_sherman4 hours ago10 comments
  • tom_an hour ago
    Here's a tip: any time you've got before/after screen grabs, don't do this thing where you've got to drag a line to switch between the two, don't have a fade, don't have a sliding transition, or anything like that. Just have it display one, then have a single button that you click to have it immediately display the other. Then when you click the button again, it goes back to displaying the first one again. Click, click, click - and your eyes do all the work for you.

    (Not unrelated: answer from Andrei Herasimchuk at https://www.quora.com/Why-does-Adobe-Photoshop-differentiate...)

    Also: I can't work out which image is which. Taking the first image as an example: we've got MATERIAL-STYLE on the left, and LIFTKIT on the right. But what's the left? Does this mean that when you drag the line to the right, revealing the left image, you're looking at MATERIAL-STYLE? Or does this mean you see MATERIAL-STYLE when you drag the line to the left?

    (This might seem like pointless quibbling, but this thing bills itself as the The UI Framework for Perfectionists.)

    • bobbylarrybobby3 minutes ago
      I agree, the x-axis labels are not helpful! Thankfully, the first example is “buttons with corrected icon spacing”, and the image on the right looks much better than the one on the left (a bigger difference in quality than in the other two examples), which is visible when the slider is on the left.

      Suggestion to devs: put the label “material-style” in the lower left of its image and “liftkit” in the lower right of its image, and cover them appropriately as the slider moves, and then it'll be clear which framework the current image (or portion of it) belongs to.

    • accoilan hour ago
      I've been wondering that myself. The descriptions seem to indicate that fully dragged to the left is liftkit, but my first assumption was that would be fully dragged to the right.
      • reactordev42 minutes ago
        it's bad UX. There's a little tiny arrow on the line's grab indicator showing which "side" you should look at. You can barely see it. Below there's the two labels floated to either side...
        • tom_7 minutes ago
          If you're referring to the <·> thing, you could well be right? I figured that was merely an indication that you could drag the thing sideways!

          (And I'm clearly not the only one that feels this aspect of the site would benefit from another pass...)

  • candiddevmike2 hours ago
    I thought this was an unhinged parody of a design site, kinda surprised it's a real thing. Unfortunately the design isn't for me, things look off center and the overall "weight" of components feels off.
    • danielvaughn42 minutes ago
      I hate to pile on since it's already getting some criticism, but I agree. It's kind of a good example why designers don't purely rely on mathematically consistent designs. Getting things to "look right" often means shifting pixels here and there ever so slightly, so that the math is a bit off but it feels better on the eyes.
    • an hour ago
      undefined
    • cluckindan2 hours ago
      Agreed. I’ve spent considerable time on scale-based design, and 1.618 always feels too large of an interval.
      • carshodeva minute ago
        Yeah I tried using a similar "golden rule" after reading a design article about it. I based my css variable sizes on it but I kept having to use manual px and rem values instead because stuff just never felt correct.
  • nickradford2 hours ago
    I wouldn't trust a UI framework where all of the components are shown as images instead of instances of the actual UI framework...
    • cchance27 minutes ago
      If they showed the actual css, people could just ... copy it, and then how could they charge for the secret golden ratio code lol
    • slillibrian hour ago
      There is that, but I get the impression that you could hire an expert to help.
    • tkzed492 hours ago
      I clicked on Dropdown, thinking it's one of the more complex things to implement. It doesn't even have a picture.
    • digiownan hour ago
      And one that drops frames when I scroll through on Firefox.
    • MomsAVoxell2 hours ago
      Yes, I too felt that way as I began to read, it was an immediate disappointment, kind of, that the UI wasn’t on full display, front and center.

      I wouldn’t trust a framework that requires me to involve myself with JavaScript, nextJS, and React, also… but I am generally of the opinion that a framework pitching itself as a UI kit, must pretty much not be a plugin for a web browser…

  • moonlighter3 hours ago
    I tried to find pricing for it (the top "contact sales" is a no-starter; too much initial friction. Just tell me how much it costs?! At the footer is a pricing calculator... I asked for pricing for 10 top-level pages and 5 sub-level pages (they explain the difference)... came out to a whopping $16,500 (you're reading that right... SIXTEEN THOUSAND). No thanks.
    • khimaros2 hours ago
      this seems to be for custom design services. IANAL but the libraries and design language seems to be open source and free to use.
      • khimaros2 hours ago
        https://github.com/Chainlift/liftkit
        • cchance26 minutes ago
          Next.js without Tailwind ... why not just make it a fuckin tailwind plugin lol
      • lelandfe2 hours ago
        Indeed; if you look at the top nav this is a site that's an agency first and a design system second.

        This design system really deserves its own site.

  • Nekorosu2 hours ago
    There is a great research paper on the topic https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=T...
  • absqueuedan hour ago
    Wow AGPL for CSS ui framework!!
  • helterskelter3 hours ago
    Interesting idea, but I haven't found a compelling reason that phi is inherently superior, aesthetically speaking. Seems more like a marketing spiel.

    That said, it still looks good.

  • moribvndvs40 minutes ago
    Requires nextjs, :(
    • theusus38 minutes ago
      It doesn’t
      • cchance26 minutes ago
        Next.js without Tailwind
  • claytongulick39 minutes ago
    I really wish they would start with "this is for next.js/react".

    I had to dig through the docs and get to the installation instructions just to find out that it's React only.

    It looks great, but I'm always confused why design system folks wouldn't base everything off web components, which work with almost any framework.

  • cush2 hours ago
    While the golden ratio thing is a bit of a gimmick, the components look gorgeous and really well laid out