Skip to main content
CSS is fun and cool and I like it.
Article

Creating an Animated Login Form for TouchID

I came across this amazing Dribbble shot by Jakub Reis a while back. It caught my eye and I knew that I just had to try recreating it in code. At that moment, I didn’t know how. I tried out a bunch of different things, and about a year later, I finally managed to make this demo.

I learned a couple of things along the way, so let me take you on a little journey of what I did … Read article “Creating an Animated Login Form for TouchID”

Article

HTML for Numeric Zip Codes

I just overheard this discussion on Twitter, kicked off by Dave.

It seems like zip codes are just numbers, right? So…

<input id="zip" name="zip" type="number"/>

The advantage there being able to take … Read article “HTML for Numeric Zip Codes”

Article

POSTing an Indeterminate Checkbox Value

There is a such thing as an indeterminate checkbox value. It’s a checkbox (<input type="checkbox"/>) that isn’t checked. Nor is it not checked. It’s indeterminate.

We can even select a checkbox in that state and style it with CSS!

Some curious points though:

  1. It’s only possible to set via JavaScript. There is no HTML attribute or value for it.
  2. It doesn’t POST (or GET or whatever else) or have a value. It’s like being unchecked.
Read article “POSTing an Indeterminate Checkbox Value”
Link

CSS Only Floated Labels with :placeholder-shown pseudo class

Link

Customise radio buttons without compromising accessibility

Article

Here’s how I recreated theory11’s login form — how would you do it?

I ran across a super cool design for a login form over on the website theory11.com. Actually, the whole site and the products they make are incredibly well designed, there’s just something about the clean and classy form that really got me. Plus, it just so happened that the CodePen Challenge that coming week was based on forms, so I took a few minutes and tried slapping it together.… Read article “Here’s how I recreated theory11’s login form — how would you do it?”

Article

Forms, Auth and Serverless Functions on Gatsby and Netlify

Abstracting infrastructure is in our DNA. Roads, schools, water supply networks—you get the idea. Web development is no exception: serverless architectures are a beautiful expression of that phenomenon. Static sites, in particular, are turning into dynamic, rich experiences.

Handling static forms, authentication, and backend functions on statically-generated sites is now a thing. Especially with the JAMstack pioneer platform that is Netlify. Recently, they announced support of AWS Lambda functions on front-end-centric sites and apps. I’ve been meaning … Read article “Forms, Auth and Serverless Functions on Gatsby and Netlify”

Article

Finger-friendly numerical inputs with `inputmode`

Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms — just use a <input type="number"/>.… Read article “Finger-friendly numerical inputs with `inputmode`”

Article

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 chord with me immediately, so I got enthusiastically involved in the comments like an excitable puppy. That excitement led me to go ahead and build out the initial version of Boilerform, which you can check out here.… Read article “Boilerform: A Follow-Up”

Article

How to Style a Form With Tailwind CSS

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 user interfaces.”… Read article “How to Style a Form With Tailwind CSS”