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
I was wondering if there is a more "let the browser handle those problems" approach
6 replies
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
cool!
but I still need to use some padding on the text, calculate the "exact" breakpoint where the image needs to go down (or to the side if mobile first), reseting the padding and so on, that's the kind of complexity I was trying to avoid.
is the same if I use a position absolute on the image, the space gets "hard coded" to some breakpoints etc.
6 replies
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
hey @13eck, thanks for the suggestion but I think float will make everything even more complex to handle, I basically don't use float since flex/grid
6 replies
KPCKevin Powell - Community
•Created by duruiz on 5/29/2023 in #ui-ux
tags? pills? chips? buttons? the "all look alike hell"
5 replies
KPCKevin Powell - Community
•Created by duruiz on 5/29/2023 in #ui-ux
tags? pills? chips? buttons? the "all look alike hell"
5 replies
KPCKevin Powell - Community
•Created by duruiz on 5/29/2023 in #ui-ux
tags? pills? chips? buttons? the "all look alike hell"
nice to know I'm not suffering alone 😆
I was observing google use of things like that and another thing I saw they doing is add non clickable tags inside clickable areas that the user already know, like in gmail the "email" row has a "new" tag, but you know the click in the row will open the email, they do the same in the tag, I'm not sure if I like it, it's just an observation.
about the focus, it's a pretty good indicative and I'm really aware of focus in UX and a11y, but the big problem here is that a significant part of the users are on mobile/touch devices, and on those devices we can't rely on focus/hover to give things meaning 😦
being honest I think those things should be separated, we should (in a design system) choose one style for clickable and one style for not clickable and use it everyone so the user don't need guessing
also the minimum clickable area 48x48 is often not respected when using tags/chips
5 replies
KPCKevin Powell - Community
•Created by Ilan on 5/15/2023 in #front-end
How to center content in a container?
oh, nice you solved it. at your first question I got the impression that you wanted it horizontally centered but you wanted it both horizontally and vertically centered, right?
16 replies
KPCKevin Powell - Community
•Created by Ilan on 5/15/2023 in #front-end
How to center content in a container?
take a look:
https://codepen.io/eduruiz/pen/OJBwGaM
16 replies
KPCKevin Powell - Community
•Created by Ilan on 5/15/2023 in #front-end
How to center content in a container?
align-items-center on bootstrap is a helper class for containers with display: flex.
what I think you are looking for is to add the class justify-content-md-center in your row16 replies
KPCKevin Powell - Community
•Created by duruiz on 5/10/2023 in #front-end
Better way to animate an entering element with `@keyframes`
I've been out of discord for some days, sorry for the late reply!
thanks for the solutions, both are really simpler than what I've been doing. 🙂
@Chris made it in a way I would think if I was working with vue, a "state like" thinking of the component that I usually don't bring aboard when using pure js.
and @joao6246, I totally forgot about the
once possibility, that will be very welcome.
I had tough about the "one more class" approach but I was like "oh no, one more class to handle"... what I didn't tough is that I could simple just remove it on page load, this make it seems nicer but there isn't the possibility of a "flash of animation" if for exemple my animation took longer to animate than my js took to remove the invisible class?8 replies