duruiz
KPCKevin Powell - Community
•Created by duruiz on 9/22/2023 in #front-end
Clever way to use grid instead of position absolute in a common layout pattern
6 replies
KPCKevin Powell - Community
•Created by duruiz on 5/29/2023 in #ui-ux
tags? pills? chips? buttons? the "all look alike hell"
So in my company we are developing a design system, one thing that bothers me a lot is the "chips" or "pills" design in the way it's applied on multiple design systems (culture amp, ant design, atlassian etc.), the thing is:
labels/pills/chips in most design systems can be clickable or not, and that's documented in those DS's as a normal behavior but for me as a user it make absolutely no sense, how can you have the same visual element being interactive or not in your page without any other clues of that? the user is supposed to guess when they can or cannot click something? I'm missing something here or there are really a lot of big companies doing it wrong?
How are you people handling this, I see a lot of difficulties making those kind of components usable, here on discord we have "tags", I think they font-size is a little to small to be readable but if they get bigger they will look too much like the "post" button, other thing... Sometimes, specially when people call them "chips" and not tags, they can behavior like a radio button (only one option selectable) or a checkbox (multiple selection) and to know if you can select one or more you have to... guess.
Have you worked with those? what rules did you used? can you point good examples of those things?
5 replies
KPCKevin Powell - Community
•Created by duruiz on 5/10/2023 in #front-end
Better way to animate an entering element with `@keyframes`
I was building a demo playing around with an "entering" and "leaving" full page element using both transform and @keyframes, I'm satisfied with the
transform result but the @keyframes one involved a lot of js to make the animation "goes backwards" when the user hits the "toggle" button, there is a better approach for it?
here's my pen: https://codepen.io/eduruiz/pen/oNaErPr
ps. first time posting here, hi everyone! 🧡8 replies