48 comments

[ 4.1 ms ] story [ 59.3 ms ] thread
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.

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.
While the golden ratio thing is a bit of a gimmick, the components look gorgeous and really well laid out
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...
Wow AGPL for CSS ui framework!!
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.)

I turned this into a game. Which image do I think looks better? Now I try to figure out which image is supposedly supposed to look better.
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.

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.

opticalCorrection is genius. That small change makes the layout feel so intentional, polished, and complete - not text stuffed into a card, but the card itself is one cohesive component
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

>In LiftKit, everything derives from the golden ratio,

I don't think the authors realise the extent to which their product, which looks well made and useful, is being completely undermined with this nonsensical pseudoscience.

Things I look for in a UI library:

1. Clean, expressive interface, 2. Extensive documentation.

That being said, good on you for shipping! I would like to try it just for the mystery factor.

When we designed Chrome, since minimalism was our thing and screens used to be small, A LOT of time was spent on the total vertical space - thin titlebar, slightly bigger tabstrip, and a large toolbar. Lots of discussion, lots of questions

Telling people the height ratios between them followed the golden ratio was a very convenient way to shortcut the bikeshedding and get to "aha, very nice"

The trick was it didn't follow the golden ratio at all because the golden ratio is not some magic number that leads to balance and peace - lighting, rounding, color, and visual strength all dramatically outweigh it

"lighting, rounding, color, and visual strength" along with "clarity, content-focused" etc. are used as hollow buzzwords just as much as "golden ratio"

The whole minimalism/flat movement from iOS 7 and Google's Material and Microsoft's Metro crap was frankly a lazy and weak copout, a give-up on trying to make nice looking UI that could also be functional.

Why is it that sci-fi has always had such beautiful UI since Star Trek but the real world is still so boring?

Ironically many of the website’s examples look worse than what they compare against. Taste is personal, I guess.
Cool stuff, I think I'll never be able to unsee the extra top padding all over the web now haha

I don't even know if the golden ratio itself is that magical, but I do see a lot of value in picking one ratio and sticking to it everywhere.

You've got it. It doesn't have to be golden. That was just useful for other personal preference reasons.
This scrolls alright in Chrome but lags horribly when scrolling on Firefox. Especially when the larger animations come into view.
That's it. I'm switching to unstyled HTML. I can't take this anymore
I don't think their homepage looks good, and for so much attention to detail the padding around text titles and other spacing, specially on mobile, doesn't look good. Not of the elements they showcase but of their own landing page.
I can't tell which one is supposed to be good, and the design is not intuitive enough for me to know which is the LiftKit (the one I'm supposed to prefer).

I'll stick to LLM design, thank you very much

Just in time for Steel Ball Run
Doesn't look bad but it's not semantic and using utility classes like tailwind
It KINDA does. But if you read the current docs you'll see it's clearly a rudimentary precursor to the sophistication tailwind has
If the site stutters when I scroll in my browser [1], it's a great endorsement for the underlying library, right?

[1] M3Pro, Firefox. No, I'm not trying in Chrome.

With the optical correction none/top thing, is that manually measuring the height of capital letters to correctly space everything, or just relying on the height of the font to be correct and respected in the glyphs? Because having worked with the internals of fonts, a lot of them just make up numbers for stuff and then don't actually respect them. You can see how the glyphs don't have to actually abide by any of the numbers from the h in "Checklist", which extends above the capital letters. It makes the font look better, but it makes them a nightmare to work with