Archive | article

RSS feed for this section

Hey hey `font-display`

Y’all know about font-display? It’s pretty great. It’s a CSS property that you can use within @font-face blocks to control how, visually, that font loads. Font loading is really pretty damn complicated. Here’s a guide from Zach Leatherman to prove it, which includes over 10 font loading strategies, including strategies that involve critical inline CSS of subsets of fonts combined with loading the rest of the fonts later through JavaScript. It ain’t no walk in the park.

Using font-display

The post Hey hey `font-display` appeared first on CSS-Tricks.

Creating a Panning Effect for SVG

Earlier this month on the Animation at Work Slack, we had a discussion about finding a way to let users pan inside an SVG.

I made this demo below to show how I’d approach this question:

See the Pen Demo – SVG Panning by Louis Hoebregts (@Mamboleoo) on CodePen.

Here are the four steps to make the above demo work:

  1. Get mouse and touch events from the user
  2. Calculate the mouse offsets from its origin
  3. Save

The post Creating a Panning Effect for SVG appeared first on CSS-Tricks.

What are Higher-Order Components in React?

If you have been in the React ecosystem for a while, there is a possibility that you have heard about Higher Order Components. Let’s look at a simple implementation while also trying to explain the core idea. From here you should get a good idea of how they work and even put them to use.

Why Higher-Order Components?

As you build React applications, you will run into situations where you want to share the same functionality across multiple components

The post What are Higher-Order Components in React? appeared first on CSS-Tricks.

Choosing a Responsive Email Framework: MJML vs. Foundation for Emails

Implementing responsive email design can be a bit of a drag. Building responsive emails isn’t simple at all, it is like taking a time machine back to 2001 when we were all coding website layouts in tables using Dreamweaver and Fireworks.

But there’s hope! We have tools available that can make building email much easier and more like coding a modern site. Let’s take a look at a couple of different frameworks that set out to simplify things for us.…

The post Choosing a Responsive Email Framework: MJML vs. Foundation for Emails appeared first on CSS-Tricks.

How to Create a Component Library From SVG Illustrations

I’ve recently published my first ever open source npm package! It makes SVG illustrations from unDraw into customizable React components.

Here’s a GIF that shows what I mean:

What’s unDraw?

While unDraw is still fairly new, its open source nature means that it’s being used by a range of products already. Here it is on the newly launched design mentoring site called MentorOla, alongside a language site I’ve been working on myself called Little Lingua:

Left: MentorOla…

The post How to Create a Component Library From SVG Illustrations appeared first on CSS-Tricks.

Another Collection of Interesting Facts About CSS Grid

Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I worked on another workshop and I’ve learned some more exciting facts about the layout spec we all so love.

Of course, I’m not going to keep my knowledge to myself. I’m happy to share my findings once again with you, the CSS-Tricks community.

Understanding how the `grid` shortcut works

Sometimes, reading and understanding parts of the grid—or actually any …

The post Another Collection of Interesting Facts About CSS Grid appeared first on CSS-Tricks.

New CSS Features Are Enhancing Everything You Know About Web Design

We just hit you with a slab of observations about CSS Grid in a new post by Manuel Matuzo. Grid has been blowing our minds since it was formally introduced and Jen Simmons is connecting it (among other new features) to what she sees as a larger phenomenon in the evolution of layouts in web design.

From Jeremy Keith’s notes on Jen’s talk, “Everything You Know About Web Design Just Changed ” at An Event Apart Seattle 2018:

This …

The post New CSS Features Are Enhancing Everything You Know About Web Design appeared first on CSS-Tricks.

Some Recent Live Coding Favorites

There is no shortage of videos out there where you can watch people code with an educational vibe. A golden age, one might say. Here are a few that I’ve watched and really enjoyed lately:

  • @keyframers – “An animated, collaborative coding live stream by @davidkpiano & @shshaw.” They’ve got 2 epsidoes out now, each of which they start with an animated interface GIF and then collaboratively re-build it.
  • The Coding Train – Daniel Shiffman’s show is a force of

The post Some Recent Live Coding Favorites appeared first on CSS-Tricks.

1 HTML Element + 5 CSS Properties = Magic!

Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves?

The desired results.

Well, this article is going to explain just how to do this and then also show how to make things fun …

The post 1 HTML Element + 5 CSS Properties = Magic! appeared first on CSS-Tricks.

Keep Pixelated Images Pixelated as They Scale

This is a little reminder that there is a CSS property for helping control what happens to images as they scale up: image-rendering.

We’re quite used to the idea that scaling an image larger than its natural size (upscaling) causes it to be blurry. As awful as that is, it’s the browser doing the best it can to algorithmically smooth out an image over more pixels than it has data. But let’s say you’d really rather not it do …

The post Keep Pixelated Images Pixelated as They Scale appeared first on CSS-Tricks.