Articles by

Geoff Graham

I've really been enjoying getting acquainted with CSS Grid. The feature is starting to ship in many browsers and it looks like we'll be able to start using it in production in due time.

(more…)

Let's say you manage a WordPress site. You chose, purchase, and install a pre-made theme. Say you added a few items you came across in the WordPress plugin directory to add some advanced features to the site. This is the awesomeness that is the WordPress ecosystem. It's relatively easy for anyone with light technical chops to get a website off the ground and wrangle together something powerful without having to build everything from scratch. It just works great and your website looks wonderful.

Until it doesn't.

(more…)

Let's say you created a lovely vector illustration in Adobe Illustrator. Or you’ve used Illustrator to finesse some existing graphics. Or for literally any reason at all, you have a file open in Adobe Illustrator that you ultimately want to use on the web as SVG.

There are several different ways of getting SVG out of Illustrator, each one a bit different. Let’s take a look.

TL;DR: Exporting, like File > Export > Export As... SVG then optimizing is your best bet for the web.

(more…)

The United States general election is tomorrow! New leaders — including a new president — will be elected to office on November 8 after citizens make their voices heard by casting votes for candidates.

Where does CSS-Tricks fit into the election? This is far from being a place to discuss politics, though we do admit to the occasional dive into office politics such as helping teams have productive discussions about code and how we define our roles in the workplace.

(more…)

Something that has been on my mind lately is how we talk about the deliverables we work on as designers and developers. There are plenty of times when we want feedback on our projects and turn to our friends, co-workers, colleagues, Twitter, and all kinds of other people for their honest opinions about the quality of our work.

But this can be problematic. The feedback we get is often not what we hoped for. In some cases, it can feel personal, which is almost never what we hope for.

Managing the way we seek, request, and respond to feedback can have major implications on the end result of our work. This post will cover some tips and tricks for having those dialogues.

(more…)

If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups.

Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make sure everything looked the same in all browsers. Yes, I was one of those designers.

Web fonts have come a very long way since then and we now have tools to tweak the way fonts render in browsers. Some have been around for quite a while. I remember my mind nearly bursting with excitement when I discovered FitText.js and Lettering.js way back when.

There are still plenty of situations today where adjusting fonts is needed to ensure the best legibility despite having all these fancy tools. We're going to cover a few of those in this post along with methods for how to deal with them.

(more…)

Pixel art is one of those lost art forms that have been overshadowed by super crisp, high resolutions images. I stumbled on some pixel art while surfing around CodePen and it reminded me how awesome it is.

(more…)

It was way back in 2008 that Chris shared his "Ah-ha!" moment when working with CSS. You know, that metaphorical lightbulb that ignites when you go from not knowing what the heck CSS is to suddenly having a baseline for understanding how it works.

(more…)