So Many Color Links

December 27th, 2019

There’s been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment. Curated colors in context Happy Hues demonstrates a bunch of color palettes in the context of the site itself. That’s a nice way to do it, because…

Moving Rainbow Underlines

December 23rd, 2019

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It’s not scroll-jacking — it’s just a minor design feature that uses scroll position to enact a little movement. To draw the rainbows themselves, we could use a linear gradient with…

Is Web Design Easier or Harder Than it was 10 Years Ago?

December 20th, 2019

Is it harder or easier to build a website now than 10 years ago? Has the bar gone up or down? I don’t have any data for you, but I can shell out some loosey-goosey opinions. HTML HTML5 was the only big HTML change in the last decade, and it wasn’t particularly dramatic. It’s cool…

CSS Architecture for Modern JavaScript Applications

December 6th, 2019

There is a lot to like from Mike Riethmuller here:

  • The title. When you’re building a website from JavaScript-powered components anyway, that is a moment to talk about how to do styling, because it opens some doors to JavaScript-powered styles that you probably wouldn’t otherwise choose.
  • The personal experience and pragmatism. Drawing on five years of consulting, he’s seeing that component re-use and style understandability is suffering, not improving, partly due to every team having different approaches. He says “it’s

Read article

The post CSS Architecture for Modern JavaScript Applications appeared first on CSS-Tricks.

Firefox 71: First Out of the Gate With Subgrid

December 5th, 2019

A great release from Firefox this week! See the whole roundup post from Chris Mills. I’m personally stoked to see clip-path: path(); go live, which we’ve been tracking as it’s so clearly useful. We also get column-span: all; which is nice in case you’re one of the few taking advantages of CSS columns. But there…

Dark Mode Favicons

December 3rd, 2019

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel=”icon” href=”/icon.svg”>). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports dark mode!   <svg width=”100″ height=”100″ xmlns=””> <style> circle…

Having a Little Fun With Custom Focus Styles

December 2nd, 2019

Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI and asks you to remove it. Or you might even be looking to remove it yourself. So you do a little research and find out…

Simplified Fluid Typography

November 29th, 2019

Fluid typography is the idea that font-size (and perhaps other attributes of type, like line-height) change depending on the screen size (or perhaps container queries if we had them). The core trickery comes from viewport units. You can literally set type in viewport units (e.g. font-size: 4vw), but the fluctuations in size are so extreme…

The Power (and Fun) of Scope with CSS Custom Properties

November 27th, 2019

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set them in declaration blocks like –size: 1em and use them as values like font-size: var(–size);, they differ from preprocessor variables (e.g. they cascade), and here’s a guide with way more…

iOS 13 Broke the Classic Pure CSS Parallax Technique

November 27th, 2019

I know. You hate parallax. Do you know what we should hate more? When things that used to work on the web stop working without any clear warning or idea why. Way back in 2014, Keith Clark blogged an exceptionally clever CSS trick where you essentially use a CSS transform to scale an element down…