CSS Wishlist 2024 π
The amount of new features we have gotten in the past few years is staggering. I remember when flexbox just started rolling out, but I think the real [...]
chriskirknielsen
Posts
Grouping posts by year with Nunjucks in Eleventy π
My blog has a list of all the posts Iβve published on a single page since I donβt post a whole lot. I had been asked in the past how I managed to grou [...]
Select an element which doesnβt descend from another in CSS π
Update: This article initially proposed a:not(.archived a), but Ε ime Vidas suggested a:not(.archived *) which avoids repeating the target. This has be [...]
A Future of Themes with CSS Container Style Queries π
You may already know this, but I have a slight bias towards theming βefficientlyβ (or ridiculously) in CSS with custom properties, as I wrote about in [...]
My plugin for Markdown-It: CodeWrap π
Motivation I've just released a plugin for Markdown-It. I wanted to have tighter control over how my code blocks were displayed on my site, adding a " [...]
Animate an SVG shape's inner stroke π
If you have any theme besides "Dusk" selected on my website, you'll see a little animation on hover that fills in each letter of my logo. In case you [...]
Plucking a nested property from an object π
Have you ever wanted just one value from an array of JavaScript objects? Gently plucking a single property from each object and neatly placing them ne [...]
Eleventy Asset Pipeline: Precompiled Assets without Gulp π
I've found out a way to avoid using Gulp and save compiled assets that then live as regular assets that can be used as includes and whatnot within my [...]
CSS Grid with a preferred column count π
Have you ever had to create a neat little grid of logos on a page? CSS can help you with grid and its grid-template-columns property. Using auto-fill [...]
Eleventy within Eleventy to compile when you compile: precompiling reused assets π
Update Okay, so maybe don't do this? More info below! A bit of a weird title, but Iβm sure Xzibit would approve. So let me explain what Iβm on about: [...]
Manage your SVG files with Eleventyβs Render plugin π
Update Wait! I have a new method below. Recently, Iβve been working on a new version of my site, still using Eleventy, and wanted to explore new ways [...]
Fine, types in JS aren't the worst π
Okay, so I don't like TypeScript all that much. It feels restrictive, so much has to be typed (if you'll pardon the pun), and I feel my JavaScript cod [...]
Animate your z-index for cleaner hover effects π
I wanted to share a quick tip Iβve been using for a while β itβs nothing new but hey I felt like writing about it! When youβve got a component with se [...]
Rotating floating animation with chained transforms π
Okay, so this is an old trick. I've used it a few times over the years, but I keep forgetting about how it works. When I keep forgetting about a techn [...]
A DRY Approach to Color Themes in CSS π
I wrote an article on CSS-Tricks about using a --var: ; trick from Lea Verou to define theme variables only once, when you need to respect a user-pref [...]
Inline lists with conditional separators π
Here's a quick tip that my manager shared with me (thanks Matthew! β and you can find a version of it on StackOverflow, by Tom Robinson from 2016!). I [...]
Building and maintaining components from utility classes in Eleventy π
I'm a big fan of Eleventy (this site is built with it), and also a big fan of utility-first CSS. You can check this site's source code in your browser [...]
Modern Fluid Typography with clamp() π
Recently, CSS introduced min() and max() which are now available in every major browser. Along with those two came clamp(), which is basically a wrapp [...]
Breakout Container π
Here's a quick tip if you have your content limited to a certain width but you want an element to "break out". I've seen a few ways to do this, includ [...]
Contextual Utility Classes for Color with Custom Properties π
I wrote an article on CSS-Tricks about using the power of the cascade to style links within their context, with custom properties! Here's an example: [...]
Switching From WordPress To Hugo π
When I converted my blog, Geekometric, from a WordPress-based site to a Hugo-built static site, I felt I needed to go through a lot of different pages [...]