The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Article Archives


The WordPress Nav Walker Class: A Guided var_dump()

The following is a guest post by Scott Fennell. Scott is a WordPress theme & plugin developer in Anchorage, Alaska. Here, he customizes the default HTML output of WordPress' menu system to his liking, without damaging the useful things it already does.

There are many things about the WordPress nav menu system that I like, and a handful of things I really dislike. The things I dislike happen to trigger my pet peeves: Markup-bloat and non-SMACCS-ish class …

Windows Editors and Shells

Dave Rupert is switching to Windows in part because the web dev crowd is a little heavy on the Apple, which isn't true, generally, of the user's we build for.

But not only is he switching, he's documenting the important developer-y stuff that he's having to go through in the transition. …

Web Font Anti-Patterns

A series of articles by Bram Stein on typography, performance and modern day best-practices for using fonts. I particularly like what Bram has to say on overusing web fonts:

An­other re­cent trend is us­ing web fonts where they’re not ap­pro­pri­ate. Don’t use web fonts if you don’t need them. They’re not the right an­swer for every­thing. If you find your­self wrap­ping each let­ter or word in a span el­e­ment in or­der to style them — stop. Use SVG.

Most …

The Tragicomic History of CSS Color Names

Ever wondered why we have CSS color names like tomato, salmon and darkgoldenrod? Ars Technica on the evolution (and convolution) of the "Named Colors" spec:

Backlash ensued. The color database had been subjected to the whims of so many different programmers that it became deeply disorganized, leading some to argue it had no place in CSS. Critics attacked its naming scheme: “dark gray” was lighter than “gray”; there was a “medium violet red” but no “violet red”; …


The Snowballing of Practice

I really want to be a better musician. Someday, I will be. I know what it takes: practice.

I want to get really good. I want people to hear me play and say to themselves "hey that guy really knows how to play." I want to be able to sit down with other musicians and make things happen. I want to understand music in a lot deeper way than I do now. That's going to take a boatload of …


Accelerated Mobile Pages Project

New Google thing, aimed at unsucking the "mobile" web:

The Accelerated Mobile Pages (AMP) Project is an initiative to improve the mobile web and enhance the distribution ecosystem. If content is fast, flexible and beautiful, including compelling and effective ads, we can preserve the open web publishing model as well as the revenue streams so important to the sustainability of quality publishing.…

GreenSock MorphSVGPlugin

Greensock really knocked it out of the park with this one. You know shape morphing? It's a cool effect with loads of uses ranging from practical to artistic. SMIL can do it, but the future of that is in jeopardy. Other JavaScript libraries can do it, but they are bound by the same limitation as SMIL: they need to have the same number of points. This new Greensock plugin isn't bound by that, meaning you could morph an apple …

A List Apart Live Panel: The State of Front End Dev

I'm going to be moderating an online panel (Google Hangouts) on Wednesday, November 4, 2015 with Jina Bolton, Una Kravets, Rebecca Murphey, and Marco Rogers all about front end stuff. We held a little planning and prep session for it the other night and a lot of interesting discussion was had, so I bet y'all will enjoy it.…


Creating a CSS Sliding Background Effect

The "trick" of sliding backgrounds in CSS is not new. In fact, the first time I came across it might have been a couple of years ago on the Valio Con site (the current design doesn't have it anymore). I happened to notice it on a couple of new sites I visited today, however, and thought it would be worth sharing.…

Sponsor: An Event Apart

I love An Event Apart conferences, and I bet you would too.

It's where ideas like responsive design and mobile first were launched, and where this year's attendees are already learning how grid layout, CSS shapes, and other advanced techniques will fundamentally change…well, everything.

San Francisco is coming up November 2-4. If you can't make that, they just released the 2016 schedule with cities all over the U.S., including a first-time visit to Nashville and an extra-special Orlando event at …

Project Comet

Speaking of in-development software targeted at screen design. Also check out the videos in Khoi Vinh's post. The repeat grid demo is pretty compelling.…


Defining and Dealing with Technical Debt

We're all familiar with debt, right? It's that concept where an amount is owed from one person (the borrower) to another (the lender). We often use it to describe financial situations. For example, I borrow money from a bank. I now have debt with them in the amount of how much money they lent me (plus interest!) and expect me to repay it.

Debt isn't always about money. In fact, we run into it as front-end developers all the time …


BoxBox is a design app that’s currently under development and the designers, Kevin Lynagh and Ryan Lucas, have written a series of articles describing their thoughts that led to its creation. First, they outline the problems with the current state of applications:

We’re still primarily using legacy print design applications to create modern, responsive software interfaces. This has created a unique set of challenges that plague the UI design workflow.

Later, they delve into the serious lack of responsive design …


How to Make Charts with SVG

In my first post about making charts, I looked at methods that solely relied on CSS. I argued that this wasn’t the best option in most cases; there are just too many tricky design and development hurdles to overcome. Generally speaking, it’s best to make charts with a combination of SVG, JavaScript, and CSS.…


Paul Irish and Paul Lewis describe a way for us to think about web performance: RAIL (Response, Animation, Idle and Load). It's designed to break up each moment of a user’s experience into actions which can then be specifically optimized.

Very few of us have unlimited time to throw at optimization work, far from it, and we need criteria that help us decide what’s important to optimize (and what’s not!). When all is said is done, we want and need …

CSS Stacking Contexts

Tiffany B. Brown breaks down what stacking contexts are in a very quick and understandable way. First, what makes a new context, then:

Children of a stacking context are painted from bottom to top in the following order.

  1. Elements with a negative stack level, typically elements with z-index: -1
  2. Elements with a position value of static.
  3. Elements with a stack level of 0, typically positioned elements with a z-index value of auto.
  4. Elements with positive stack levels,

Image Diffing in CSS

A bonafide CSS trick by Franklin Ta. Position the images on top of each other at 50% opacity and inverted colors. Or, as Bennett Feely pointed out, use background-blend-mode: difference; if they are background images.…

How to undo (almost) anything with Git

A handy guide to fixing common mistakes with Git from Joshua Wehner:

One of the most useful features of any version control system is the ability to "undo" your mistakes. In Git, "undo" can mean many slightly different things.

When you make a new commit, Git stores a snapshot of your repository at that specific moment in time; later, you can use Git to go back to an earlier version of your project.…


Breaking Up Large Files Into Sections

It's a 2,000 line behemoth. It's hard to browse or easily find what you are looking for in there. What can be done? This article isn't about actually dismantling the file (although that would be a good one), it's mostly about what to do when you need to leave the file that way.…


Those Words Again

It's interesting to see how many people over time have come to the conclusion that certain seemingly-harmless words can be problematic while communicating:

Back to the :roots


I'll try to show a few ways how you can make the cascade be your friend and maybe reduce the need of overriding and thus encounter less fighting with specificity.…


Understanding JavaScript Constructors

The following is a guest post by Faraz Kelhini. Some of this stuff is out of my comfort zone, so I asked Kyle Simpson to tech check it for me. Kyle's answer (which we did during an Office Hours session) was very interesting. It was: 1) This article is technically sound. JavaScript doesn't really have classes in a traditional sense and this is the way most people shoehorn them in. 2) We may want to stop shoehorning them in.


How To Do Knockout Text

There are a couple of ways to do knockout text (text that appears cut out, such that you can see a background behind it) on the web. There is one fairly new way that has pretty decent browser support that is pretty interesting. But let's cover all the ground.…


Discussion Around Ad Blocking

The discussion has heated up with the drop of iOS 9 and its ability to run apps that block ads. That was just the spark for the conversation, as ad blocking isn't a new thing. Desktop browsers have had extensions that can block ads for a long time. There are ad blockers that work for Android. Not a new concept, just new to iOS.

Let's round up some news and opinion.…

Write SVG: a PostCSS plugin

Here’s a cool PostCSS plugin that lets us write SVG directly in CSS with the rest of our styles:

.arrow { @svg { polygon { fill: green; points: 50,100 0,0 0,100; } } }

These values will then be converted into a data URI, like so:

.arrow { background-image: url(data:image/svg+xml;utf8, }

Like Sara Soueidan mentions, I'd love to see this in Sass.

Update: David Khourshid has just made sass-svg which lets you write SVG inside a mixin.…


How I Live-Coded My Most-Hearted Pen

The following is a guest post by Ana Tudor. If you've seen Ana's work, perhaps you know that she uses mathematics and code together to make art. The finished pieces look like they take ages to make. But as I witness with my own eyes, Ana can think through what it takes to build something like this while doing it incredibly quickly. Here she'll explain to us the entire thought process in a step-by-step tutorial.

What Even is a Table?

Edd Sowden embarks on an epic accessibility journey where he tries to understand why changing the display property of a table has an impact on its semantic meaning.

A couple of notes that I found interesting here:

  • In the future we might be able to use <table role="table"> as a useful hack for overriding those style changes and preserving accessibility.
  • The accessibility tab in Chrome’s web inspector can be enabled with 'Developer Tools experiments' and turning on 'Accessibility Inspection'.

The @font-face dilemma

Chris Manning takes us through the weird journey that is custom fonts on the web. We started with the "Flash of Unstyled Text", which at first we didn't like because it was abrupt and felt janky and could even cause reflow, which didn't help readers focus. Browsers reacted, and started hiding text until the custom font was ready (various implementations did it differently). "Flash of Invisible Text" as it were. Times have changed such that FOUT is now preferable again, …


An Intro to CSS Testing with SonarQube

The following is a guest post by David Racodon. David contributes to this open source code quality tool he'll tell you all about. I hadn't heard of it until now, but I know there are lots of folks out there interested in tooling to help keep their CSS in check. This is a bit like CSS lint but formalized into an interface that handles code quality for a whole project.

Let’s talk about the Web Animations API

Dan Wilson has an intro article followed by a 5-part series all about the Web Animations API. If you were unaware, .animate() is a native thing now. I think there is a ton of interesting things about the Web Animations API, like:

  • Yet another great example of how a libraries pave the way, then browsers learn from that and get better. Then:

    These libraries can then focus on providing newer features, and the cycle can continue.

  • Under the browsers proverbial

The Importance of Context-Shifting in UX Patterns

Have you ever had a day at work where you were constantly put towards a new task as you were ramping up on the current one? It feels jarring at best, and completely frustrating and time-wasting at worst. In recent years, employers at big companies have begun to consider the cost of context-shifting—the time spent re-adjusting your brain to a different task adds up, causes frustration in employees, and thus: loses money. It follows that User Experience on a website …

Sponsor: An Event Apart

Set yourself apart. Get better at what you do today and find out how you’ll be doing your job in a year or two. An Event Apart—three days of design, code, and content for people who make websites—is where ideas like responsive design and mobile first were launched, and where this year’s attendees are already learning how grid layout, CSS shapes, and other advanced techniques will fundamentally change…well, everything. Don’t miss it!​​


Office Hours, Now With Themed Sessions

Our brand new Office Hours has been going great! We've gotten to meet some of you and help you out of some problems.

We've learned, though, that many of you just like to listen, talk shop, and don't necessarily have a problem you need help with right this second. So, we're going to start having a theme for our sessions. You can still ask any question you want, but during any question-free time, the session leader will show off and …

The State of Front End Tooling

Ashley Nolan gathered data on the the tools we're using these days as front end folk. Spoilers: Sass, Gulp, jQuery. But there's a lot of interesting and somewhat surprising data to explore in here. …


New Poll on Performance Culture

What's the web performance situation on your main project? For simplicity, but also wide coverage, I broke it down into five choices ranging from a nobody caring to everybody caring. This isn't about how well you're doing at performance, but how much it's a part of the culture of your project.…

Eliminating Roundtrips with Preconnect

Last week we wrote about prefetching and preloading but forgot to mention preconnect. Thankfully however, Ilya Grigorik has written a great post about this elusive resource hint:

Preconnect is an important tool in your optimization toolbox. As above examples illustrate, it can eliminate many costly roundtrips from your request path — in some cases reducing the request latency by hundreds and even thousands of milliseconds. That said, use it wisely: each open socket incurs costs both on the client …

“the movement away from symbolic representations”

Stephen Hay on the classic designers should learn to code maxim. He sets it up nicely:

One thing you notice when hanging hundreds of paintings and drawing by kids, especially the younger ones, is that many tend to draw symbols of what they see. The don’t draw the sun, they draw a circle with lines around it.

Then, maybe, you learn to draw:

Learning to look carefully at what’s really there. What’s really happening. Circles on a wine glass become …


Emoji Toggles!

Fun Friday thing! Natalya on CodePen made a super fun Pen.

You know how clicking a <label></label> with a for attribute that matches a checkbox input, it will toggle the input to checked or unchecked? That, combined with the :checked selector in CSS and the sibling combinator forms The Checkbox Hack, and you can use that to do all kinds of fun stuff. …

Sponsor: Treehouse

I'd like to specially thank Treehouse today for being such an awesome long-time sponsor of CSS-Tricks. Just imagine how many people they have helped over the years learn web and mobile design and development. It's damn impressive. I've watched Treehouse evolve over the years and you can see how their experience with students guides how they teach and how the site works. For instance, I love how there are different ways to learn: take a track toward a goal like …

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed