Grow your CSS skills. Land your dream job.

Article Archives

Viewport Sized Typography

CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. It is relevant to bring up now, because it’s shipping in Chrome 20 (canary at the time of …

April 30, 201266 comments

ShopTalk Episode 16

Dave and I were joined by Ian Stewart, a Theme Wrangler at Automattic for WordPress.com (he’s probably thinking about WordPress themes right this very minute). We talked about WordPress multisite, training clients in WordPress, database syncing, team productivity, and more.…

April 29, 2012

Conditional Content via CSS Media Queries

Jeremy Keith has a great article on his journey to allowing JavaScript to load in content based on the currently active media query. This allows you to keep media queries only in the CSS (DRY!).

The article was sans-demo, so …

April 29, 2012

Transitions Only After Page Load

If you’ve ever used CSS transitions on structural elements on your page, you may have noticed a case where you see that transition happen when the page loads and is laying itself out.

Quick video of the issue I was …

April 27, 201236 comments

ShopTalk Episode 15

Dave and I were joined by Happy Cog front enders Jenn Lukas and Allison Wagner and we talk about coding styles, memorization, and the classic “what should we learn next?” This episode was sponsored by the online time tracking tool …

April 27, 2012

Fighting the Space Between Inline Block Elements

A series of inline-block elements with “normal” HTML formatting result in spaces between them when set on the same line. Here’s some techniques for fighting against the gap.

April 21, 2012149 comments

Triangle With Shadow

You probably already know you can make triangles with CSS. But what if you want to put a shadow behind it? Unfortunately the classic border trick doesn’t change the shape of the element, it’s just a visual trick. Let’s …

April 19, 201239 comments

Saving the Day with Scoped CSS

One little known feature of HTML5 is Scoped CSS. It’s an attribute for style blocks that may change the way we tackle certain styling challenges in the future.

April 18, 201246 comments

Refactoring >14,000 lines of CSS

Eugene Fedorenko talks about how Beanstalk refactored the whole app to use SASS. I’m sure a lot of folks are in this situation right now. You want to use SASS, but you have a big app and it’s a big …

April 17, 2012

Fred Boyle’s Code Challenge

Between now and the end of May 2012, code a small project using a language or environment that’s new to you or that you’ve only casually messed around with.…

April 16, 2012

Automatic responsive images in WordPress

The main trouble with the existing fancy methods for serving images responsively is manually generating the images and syntax needed to utilize it. Keir Whitaker show us how to use WordPress to handle all that hard stuff for us. …

April 13, 2012

The CSS3 Experience

Soak in a little An Event Apart without leaving your house. Dan Cederholm (you know, the other banjo playing CSS guy) with an hour talk on responsible and enhancement-based CSS3 use.…

April 13, 2012

ShopTalk Episode 14

Another RAPIDFIRE episode this week loaded with all Q&A. If you like the guest episodes, don’t worry, we have plenty coming up.…

April 12, 2012

Updated: The Current State of HTML5 Forms

It’s been about a year, so I redesigned and updated all the support information here. Added Android. Lots more green, but we’re still quite a ways off from using features like validation without fallbacks.…

April 11, 2012

On :target

The :target pseudo selector in CSS is both pretty cool and pretty limited in what it can do. In this article we discuss some things it can be helpful with, its limitations, and some work arounds.

April 9, 201235 comments

ShopTalk Episode 13

Rapidfire show! No guest, no news, not hot drama, just all question on answer action.…

April 8, 2012

On Responsive Images

There are three ways we can go about dealing with responsive <img>s : 1) a new format 2) a new syntax 3) rely on existing hacks.

April 6, 201297 comments

The Big List of Flat Icons & Icon Fonts

There are many such roundups. This one is mine.

April 3, 201251 comments

Foresight.js

Speaking of bandwidth media queries, this project by Adam D. Bradley looks promising:

Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image …

April 3, 2012

ShopTalk Episode 12

This week Dave and I are joined by Dave’s co-workers and amigo’s Trent Walton and Reagan Ray. We talk about cutting edge front end stuff, client services, topics for a graduate thesis, and more. Brought to you by LessMoney and …

April 2, 2012

The JavaScript “Ah ha!” Moment

If you feel like you have a decent understanding of JavaScript, what was your “Ah ha!” moment? Or are you still waiting for it?

March 30, 2012189 comments

Bandwidth Media Queries

They don’t exist. But wouldn’t that be nice?

Take for instance the markup being discussed for the
element:

<picture alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

<!-- Default -->
<source src="small.jpg">

<!-- Alternative if media …

March 28, 201292 comments

Upcoming Speaking

Summer edition!

March 31 : BarCamp Harrisburg (Pennsylvania)
April 7 : MinneBar (Minneapolis, Minnesota)
April 14 : BarCamp Orlando (Florida)
April 26-27 : Front-Trends (Warsaw, Poland)
April 30-May 4 : Future Insights Live (Las Vegas, Nevada)
June 6-7 : Interlink

March 28, 20128 comments

Minimum Paragraph Widths in Fluid Layouts

In fluid width environments, the text that wraps around floated elements can get awkwardly narrow and trap bits of text orphaned away from the rest of the paragraph. This article explains that problem in more details and offers a few solutions.

March 26, 201218 comments

ShopTalk Episode 11

This week Dave and I were joined by Jina Bolton. We talked all kinds of shop, touching on SASS usage and the new upcoming website, semantics, learning, workflow, and more. This weeks show brought to you by LessMoney and Hover

March 26, 2012

Off Canvas

A super hot responsive web design pattern by Jason Weaver. Don’t forget about the ol x-axis while designing for small screens. (via Paul Irish)…

March 24, 2012

The East Wing

I got to be on The East Wing podcast with Tim Smith.…

March 23, 2012

Content Folding

In which we interdigitate content in a responsive layout rather than just “push it to the bottom.”

March 23, 201250 comments

New Poll: Your Preferred CSS Preprocessor Syntax

All the popular ones are in there as options, as well as an “other” option in case you use something else (please share in comments). Or, vote “never tried,” “don’t like any of ‘em,” and “no preference” accordingly.

March 19, 2012143 comments

Maintaining CSS Style States using “Infinite” Transition Delays

Clever idea by Joel Besada on using instant transition timing with really long transition delays (999999s) to maintain visual states in CSS. …

March 19, 2012

Poll Results: Will There Be a CSS Competitor?

In this last poll, we asked:

In the next 10 years, will there be a serious alternative to CSS?

Of over 9,000 votes so far, the majority are of the opinion that there will not be:

Of course, it’s …

March 17, 201237 comments

About HTML semantics and front-end architecture

Good read from Nicolas Gallagher. Among the gems:

Class names cannot be “unsemantic”. Whatever names are being used: they have meaning, they have purpose.

When Twitter Bootstrap first came out, I rewrote the compiled CSS to better reflect how I …

March 16, 2012

Shop Talk Episode 10

Dave and I talk shop with Doug Neiner, whom I consider one of the smartest people I know. Doug is on the jQuery team and works for a company based around jQuery, so the topic of JavaScript comes up a …

March 15, 2012

Picturefill

Polyfill hero Scott Jehl has a new one for the theoretical <picture> element. The idea behind this new element is to solve the very real need to serve images of the appropriate size based on the browser window size. I’m …

March 15, 2012

How to Create Stunning Effects With 165 Media Queries or Less!

One bizarre trend emerging in this new RWD era is desktop-browsing web designers resizing their browsers to watch the break-points change the layout. The average user never sits at their desk repetitively shrinking and expanding the browser window like a mad scientist. Yup, we’re all strange.

March 15, 201257 comments

Downlevel Hidden / Downlevel Revealed

Just gonna clear up a little thing here that I’ve seen people struggle with a few times. There are two different kinds of conditional comments for Internet Explorer that have slightly different syntaxes: Downlevel Hidden and Downlevel Revealed (microsoft

March 13, 201221 comments

ShopTalk Episode 9

Dave and I were joined by Ethan Marcotte and I bet you can guess what we talked about. That’s right ShopTalkers, it’s a full episode of responsive web design goodness, from the basics to the newer challenges developers are facing …

March 13, 2012

LessMoney

I love Allan and Steve from LessEverything. I was just recently at my third trip to LessConf, which is a really fun web startup oriented conference. The fellas are at it again already, throwing a new conference called LessMoney. From …

March 8, 2012

Thinking Async

Here’s the rub: when you load JavaScript from a third party you should do it asynchronously. You might want to load your own scripts asynchronously too, but for this article let’s focus on third parties.

There are two reasons for …

March 7, 201248 comments

The Industry Podcast

I joined the gentlemen from the new blog and podcast The Industry for a chat about loads of different web industry related stuff.…

March 7, 2012

The Non-Breaking Space Show

Remember those three fellas from the last ShopTalk Show? Those guys are from the new(ish) podcast The Non-Breaking Space Show. Dave and I join them in this episode to talk about preprocessors, Git, and other stuff.…

March 6, 2012

SXSW 2012

I’m headed down to Austin in a few days here for my 2nd SXSW. Hope to see some of you folks there. I’m trying not too have much of a plan, but here’s a few things I’m doing:

There is …

March 6, 20127 comments

ShopTalk Episode 8

This week Dave and I were joined by Christopher Schmitt, Chris Enns, and Dave McFarland, the fellas behind The Non-Breaking Space Show to do our second Cross-Over show. Brought to you by Hover and LessMoney.…

March 5, 2012

CSS Off Results

This year’s CSS Off results are in. The Unmatched Style folks have listed out the top 25 entries and will be emailing everyone their results shortly. Congrats to all who entered. It was quite a load on all the judges …

February 29, 2012

Designing for Decoder Glasses, Print and Web

Michael Buchmiller of BlueHornet walks us through the process of designing a poster for tinted decoder glasses, and then bringing the same idea with a similar interaction to the web with the AnythingZoomer.

February 29, 201224 comments

Places It’s Tempting To Use Display: None; But Don’t

Help yourself be better at accessibility by using better hiding techniques that don’t use display: none;. This involves some tricks like using more clever class names, being fancier with how you deal with JavaScript library animations, or avoiding hiding all together.

February 27, 201280 comments

Responsive Navigation Patterns

Brad Frost shows examples and covers the various techniques/pros/cons for handling navigation on small screens.…

February 25, 2012

Work for Treehouse

The main site sponsor around here, Treehouse, is hiring new teachers for creating new learning videos. It’s not a job for just anybody. You need to know your stuff (PHP & WordPress, Front-End Design, Android, or Business & Marketing), be …

February 24, 2012

How To Create a Notebook Design with CSS

This tutorial, a guest post by young developer Allen Lawson, will show you how to create a notebook themed website using only CSS.

February 23, 201287 comments

My Slides from InControl 2012: What We Don’t Know

I know it’s weird to go through slides of a presentation outside of the context of a real talk (and pales in comparison to the experience of being there) but nonetheless, there may be bits of goodness you can extract …

February 22, 201239 comments

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