Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

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.…

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 edge stuff. You can see it work in Chrome Canary.…

18 comments

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 fly-by mouse overs, as opposed to intentionally focusing on a particular picture. Subsequent hovers showed the popup immediately. The idea being that you're already in that exploratory mode.

Doug used jQuery for the animations and some fancy dancing to keep …

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. …

57 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 case, or to show off some cool idea you have. It's all about education and inspiration.…

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). …

Photon

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

28 comments

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 like or could be like, what the deliverables should be, things to watch out for, and things like that.

This is what we talked about:…

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!…

Smashing Mag CSS Q&A

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

59 comments

One, Two, or Three

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

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 seriously: learn what you need to build things, not what you think you "should."…

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.…

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 for sponsoring. …

51 comments

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.
49 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.…

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 development.…

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 images need to make a smart call.…

Coda 2

This will be worth giving a real shot. …

ShopTalk Episode 19

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

229 comments

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 from whether or not preprocessing is a good idea to which one language is best. Let's do this thing.

Really short answer: Sass

Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are …

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.…

50 comments

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 differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques.

The spreadsheet has the data, but let's digest it through thinking about it through the lens of practical questions.…

32 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 that instead of setting global styles for typographic elements like p, ul, ol, h1, h2, etc that you would instead apply those styles as a class, perhaps .text. …

ShopTalk Episode 17

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

66 comments

Autofill City & State from Zip Code with Ziptastic

Most address fields on web forms ask for city, state, and zip code (or city and post code, outside of the US). But as us nerds often lament, city and state are redundant with zip code. Or at least they can be inferred from a correctly entered zip code. That's the kind of thing computers are good at. What we need is a proper API to cough up that information for us on demand. …

75 comments

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 this writing). And not behind a flag, it just works. Production usage isn't quite there, but it will be soon enough.…

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.…

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 I made one.…

39 comments

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. …

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 Harvest. …

161 comments

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.
38 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 look at a couple alternative solutions.…

48 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.

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 move. Short answer: yes.

The only thing I'd suggest they do differently is use Compass. I've also been involved with big SASS rewrites, none of which used Compass, and I highly regret it as: 1) inconsistent mixins across projects blows …

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.…

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. …

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.…

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.…

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.…

35 comments

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.