How to add simple view transitions to a website ✦
Implement the simplest view transitions to your website.
Category: CSS
Chunky buttons ✦
Some people doodle during meetings, others just write HTML and CSS.
dvh units & hero sections ✦
Just leaving this bookmarked so I can copypaste it later:
Equal width columns with CSS grid ✦
Custom, accessible checkboxes ✦
Usually I tend to vouch for not messing with the browser’s default inputs, for various reasons. Mainly: they’re still a pain to style in a consistent and accessible way across different browsers. But also, you’re introducing new form controls for your users. Ones that they have never seen in their lives. So make sure that…
Fix: “Using / for division is deprecated” on Sass ✦
Recently Sass announced they’re going to include a breaking change in order to comply with the latest CSS syntax. This affects everything that uses the / symbol. Because Sass is a CSS superset, we’re matching CSS’s syntax by redefining / to be only a separator. / will be treated as a new type of list separator, similar to how , works today. Division will instead be written…
Understanding z-index in CSS ✦
A cute guide on z-index by Ahmad Shadeed. Check it out: Understanding z-index in CSS
Playbit CSS keyboard ✦
A few days ago Rasmus Andersson announced Playbit, “a computing environment which encourages playful learning, building & sharing of software”. On the bottom of the page you can see a fun little keyboard, apparently inspired by this old calculator. I went ahead and implemented it with HTML/CSS on Codepen in about 45 minutes: See the…
How to use only the grid system from Bootstrap ✦
You don’t need to add the whole Bootstrap code and a zillion dependencies and plugins just to use col-md-3. This is how.
Everything I know about CSS Variables Custom Properties
✦
Brain dump about CSS Custom Properties, AKA CSS Variables They are not variables They are actually called CSS custom properties. Huh. We’ll refer to them as variables for brevity. Declaring variables To declare new variables, you just add a new property that begins with –, inside a ruleset: What is :root? If you notice, in…