Boilerform: A Follow-Up
When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I’d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris’ idea struck a …
When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I’d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris’ idea struck a …
If you’ve been staying in the loop with the latest CSS frameworks, you’ve probably already heard of the newest kid on the block: Tailwind CSS. According to its documentation, “Tailwind is a utility-first CSS framework for rapidly building custom …
Petr Gazarov published a pretty rad little design pattern in his article Text input highlight, TripAdvisor style.
It’s a trick! You can’t really make an <input />
stretch like that, so Petr makes a <span></span>
to sync the value …
Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our normalize.css
which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick …
This is just a random idea, but I can’t stop it from swirling around in my head.
Whenever I need to style a form on a fresh project where the CSS and style guide stuff is just settling in, the …
HTML has a special input type for dates, like this: <input type="date"/>
. In supporting browsers (pretty good), users will get UI for selecting a date. Super useful stuff, especially since it falls back to a usable text
…
I’ve been thinking about sound on websites for a while now.
When we talk about using sound on websites, most of us grimace and think of the old days, when blaring background music played when the website loaded.
Today this …
The caret-color
property in CSS changes the color of the cursor (caret) in inputs, texareas, or really any element that is editable, like:
input,
textarea,
[contenteditable] {
caret-color: red;
}
The color of the caret generally matches the color
of …
The :focus-within
pseudo-selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any children that have :focus
.
form:focus-within {
background: lightyellow;
}
Which works like this…
<!-- this form
… We’ve just wrapped up a great series of posts from Chris Ferdinandi on modern form validation. It starts here. These days, browsers have quite a few built-in tools for handling form validation including HTML attributes that can do quite …
Over the last few articles in this series, we’ve learned how to use a handful of input types and validation attributes to natively validate forms.
We’ve learned how to use the Constraint Validation API to enhance the native browser validation …