Simon
KPCKevin Powell - Community
•Created by Lemon on 3/24/2025 in #front-end
How do I replicate this scrolling animation?
I believe there is no generally valid answer.
CSS can do alot already, but people also wrap their heads around things like GSAP. The recording likely displays a combination of techniques e.g. scroll-driven CSS triggers, vanilla JavaScript and libraries plus SVG morphing.
5 replies
KPCKevin Powell - Community
•Created by McMarty on 2/16/2025 in #front-end
Adding a Hyperlink to a Nested Accordion Menu
I went and replied in https://discord.com/channels/436251713830125568/1352292978110234755
262 replies
KPCKevin Powell - Community
•Created by i_lost_to_loba_kreygasm on 3/9/2025 in #front-end
Do I use fixed height of 100vh for the hero/ first section ?
Wether to display an image via CSS or as HTML-element depends on its value and isn't just a question of architecture. If I am not mistaken, also today Search Engines and Screen Readers do not read
background-image as page content.7 replies
KPCKevin Powell - Community
•Created by Simon on 2/26/2025 in #front-end
[semi-solved] unwanted 1fr gaps
I've opened a discussion issue on this – https://discord.com/channels/436251713830125568/1346052354373324862
Feel free to opt-in
14 replies
KPCKevin Powell - Community
•Created by Simon on 2/26/2025 in #front-end
[semi-solved] unwanted 1fr gaps
It is a bit awkward, yeah.
Considering tablet sizes, I maybe could subtract the gap width from the inline-padding. The only issue appears, if the gap is wider than the padding would be. But that should be fairly rare.
Considering phone sizes you are right 😄 gaps likely are redundant and maybe could be replaced by padding/margin or even moving to flex
edit
the codepen has been updated back to its original quality.
14 replies
KPCKevin Powell - Community
•Created by Simon on 2/26/2025 in #front-end
[semi-solved] unwanted 1fr gaps
Kind of a new question, but it was baked within the original issue (https://discord.com/channels/436251713830125568/1344331996096106506/1344331996096106506).
14 replies
KPCKevin Powell - Community
•Created by Simon on 2/26/2025 in #front-end
[semi-solved] unwanted 1fr gaps
Any ideas how I could prevent the most outer gaps from dictating the space between the browser window and the content-width?
Removing the
1fr for handheld sizes would do it, kind of. But then I lose the possibility to declare "full-bleed elements" for those viewports.14 replies
KPCKevin Powell - Community
•Created by Simon on 2/26/2025 in #front-end
[semi-solved] unwanted 1fr gaps
🤦 oh yeah, because adding one reduces the width per column. fck sake.
14 replies
KPCKevin Powell - Community
•Created by Simon on 2/26/2025 in #front-end
[semi-solved] unwanted 1fr gaps
Thanks for your time.
Maybe I need to wind back once more and set it up without variables – logically it does not make sense not having to subtract some space.
I will update the pen and share it again within the next 6 hours.
The concept of the template is fairly simple tho. In the case of desktop it produces
1fr 12col 1fr, arranging all children to the 12col-areas, except when they have additional classes, allowing to move them around (or full-bleed).
Hear you soon.
edit
I have updated the pen and removed all the fancy to make it more readable – https://codepen.io/sdmedworld/pen/emYBOaJ
It seems like the issue appears mainly, when there is not enough space to fit all the columns and gaps which makes sense. Feel like I need to add a layer of minmax somewhere.
I had intended to subtract one gap space because there is one less gap than you have columns, but err.
My math is not mathing.14 replies
KPCKevin Powell - Community
•Created by Simon on 2/26/2025 in #front-end
[semi-solved] unwanted 1fr gaps
The pen-name is irrelevant and it is all disconnected from any environment. The issue is visible and presented by the codepen.
Sorry for the misleading content there.
14 replies
KPCKevin Powell - Community
•Created by Karol on 2/19/2025 in #front-end
Form status message
48 replies
KPCKevin Powell - Community
•Created by Karol on 2/19/2025 in #front-end
Form status message
Honestly the easiest way to me, is not having the content dictating the sizes but placing the modular content neatly inside a grid layout.
48 replies
KPCKevin Powell - Community
•Created by Karol on 2/19/2025 in #front-end
Form status message
my bad
48 replies
KPCKevin Powell - Community
•Created by baller on 2/17/2025 in #front-end
Need help to add images to HTML
I am actually unsure myself what is needed for a .htm to parse. The originally posted markup would not pass the validation test – rather
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>non-empty title</title> </head> <body> <img src="mainpage.jpg"/> <img src="secondpage.jpg"/> <img src="thirdpage.jpg"/> <img src="forthpage.jpg"/> <img src="fifthpage.jpg"/> <img src="lastpage.jpg"/> </body> </html>The question is, does the page show the broken image icons or is it blank 🤷
26 replies
KPCKevin Powell - Community
•Created by Karol on 2/19/2025 in #front-end
Form status message
I struggle to understand this. If the form has no real function and just serves as a tertiary demo, create an image .svg that looks like it.
48 replies
KPCKevin Powell - Community
•Created by McMarty on 2/16/2025 in #front-end
Adding a Hyperlink to a Nested Accordion Menu
As b1mind already pointed out;
Usually a hyperlink brings the user to a valuable piece of content – a page displaying just an overview of nested pages is not it and will not increase the usability. And even if there is valuable content available, the user still should be able to avoid having to access that categories-page, just to continue. For example, by having additional, obvious and large enough click/tap-areas, visualized by icons like plus or arrow. Therefore linking a category commonly has little value.
And then there is the simple fact that, without AJAX, you technically and logically can not have an
<a> acting as a hyperlink and animation trigger at the same time.
Changing content and the navigation progress at the same time using AJAX will overwhelm users.
Overall, the issue is the concept which is simply unfit because content apparently goes beyond three levels. Should be easy to accept.
I believe, that there are better approaches to have the user navigate such a data-set. Because nesting categories, expects the user to already know what they are looking for and exactly how to find it – which is not for the developer to decide. A combination of categorizing the content by using an alphabetical navigation, combined with nesting, breadcrumbs and a full-text search, likely will drain less energy from your visitor.
I am sure there are best practice articles about that to find.262 replies
KPCKevin Powell - Community
•Created by Shayokh on 2/12/2025 in #front-end
How to achieve such stretched fonts sizing?
That is likely the font itself which has been designed that way. Without seeing the code, I would even speculate on an .svg or image instead of it being all text.
8 replies
KPCKevin Powell - Community
•Created by Nick on 2/5/2025 in #front-end
CSS grid that's constrained vertically
40 replies
KPCKevin Powell - Community
•Created by Londonpeteharrison on 1/30/2025 in #front-end
Change colours when required fields complete
There we go
27 replies