Member-only story

HTML Illiteracy (Part 2 of 2) Styling And Failwind Stupid

Jason Knight
CodeX
Published in
24 min readMar 18, 2024
The Mandalorian, “One does not speak unless one knows”
Then perhaps this lesson is for you.

Right out of the gate let me show you the finished template that I started in part 1, as I’d like to discuss numbers and methodology before I break down the how/what/why of the CSS.

You can find it here:
https://cutcodedown.com/for_others/medium_articles/failwindUI/shotlight/shotlight.html

As with all my examples the directory is unlocked for easy browsing:
https://cutcodedown.com/for_others/medium_articles/failwindUI/shotlight/

And there’s a .rar of the whole shebang in there so you can play around with it.

And yes, that’s not a perfect 1:1 because I fixed what I consdier to be layout issues, waste of whitespace hampering UX, inaccessible font sizes, the ugly use of those garbage “system font” stacks that result in cross-platform inconsistency, and all the illegible colour contrasts to the point I could barely even see that it had a flipping light/dark toggle. Though that last part I suspect is my astigmatism making me WAY more sensitive about accessibility

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

CodeX
CodeX

Published in CodeX

Everything connected with Tech & Code. Follow to join our 1M+ monthly readers

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

Responses (7)

Write a response

For someone minding size, the size of the article is 3x as bloated as needed and 10x as hard to read as should be if you explained nicely and concisely the refactoring you performed.

And indeed, I always found the mobile first approach bizarre to say the least

9

Brilliantly done. As a fellow oldtimer, I was there at the dawn of time when frame+table layouts and inline styles were a necessary evil, and the introduction of CSS made separation of concerns possible.

I left frontend dev in 2014 after almost ten…

2

I have a somewhat off topic question: I am very fond of functional naming and I totally dig it.
But I am not always good at naming. I often run into situations, where I don't know how to properly name variables i.e. custom properties in a meaningful…

3