Article Archives

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 and is making things from the ground up like Adobe XD and trying to figure out mobile. Webflow is getting it done in the browser and producing production-ready sites. InVision is also happening in the browser and focusing on teams and workflow. There are very niche tools like Lingo popping up.

The design tooling landscape in years to come will probably be as splintered as the web development tooling is now.

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 also a damn nice piece of storytelling on the web. Not just well-designed and well-written, but uses video in interesting ways (GIF poster attribute!), has dope infographics, includes interactive components that engage and help further the story, and realtime components that drive home the point. Nice juxtaposition of the wonderfulness and sadness of the web.

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!

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 affects people’s behaviour, see the collection of case studies over at WPO stats.

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 are here!)
Part 3: React + CSS Modules = 😍

In the projects I work on, there is a requirement that CSS should never rely on client-side JavaScript to work, so the build step needs to process everything into working HTML and CSS before it is deployed. We'll be using Webpack, a build system and module bundler. In the next post we’ll focus on making the code below suitable for a real life project that renders static HTML to the browser.

Let’s begin!


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 the dominant JavaScript file type and script files are left only on legacy applications, and at that point, it's likely that tools will default to assuming that files are modules. In the meantime, we're going through a difficult adolescence between scripts and modules where mixing the two is going to be a bit painful.

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 understated flourish when used correctly.

In this post I'll cover two ways I think controlling the cursor in CSS an improve user experience.


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 with SVG and GreenSock for Complex Animation.

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 the whole thing.


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 add custom logic. For example revealing additional questions depending on how someone answers a previous question.
  • You don't get spam through Wufoo forms.
  • You can accept money through a form and Wufoo takes no cut of it.

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 all the project’s icons, kept as an external file. Target size: 50KB or less.

"Critical Icons", as it were.

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 directly on the source CSS itself.

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, Marcin has written extensively about his process for making a talk, in a series he calls The Rectangle Behind You. Some of his talks use Node.js to communicate between multiple devices, whilst most of them use HTML and a bit of JavaScript to tie things together:

I will share a lot of what I learned: from ideas to code. Maybe it will inspire you to treat your presentation as apps… and even if you don’t, I hope you will find something useful in some of the checklists and principles that helped me throughout the years.

“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 like CSS grids, CSS snap points and sticky positioning. Imagine if you could use all of them today and in a way that was as performant as native CSS features. And all you’d need to do is grab the code from GitHub.

This is the dream of Houdini. This is the future that the task force is trying to make possible.

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 all features for free for six months. Sign up here and try it out yourself!

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 a lot of my own biases as a type geek:

I don’t believe that all of human experience can be elegantly communicated via Helvetica, Times, Georgia, or San Francisco. And when I read that “typography is not about aesthetics” then I sigh deeply, heavily and come to the conclusion that 1. yes it is and 2. aesthetics is a problem for the reader. The more ugliness that is pressed upon us, the more lazy we become. Beauty, legibility, subtlety, these are the qualities that are possible with the help of web fonts and without them we are left with a dismal landscape devoid of visual grace or wit.

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.

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.

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. They were literally the first web host to do support via Twitter.
  • Having an issue you really need to explain in detail? You can submit a traditional support request.
  • Need more white glove help or don't have the time to manage servers yourself?? They have CloudTech, a team of engineeers who go above and beyond support in that they'll help migrate your sites, do security audits, do proactive monitoring, even keep software up to date for you.

I've taken advantage of all of that many times.

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 the term “content reference”, but I like it. That’s where a chunk of CSS describes the content, like this:

<p class="event__location">Washington D.C.</p>

And then we’d use that single hook to style everything in CSS:

.event__location {
  border-top: 2px solid #eee;
  font-size: 23px;
  padding: 10px;

But John suggests to break those styles up into individual modules, that would end up looking something like this perhaps, where those same classes can be used on different modules throughout every part of the codebase:

<p class="grid-12 l-grid-6 l-border-right m-border-bottom s-border-bottom marg-2-bottom">Washington D.C.</p>

As John mentions, this is not necessarily a new approach to writing CSS but it’s certainly interesting to see how another developer has changed their coding style with time and experience.

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 be coming for some of these features, but he showed me a much better way of working with it, circumventing this method entirely. We'll go over this technique so that you can get started writing scalable SVG Icon Systems in React, as well as some tricks I'd propose could work nicely, too.


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 that the pull quote should be set a bit larger, then the spacing between the paragraphs must also be increased. Therefore the paragraph spacing is directly related to the paragraph text size and therefore be considered local sizing within a component. Hence you should use ems in this case.


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 of their capabilities as a person."

A headless CMS says "let's not tie our data to any one way of doing things."


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 Babel to do it.

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 it out.


Learning to Use Google Analytics More Effectively at CodePen

Here's how most people use Google Analytics: you copy and paste the default tracking snippet into your templates. Look at the pageview data that comes in. That's all good, but that isn't the most useful analytics for many sites. Google Analytics can track just about anything. It's very flexible and very powerful. Philip Walton and I co-wrote this article to show you how to do some custom GA stuff to help you collect data you maybe didn't know you could collect and how you can look at that data in useful ways.