Article Archives

An Interview with Håkon Wium Lie

Håkon Wium Lie is one of the co-inventors of the original CSS specification. This interview digs into the past and future of CSS:

If CSS hadn’t been developed, designers might have gone elsewhere, explains Lie. HTML could have turned into more of a page description language, akin to PDF. Indeed, designers had already started making pictures out of their documents. “Because that meant you could control every pixel in there. So you could get the fonts, colours, you needed. You …

Introducing the new Framer

Framer, the design and code tool from Motif Tools BV, has been updated with lots of new features.

I guess it's Framer "js", because the designs you create are formed from a code syntax that is JavaScript-like. Kinda looks like JSON in CoffeeScript. It's CoffeeScript. But you're actually working in a native app.

It's a wild time for design tooling. Sketch had become a dominant player for screen design. Adobe knows designers don't turn to Photoshop like they used to …


I, Website

There is a famous essay by Leonard E. Read called "I, Pencil". This is a homage to that.

I am a website — the ordinary website familiar to all people who use the internet.…

The dark side of Guardian comments

As part of a series on the rising global phenomenon of online harassment, the Guardian commissioned research into the 70m comments left on its site since 2006 and discovered that of the 10 most abused writers eight are women, and the two men are black. Hear from three of those writers, explore the data and help us host better conversations online

Nice to see some real research corroborate what so many people have felt to be be true.

This is …

Aligning Text Smartly in CSS

One of those bonafide CSS tricks. Vijay Sharma shows it’s possible to center align a single line of text, but if it wraps, left align the text. A small adjustment, but little tricks like this can help legibility.…

Should I use Grid or Flexbox?

Two sentences from Rachel Andrew that explain when to reach for which layout choice:

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

Flexbox can wrap, making it sorta-kinda two dimensions, but it still flows in a single dimension.…

Introducing iframify

Hugo Giraudel writes up why he created iframify, a script which grabs a DOM node and wraps it in an <iframe>. It’s a nifty tool for displaying components in a style guide at a certain width and effectively faking element queries.

An iframe being an inner document, media queries fire based on the width of the iframe rather than on the actual screen size. Which is what we want. Yay!…

Clarity 2016 Wrapup

My writeup of Clarity conference (the recent conference about style guides). Not comprehensive notes, just the things that resonated with me.…

A faster

Clever testing strategy from the team at Financial Times: they used blocking CSS in order to test people’s behaviour when they’re faced with a slow loading web page:

We wanted to understand how much the speed of our website affected user engagement, specifically, the quantity of articles read, one of our key measures of success. Using that data we then wanted to quantify the impact on our revenue.

If you’re looking for more interesting reading about performance and how it …


Getting Started with CSS Modules

There isn’t one single approach with CSS Modules to making the JavaScript templates, the CSS files, or the build steps to make them work. In this post, which is part of a series on CSS Modules, we'll look at one approach. The goal of this post is to get a CSS Modules project up and running.

Article Series

Part 1: What are CSS Modules and why do we need them?
Part 2: How to get started with CSS Modules (You

ES6 module loading: More complicated than you think

Nicholas Zakas:

The differences between scripts and modules are subtle enough that it's hard for developers to understand the restriction of declaring what a JavaScript file represents ahead of time. My hope is that this post clarifies some of the reasons why it's not possible to autodetect modules from inspecting the source code and why tools such as ESLint ask you to specify the file type before executing. There will be a point in the future where ES6 modules are …

Sponsor: Flatiron School’s Online Campus

Flatiron School’s Online Learn-Verified program guarantees the same outcomes that Flatiron School has been delivering for years: a career as a Web Developer. This robust curriculum is designed to teach students to think, and build, like a software engineer. Join a thriving, global community of programmers so that you'll never need to go it alone. Get started with a free trial by taking the Intro to Programming course, then apply for the Learn-Verified program to be considered for a spot.…


Changing the Cursor with CSS for Better User Experience (or Fun)

CSS can control the appearance of a cursor. There are a ton of options available to us and we've covered them pretty thoroughly in the ol' Almanac here on CSS-Tricks.

Still, it's easy to overlook cursors and their impact on the user experience of our sites. Remember when we learned ::selection was a thing and every site started using it to personalize the background color of text selections? Customizing cursors is just as easy and adds that extra bit of …

CSS containment

Michael Scharnagl breaking down the new contain property:

If you build simple sites without tons of DOM nodes and widgets you probably don’t have to care about CSS containment. On the other hand, if you build more complex sites CSS containment will help to optimize the performance. It is also a good idea to set contain: strict; for third-party widgets to protect the performance of your site.…


What are CSS Modules and why do we need them?

I’ve been intrigued by CSS Modules lately. If you haven't heard of them, this post is for you. We'll be looking at the project and it's goals and aims. If you're intrigued, stay tuned, as the next post will be about how to get started using the idea. If you're looking to implement or level up your usage, part 3 will be about using them in a React environment.…


Jeremy Keith’s talk from last year’s ColdFront conference is all about the fragility of the modern web. Jeremy talks about languages, such as Javascript, that have a “fragile error handling model” and why simple markup is much more resilient and error prone in comparison.

He has three principles for being a good citizen of the web:

  1. Identify core functionality of your website.
  2. Make that available using the simplest technology.
  3. Enhance!

Bonus conference talk! Our own Sarah Drasner at ForwardJS Summit …

Introducing React Storybook

Arunoda Susiripala:

With React Storybook, you can develop and design UI components outside your app in an isolated environment. It will change how you develop UI components.

Like a pattern library for stated React components.…


Automating CSS Regression Testing

The following is a guest post by Garris Shipon. We've touched on the four types of CSS testing here before. Regression testing is the hardest. It's the type where you're trying to test if a change you made to CSS resulted in any unexpected visual problems. This is made more difficult with responsive designs. Garris built a tool for doing this as he embarked upon a new responsive design for a large scale site. Here, he'll walk you through

Sponsor: Wufoo!

Wufoo has been the best form builder around for quite a long time. Here's what I love about Wufoo:

  • It takes like 2 minutes to build a form with the easy drag-and-drop UI. It's just as easy to go back and update it.
  • You can completely control the look. Either quickly change the colors and fonts and stuff with a theme, or use your own CSS.
  • You can give specific people access to specific forms and reports.
  • It's easy to

Let’s Learn ES2015

The following is a guest post by Ryan Christiani. Ryan is a teacher at HackerYou and has been working on a video series called Let's Learn ES6. He offered to put some of that together into a tutorial format, which I thought was perfect as we haven't covered ES2015 much here on CSS-Tricks.

How to work with SVG icons

Solid basics of an SVG icon system in this guide from Florens Verschelde, mixed with some good tricks: the two-color trick, pre-loading the sprite, and using custom properties for unlimited color variations. Also an interesting bit about using multiple methods for sprite insertion:

I like mixing both methods, building two sprites:

  1. A small one with essential icons (e.g. main icons used in the page header), to be inlined on each page. Target size: 5KB or less.
  2. A bigger one with

Why I don’t use CSS preprocessors

Roger Johansson:

I don’t feel the “problems” CSS preprocessors intend to solve are serious enough to warrant the cost, i.e. to me the solution is worse than the problem.

The volume of the chorus in favor of preprocessing (I sing tenor) is so loud, I suspect it's drowning out a decent size group of people who prefer not to use them.

In a surprise twist ending though, Roger does say he likes some forms of CSS processing, but does it …


Leveling Up with React: Redux

This tutorial is the final of a three-part series by Brad Westfall. We'll learn how to manage state across an entire application efficiently and in a way that can scale without dangerous complexity. We've come so far in our React journey, it's worth making it across the finish line here and getting the full bang-for-our-buck out of this development approach.

The Rectangle Behind You

Last year I watched a talk by Marcin Wichary about his work at Medium and, although the content of his talk was enlightening, funny and charming I couldn’t help but gawp at the way that his slides appeared to transition and jump. At one point of the talk he hijacked a slide and started inputing values and moving things around and I had no idea how he did it. Was it Keynote? Had he made his own native app?

Well, …

“Maybe The Most Exciting Development In CSS You’ve Never Heard Of”

Philip Walton has the scoop on Houdini, a new W3C task force that’s planning to give developers low level browser APIs:

The bottom line is, imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. And think about all of the new features you read of in blog posts or hear about at conferences and meetups — things …

Sponsor: Syncano – rethink how you build apps

​Tired of all the backend, server-side code and maintenance required to manage your app, taking time away from solving problems specific to your app?

Enter Syncano - a complete platform to rapidly assemble and orchestrate the building blocks you need for your app.

Our goal is to give the hands back to the creator. Connect your idea to the services you need and release your creative power!

The good news is the pricing is developer-friendly and you have access to …


Using Web Fonts at All: Point/Counterpoint

Adam Morse makes the case against webfonts:

Typography is not about aesthetics, it’s about serving the text. If even a small percentage of people don’t consume your content due to a use of webfonts, your typography is failing.

All this being said I care deeply about aesthetics, and I’ve found the following two sentiments to be true: System fonts can be beautiful. Webfonts are not a requirement for great typography.

I’ve argued in their defense. Also, I reveal …


Leveling Up With React: Container Components

This tutorial is the second of a three-part series on React by Brad Westfall. This series is all about going beyond basic React skills and building bigger things, like entire Single Page Applications (SPAs). This article picks up where the last article, on React Router, left off.

Progressive Web Apps: The Long Game

Remy Sharp attended Google's first Progressive Web Apps event:

What's stood out for me was how a relatively small amount of JavaScript and some well considered code can truly create an offline first experience that doesn't just rival it's native counterparts, but IMHO stands head and shoulders above. The load time was instant, for a web app, driven by regular HTML, CSS and JavaScript. It was fast, and all worked irrespective of the connectivity.…


Ligature Icons via Pseudo Elements and Icon Fonts

The following is a guest post by Jason Jacobson, a senior engineer for Minneapolis based startup LeadPages®. Jason shows off something I didn't know was possible: turning a string into an icon. This requires an icon font, and I generally refer SVG for icons, but that doesn't stop this from being a bonafide CSS trick that is certainly worth knowing about!

Comic Book FX Lettering with SVG Filters

Much has been written about how SVG filters can be used to style images or manipulate shapes or even make crazy animations.

But I haven’t seen much about how SVG filters can be used to style text recently. Thankfully, Dudley Storey has written a neat introduction to the topic by showing how to make regular letters look like text from an illustrated comic book. It's part of a series, starting with the bubbles and staggering letters. …

Resolution Independent Pixel Illustrations

Marcus Blättermann has made a series of beautiful illustrations that adapt to the size of the browser window (and your cursor position). Make sure to check these illustrations out on a big screen to get the full effect.…

Sponsor: Media Temple

Media Temple has been my host here at CSS-Tricks since forever.

One of the things I particularly like is the customer support team. They have all the angles covered:

  • They have really robust documentation. I land there from web searches all the time, not even thinking to directly reference their docs.
  • Need help right now and not finding it in the docs? They do real time support through chat and phone. They are also 24/7/365 on Twitter at @mediatemplehelp

Content & Display Patterns with Expressive CSS

John Polacek looks at a few examples where it’s possible to use small utility CSS classes to design the layout for a page in a method he describes as “Expressive CSS”:

Instead of creating CSS around content patterns, we could instead craft our CSS based upon display patterns. Expressive CSS is an approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand.

I’m not sure if John was the first to come up with …

More code review tools (on GitHub)

GitHub has improved their code reviewing tools:

Effective code review catches bugs before they’re deployed, improves code consistency, and helps educate new developers. We’re adding new features to make code review on GitHub faster and more flexible.

A few include a handy timeline indicator showing what you might’ve missed after reviewing a pull request, and a way to filter filters in a pull request by type (e.g. maybe you just want to look at the CSS files). …


We Put Hundreds of Our Client Sites Behind a CDN, and It Worked Out Really Well

At the agency I work for, we recently put all ~1,100 of our sites behind a CDN. It seems to be working. Unfortunately, I have no idea why or how we did this. Therefore, in the first part of this article, I force our CTO, Joshua Lynch, to explain the process to me. This has the unintended consequence of Josh suggesting I try this on my own website, a process I'll narrate for the second half of the article.…


Creating an SVG Icon System with React

I recently went to Michael Jackson and Ryan Florence’s ReactJS Training. I was really excited to attend, partially because I had so many questions about SVG and React. There are a lot of bits about working with React and SVG, and especially manipulating it, that aren’t quite supported yet. One of the major gaps for me was the <use></use> element, as most SVG icon systems are built with <use></use>.

I asked Michael if he thought better support might …


Leveling Up With React: React Router

This tutorial is the first of a three-part series on React by Brad Westfall. When Brad pitched me this, he pointed out there are a good amount of tutorials on getting started in React, but not as much about where to go from there. If you're brand new to React, I recommend watching this intro video. This series picks up where the basics leave off.


Use `rem` for Global Sizing; Use `em` for Local Sizing

Richard Rutter’s guide for setting the font-size of an element is interesting: he argues that we should use both em and rem units depending on the relationship it might have with other elements on the page:

Take the example of a pull quote containing two short paragraphs. The spacing between the paragraphs will depend on the size of the paragraph text, so you could feasibly set that spacing in either rems or ems. Should you decide during your design process …


What is a Headless CMS?

Have you heard this term going around? It's quite in vogue. It's very related to The Big Conversation™ on the web the last many years. How are we going to handle bringing Our Stuff™ all these different devices/screens/inputs.

Responsive design says "let's let our design and media accommodate as much variation in screens as possible."

Progressive enhancement says "let's make the functionality of this site work no matter what."

Designing for accessibility says "let's ensure everyone can use this regardless …

A Year Without jQuery

Patrick Kunka writes about his experiments in making a large-scale web app without jQuery:

In my mind, ES6 is for the most part a much-needed syntactical progression of the JavaScript language and jQuery is for the most part, a DOM manipulation library with a beautifully designed API. These two things actually have very little in common so I wanted to write this article primarily to prove that you can stop using jQuery today - and you don’t need ES6 or …

Maybe we could tone down the JavaScript

Lexy Munroe shows a dozen or so issues with Twitter's reliance on JavaScript that could have been handled with some kind of progressive enhancement. Sometimes picking on the big players is useful, as they really do influence how other apps choose to do things. It's not exactly punching down. …


Right Click Logo to Show Logo Download Options

I was on the Invision website the other day and I wanted to snag their logo for some reason or another. Sometimes you can have better luck doing that (like when you happily discover it's SVG) than you can Google Image Searching or even regular web searching for something like "Invision Logo" and loping to find some kind of branding page with a logo kit download.

So I right-clicked their logo, hoping to "inspect" it with the DevTools and check …

We have a pretty good* newsletter.