Garrett_Mack

That's it. I'm switching to unstyled HTML. I can't take this anymore

You've got it. It doesn't have to be golden. That was just useful for other personal preference reasons.

I wish so badly that I knew how to do that

Well obviously you need to buy an M4.

/s

It KINDA does. But if you read the current docs you'll see it's clearly a rudimentary precursor to the sophistication tailwind has

Weird joke is kinda my whole vibe so sounds like mission accomplished!

Man I gotta hang out here more, I really have no idea what I'm talking about do I? Haha

But my versions are the lower contrast ones.

edit: wait are you on light mode or dark mode? I work in light mode where mine are lower contrast but i swapped to dark and now it's reversed.

Unfortunately I've already ported in all the radix primitives. I actually found out about Base literally the exact day I finished it. Then I saw shadcn just upgraded to Base. So it looks like shad once again proves the gary oak in the completely one-sided rivalry that lives entirely in my own head. except instead of Ash I'm like youngster joey with a copilot subscription

hi fren

Thanks! It'll get there eventually, for sure. Feedback like the stuff in this thread helps a lot.

Aw. Got me emotional over here. Thank you for the support! Definitely won't give up. And definitely do take the feedback as a compliment!

Hi, I'm the author, it me. You're right, I need to be clearer that golden ratio doesn't automatically equal beautiful. It's not sacred geometry. It's just pretty. I like it. And studies show people at large tend to find the proportions pleasing.

It's just a rule of thumb, that's all. I just went crazy on the copywriting because I thought I'd need to in order to get the kit to stand out.

I have now been extremely informed that this is not the case.

Yeah it's a huge problem. Not accessible either. Idk what I was thinking.

The next release will use radix primitives.

but nautilus shells pretty

Yep. It's way too large in linear scales. but if youre using an asymmetrical scale, it can be quite useful indeed.

You don't have to use it though. The system works with any scale factor. 1.618 is just the default.

This video explains in detail how the system works with lots of visual aids.

https://youtu.be/r1DANFZYJDw

Whoa that's fascinating! Thank you so much for sharing this, I never would've thought of it that way at all.

No, the opinion is valid. And it's not hard to do, what you're describing. In fact, it's easier than what I've actually done here.

The CSS is vanilla at least. Look up liftkit-core.css in the repo and you can adapt it easily to any other project that supports CSS.

You don't actually HAVE to use phi. That's just the default global scale factor. You're correct that it's kinda marketing spiel. I figured I needed an angle to stand out in the crowded design system world and now I'm paying the consequences in this absolute roastfest, lol.

The only real reason I use phi is because it's very useful in asymmetrical typography scaling. At small type levels, differences in font size are more visually apparent than at large sizes. In other words, 14px vs 16px looks more noticeable to me than 38px vs 40px. So, my goal was to find a rem coefficient that would provide large jumps at large sizes, but I could also use the square root of it to derive smaller increments. I tried phi on a whim one day and realized I liked it.

I also went to apple's HIG and looked at the type specs for MacOS and put them into a spreadsheet. I found that the proportions of line height to font size hovered around 1.272 (which is the sq root of 1.618, or phi). Then I found similar patterns in the ratios of difference font sizes to each other (I think. It was back in 2022).

I also did a bunch of personal tests where I'd try to eyeball line heights and padding and stuff without snapping or looking at the metrics, and my preferences kept landing around golden ratio proportions. Biased? 100%. But I haven't got access to focus groups, and every time I asked my boyfriend to try it for me he'd be all like "please get a job you promised you'd work on your resume today"

So then I looked into other research. I can't find the study because I unpublished the article where I linked it, like a dumbass, but studies have shown that laypeople can tell the difference between abstract art based on rules like fractal symmetry and the golden ratio versus art made by children or animals at a rate of about 60% accuracy. Im on my phone right now but if you're curious I'll gladly look it up for you. I took that to mean "well, if we're entering an age of AI generated interfaces, then eventually we'll need to distill the essence of what looks good into certain mathematical principles so that there's a quantifiable "baseline" for quality that models can rely on. Golden ratio!" (Note: I do not know how AI actually works)

Finally, I got obsessed with that damn material button. There were ads on BART for some Google thing showing a button and it just looked off center to me. It haunted me for weeks. I couldn't stop looking at it. So I thought I'd try finding a reliable way to achieve the correct optical offset, but programmatically, so a designer wouldn't just have to do eyeball every button every time.

So, it's not totally baseless. But it's not a magic number either.

Hahaha are you the one who submitted the form with the email address "FUCK_YOU@DUMB.COM"?

That calculator is for agency services. LiftKit itself is free.

Thanks! Yep, super gimmick. I picked golden ratio because I thought it was a good eyecatcher.

To be clear; You don't HAVE to use the golden ratio. You can set your global scale factor to anything you want in /liftkit-core.css. I just use 1.618 because I like it.

I didn't know what web components were until after I'd released it for React. I was working in a complete vacuum until I put this out there, and then I started to get involved with the community. Before that I was pretty much the only designer/techie I knew. I'm not a professional developer. I'm just a designer who knows enough TS to piece things together.

So having it for React/NextJS isn't an affirmative decision. It's just the only thing I knew how to do at the time. After the first launch last summer I had a couple folks reach out to help port to SvelteKit and Vue, but you know how it is. People get busy.

Agreed. New docs are under construction and they'll be posted on a separate website. The agency came first and then liftkit came after, which is why it's hosted on there now. But I'm shutting down agency operations and so the whole thing will be liftkit eventually.

Because I didn't/don't know tailwind super well.

There is a community plugin, though. https://github.com/jellydeck/liftkit-tailwind

Yeah the docs are like that because I didn't know React well enough to make my own docs and so I stuck with Webflow and realized very quickly I'd made a huge mistake. But I needed to get something out there to buy time while I figure out how to make grownup docs.

lord, really? which one?

yeah it's hella pushy about that isn't it? really need to tone it down

The CSS is in the github repo here: https://github.com/Chainlift/liftkit

LiftKit's free forever to anyone. It's just early stages and bad.

The idea was that if a company wanted to hire us for direct support, we'd do that. But the problems are: [A] no enterprise in their right minds would use this thing in its current state and [B] "us" is me and I don't have time to do that anymore

Thanks for the tip! That actually was the first idea but I didn't end up doing it, for some reason. Thanks for the suggestion.