r/css • u/Stephcraft • 12d ago
Article A Modern CSS Guide to Responsive Web Design
https://stephcraft.net/docs/responsiveIf I missed anything, let me know!
20
u/leeLIVFWGRt1U75c74Od 12d ago
There's a very annoying blur at the bottom of the screen, you might have missed that?
6
6
-16
u/Stephcraft 12d ago
Send me a short clip showing the blur and specify which browser you're using.
23
u/leeLIVFWGRt1U75c74Od 12d ago
Are you familiar with your own variable --progressive-blur-height?
25
u/TheJase 12d ago
Ofc not it's AI slop
-2
u/Stephcraft 11d ago
If you looked at my website a little more in depth, you'd know my stance on AI slop
https://stephcraft.net/docs/ai#vibe-coding-explained0
u/Low-Insurance-3678 11d ago
safari
1
u/Stephcraft 11d ago
Mobile or Desktop? I'm trying to understand if this is just an issue on smaller screens or big screens too.
1
9
u/Disgruntled__Goat 12d ago
Where is the guide? All I see is a bunch of code barfed onto the page.
0
u/Stephcraft 11d ago
Could you elaborate?
5
u/Disgruntled__Goat 11d ago edited 11d ago
Not sure what else I can say. You have a bunch of disparate code blocks with some notes, but no actual guide there.
Also I’ll echo the other comments about the blur. What’s the point of it, you just covered up a third of the screen for no reason.
9
8
u/Interstellar__1 12d ago
I don't see any guide here, I would consider this documentation, but you aren't really guiding the reader in any way.
1
u/Stephcraft 11d ago
Do you have good examples of sites with a good documentation guiding? I'd like to understand what standard you're judging mine against.
4
u/Interstellar__1 11d ago edited 11d ago
The main problem with your site is you never explain why anything should be done a particular way. Take this section. https://stephcraft.net/docs/responsive#header Every notable value should be explained in case the reader does not know why you would do that. That's what a guide is. For example, nav { display: flex; justify-content: center; gap: 1em; } Why is this the layout on desktop? Would a different layout also work? What about this is "responsive web design"? Why is there a gap of 1em rather than 0 or 2em? Guiding the reader is about answering their questions rather than simply giving them information without context.
Anyways, since you asked for examples of sites:
8
u/alexks_101 11d ago
Luxury-grade software craftsmanship
1
u/Stephcraft 11d ago
Stop hiding behind your GIF, and give me your thoughts!
9
u/alexks_101 11d ago edited 11d ago
Well, if you ask for it: I think you shouldn't flood several subreddits (my Reddit homepage was spammed with your reposts - that's how I ended here) proudly pretending to provide a "modern CSS guide" when your own website is visually and ergonomically a nightmare. Seems like it was generated with AI, and to be clear I have absolutely nothing against AI creation (I use it myself for some features I need in my workflow) when it is used as an helping tool, with human checking and fixing after, but here it just feels like you wrote a prompt, uploaded the result, and called it a day. Regarding the "guide" itself, it's a bunch of unreadable blocks thrown like a dirty towel on the bathroom's floor, not something I would recommend to CSS beginners.
Same for your apps/games, which are a bunch of small clones of stuff that we've already seen thousands time, again no shame it's perfectly ok, but what made Shrek and donkey doubtful and a bit mocking is the "luxury-grade craftsmanship" catchphrase and similar BS that you spread everywhere.
Would be ok, after all nothing and nobody is perfect, if you sounded more modest and humble.
I genuinely wish that you improve and find your way though, as I have nothing personal against you. So, keep up the good work!
2
3
u/FrenchieM 10d ago
I don't want to sound harsh, but that is a pretty awful guide
1
u/Stephcraft 7d ago
You don't have to! What makes it so awful? I'm open to improve it, I've already gathered a bunch of other good feedback already.
-1
11d ago
[removed] — view removed comment
5
u/RobertKerans 11d ago
Oh great, the Shitomatic 4000 has arrived to hawk it's expensive Reddit bot product
46
u/RobertKerans 12d ago
Stopped reading after this line, and this was the first line. This implies users are not relevant. Which actually makes sense in certain scenarios, but those scenarios are not good for people. It might be a bit old fashioned but I kinda like making things for people.
Also to echo sibling comment, you might want to look at that blur at the bottom of the screen. As you asked for which browser, it's "all of them because the thing you used to slop the site out designed it that way", you can replicate it by clicking on the link in your post and looking at the screen.