LiftKit – UI where "everything derives from the golden ratio"

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.)

Hi everyone, I'm the creator of LiftKit. This project is EXTREMELY early and, as everyone has pointed out, not ready for production use. It's a solo project I work on in my free time. I'm a self-taught, so a lot of the weird choices you're seeing can be attributed to the decisions of someone who had never built something like this before.

LIFTKIT IS FREE AND OPEN SOURCE. The website's just out of date.

https://github.com/Chainlift/liftkit

Most of the feedback folks are providing here was raised about 6 months ago on Reddit and is actively being worked on. You can check it out here: https://www.reddit.com/r/webdev/comments/1m41arx/i_spent_18_...

KNOWN ISSUES INCLUDE: - Docs are a nightmare, screenshots are ridiculous instead of real components - Components are inaccessible spaghetti

CURRENT PRIORITIES: - Rebuilding with radix primitives - Improving docs

TO LEARN MORE: - This youtube video explains the gist of the system (though it's also a little outdated) https://www.youtube.com/watch?v=r1DANFZYJDw

I'll reply to folks as best I can.

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.

I wouldn't trust a UI framework where all of the components are shown as images instead of instances of the actual UI framework...

Pepsi would love it. https://www.goldennumber.net/wp-content/uploads/pepsi-arnell...

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.

There is a great research paper on the topic https://pmc.ncbi.nlm.nih.gov/articles/PMC10792139/#:~:text=T...

The creator of this is a friend of mine and just gonna chime in that he’s a fantastic and talented dude. Nice surprise to see his project listed here! I think he’s working on something new called Liftkit Studio too I’m looking forward to.

He has a cool YouTube channel too. Check out “The Secret Science of Perfect Spacing”

https://youtu.be/9ElrcTtAxzA?si=kbAzQDGQSCCqymTO

Party on

Wow AGPL for CSS ui framework!!

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.

Requires nextjs, :(

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.

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