Grow your CSS skills. Land your dream job.

Article Archives

Judging CSS / Spotting Bad Code

In a recent Q&A article on Smashing Magazine, a question was asked about how to tell if a developer has written bad CSS. Specifically:

What are the signs that the CSS is sub-optimal, or that the developer hasn’t done a …

July 16, 2012100 comments

Some things beginners might not know about Sublime Text

Some quick hits from Alain Meier on some of the cool stuff Sublime Text 2 can do. I've been using and loving Sublime as my primary code editor for a while now. His list of A. through G. are my …

July 15, 2012

Interview on Mactuts+

I was interviewed for a brand new Mac-focused Envato blog about my 18 years as a Mac user. If you just can't get enough I was also recently interviewed on 1stwebdesigner.…

July 13, 2012

Smashing Mag CSS Q&A #2

In this one I answer questions about HTML email, baseline grids, resets, opacity issues, and more.…

July 13, 2012

UI Pattern Ideas: Email Settings

Last week I asked people to participate in some group design thinking around a specific design pattern: email settings. This was the premise:

Imagine there are three events that can happen in a web app that could trigger an email. …

July 13, 20126 comments

Beefing Up Dull Text in WebKit

While doing a bit of cross-browser poking around on CodePen, I noticed that the font for the code editors was notably duller and weaker in WebKit browsers (Safari and Chrome) than it was in Firefox or Opera. I quite …

July 11, 201237 comments

Set Text on a Circle

There isn't any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We'll explore one way to do it here. But be forewarned, we're going to use some …

July 9, 201251 comments

ShopTalk Episode 24

Dave and I were joined by David DeSandro where we talk about working in this industry, JavaScript versus CSS3, accessibility, David's various projects, and more. Thanks to Harvest (use code SHOPTALK for 50% off first month) and Environments for Humans

July 8, 2012

Media Queries, Sass 3.2, and CodeKit

Media queries are already awesome. Media queries in Sass are already awesome. Media queries in Sass 3.2 are going to be really awesome. This is how you can get CodeKit to start using it.

This isn't a brand new idea. …

July 5, 201243 comments

The Fifth Fourth

Half a decade. That's how old CSS-Tricks turns today. That means it's time for the annual state of the union as we've done on it's 1st, 2nd, 3rd, and 4th birthdays. That reminds me. Obligatory stock art …

July 4, 201259 comments

Kickstarter Funding Closing

As I type, 36 hours left on the Kickstarter project for redesigning this website. Backing the project will get you the least expensive access ever offered to the video library of it all.…

July 3, 2012

Group Design Fun: Email Settings

Let's have a little fun tackling a design problem! We've done this once before when tackled solutions for a List with Functions. Let's do it again and tackle an Email Settings area.

Imagine there are three events that can …

July 2, 2012116 comments

Reader Survey

I'd love to gather some statistical data from ya'll if you have a few seconds. It will help with the big redesign.…

June 29, 2012

ShopTalk Episode 23

Dave and I are joined by Rogie King where we talk about illustration software, Dribbble, gettin' good and more. This weeks show was sponsored by the Incontrol Conference coming up in Hawaii. (…

June 29, 2012

Video of “What We Don’t Know”

My talk of that name being presented at Minnebar in Minneapolis, Minnesota. Mmmmm.…

June 29, 2012

Podcasts I Like

I do this podcast called ShopTalk Show with Dave Rupert. If you like this blog you'll probably like that show. We bring on guests but it's mostly a listener Q&A show. I've had a few folks ask me what …

June 29, 201237 comments

How to retinafy your website

A flowchart by Thomas Fuchs.…

June 28, 2012

ShopTalk Episode 22

This week Dave and I were joined by Jessica Hische and talk a bunch about typography, clients, pricing, fun side projects, and more. Don't miss her new unreal wedding website.…

June 26, 2012

CSS Regions and Shadow DOM

One of my issues with CSS regions (we explored them a bit here) was the use of empty container divs for layout options. Razvan Caliman talks about fixing that by building out your own Shadow DOM tree. Clever, cutting …

June 26, 2012

Transition Delay Delays

A while ago we covered a cool "hover" technique by Doug Neiner where an informational popup was displayed when you hovered over a picture. The first time you hovered over, there was a delay. This was to prevent accidental or …

June 26, 201218 comments

SouthStreet

A collection of tools by Filament Group to assist with building cross-device websites. For example AjaxInclude which provides a pattern for including non-essential bits of content when the conditions are right. …

June 21, 2012

Move Website Hosting with MediaTemple SiteMover

My reasoning and experience moving hosting on MediaTemple using their SiteMover service.
June 20, 201258 comments

CodePen Beta

More big news this week: We've launched CodePen into a public beta! It's a site for building stuff from HTML, CSS and JavaScript. Perhaps for yourself to remember later, perhaps to suss out a bug or make a reduced test …

June 19, 201257 comments

Screencasting a Complete Redesign (Get Access on Kickstarter!)

Hey folks, I got some big news. Part of me going off on my own is that I plan to work harder on CSS-Tricks. Part of that is doing the biggest and best redesign ever. So I figured, why do …

June 18, 201296 comments

ShopTalk Episode 21

This week Dave and I were joined by Nicole Sullivan where we talk trolls, OOCSS, tools, and more. Thanks to the CSS Summit for sponsoring (of which all three of us will be presenting). …

June 18, 2012

Photon

An (incredible) CSS 3D Lighting Engine by Tom Giannattasio. …

June 18, 2012

Notes to an Agency Starting Their First Responsive Web Project

This past week I talked with a design agency who was about to embark upon their first responsive web design project. It sounded rather app-like. They were interested in hearing about my experiences, what to expect, what the process is …

June 16, 201228 comments

First Sighting: CSS Variables

The very first native browser implementation of CSS variables are here. Stoyan Stefanov shows them off. It will be a long while until we can use them in production but hey, onward and upward!…

June 15, 2012

New Poll: How do you order your CSS properties?

Tossed up a new poll (in the sidebar of the site, RSS folks) about how you order your CSS properties. For example:

Random .module { border: 1px solid #ccc; width: 25%; padding: 20px; position: relative; min-height: 100px; z-index: 1; border-radius:
June 15, 2012223 comments

Smashing Mag CSS Q&A

My Q&A series on Smashing Magazine lives again! This time monthly-ish and focusing on CSS.…

June 14, 2012

One, Two, or Three

That's how many CSS files should be loaded on any website.

One
  • A one-page site.
  • A fairly simple site with just a couple of pages that aren't too different.
  • A blog or blog-like site, where even if there are 1000's
June 14, 201259 comments

Crafting Minimal Circular 3D Buttons with CSS

A tutorial on how to make a three-dimensional circular button with font icons and CSS3.
June 12, 201249 comments

Just Build Websites

The most common question on ShopTalk Show is "what should I learn next?" to which we always answer "Just build websites!" Now that phrase has a home thanks to some nice folks from the Front End Design Conference. And …

June 11, 2012

Poll Results: Popularity of CSS Preprocessors

A few months ago we started this poll about CSS preprocessor syntax. It generated quite a discussion and nearly 13,000 responses. Let's wrap it up by looking at the collected data.

I put it all into this chart:


Full size
June 11, 201256 comments

Principles of writing consistent, idiomatic CSS

Nicolas Gallagher shares some advice for formatting, organization, and general choice-making for crafting good CSS (and SCSS).

You are not a human code compiler/compressor, so don't try to be one.…

June 9, 2012

Notes from my “Web Designer’s Workflow” Workshop at Interlink 2012

A bunch of notes from a workshop I just did in Vancouver, Canada at the Interlink conference.
June 7, 201239 comments

How CSS Handles Errors

Tab Atkins on how that goes down. Spoiler: it's not very complicated.…

June 5, 2012

ShopTalk Episode 20

Dave and I were joined by Wilto and we talk about the responsive images hot drama, the legitimate need and difficulty with SEO, some upcoming open source projects and a bunch more Q&A. Thanks to Mijingo and Environments for Humans

June 5, 2012

Favicons Next To External Links

A couple of techniques and food for thought around the idea of adding a favicon next to links on websites.
May 26, 201251 comments

HTML for Icon Font Usage

Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best.

  1. You want the icon to enhance a word
  2. You want the icon to stand
May 24, 201249 comments

WordPress Meet Responsive Design

Ian Stewart, Sara Cannon and I are featured in this lovely little (free) book on Responsive Web Design and WordPress. It's a part of the new Code Poet, a new thingy by Automattic full of high quality resources on WordPress …

May 22, 2012

The real conflict behind <picture> and @srcset

Jason Grigsby explains it. Essentially: Browsers use a "pre-parser" to find resources in a document it will later need. This plays a huge role in making them fast. It can't wait around for layout information, which is exactly what responsive …

May 22, 2012

Coda 2

This will be worth giving a real shot. …

May 22, 2012

ShopTalk Episode 19

Another RAPIDFIRE episode with pure question on answer action from Dave and I. Thanks to Mijingo for sponsoring this weeks show.…

May 22, 2012

Sass vs. LESS

"Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned …

May 16, 2012229 comments

Responsive Images and Web Standards at the Turning Point

Mat Marquis keeping us up to date on the responsive images hot drama. Good reminder at the end about not picking sides. …

May 15, 2012

ShopTalk Episode 18

With ol' Mean Gene Crawford! We talk about crazy clients, responsive images, health, and all kinds of other shoptalk. Thanks to Mijingo for sponsoring this episode.…

May 15, 2012

Which responsive images solution should you use?

There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit …

May 11, 201250 comments

Opt-in Typography

I recently heard Chris Eppstein give a talk (slides) about creating better stylesheets and using SASS to do it. There were a couple of surprising bits in there, one of which was about "opt-in typography." The idea was …

May 7, 201232 comments

ShopTalk Episode 17

Another RAPIDFIRE show where Dave and I answer as many listener questions as we possibly can. …

May 6, 2012

*May or may not contain any actual "CSS" or "Tricks".