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

Article Archives

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.

ShopTalk Episode 13

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

98 comments

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.

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 is requested from the server. Additionally, it judges if the user's device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage.…

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 Front End Design Conference, two web conferences running back to back in Florida this July.…

189 comments

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?
18 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.

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

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

The East Wing

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

51 comments

Content Folding

In which we interdigitate content in a responsive layout rather than just "push it to the bottom."
142 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.

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 would author it by hand and to compare the file sizes. After minifying both files, the hand-crafted CSS was about 10% smaller than the pre-processor output. But when both files were also gzipped, the pre-processor output was about 5% smaller …

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 lot. But we also talk some CSS, APIs, and a variety of other stuff while answering listener questions. This episode brought to you by Hover (the best place to buy domains) and LessMoney (a conference to make your business better).…

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 all for it, but what happens if this exact syntax isn't the one that gets standardized?…

57 comments

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.

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 in our brave new responsive world. Brought to you by Hover and LessMoney.…

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 them:

LessMoney Conference is a 2-day event where 50 people come together to learn & discuss how to become a more profitable, less stressful business owner or freelancer.

Learn from these two guys who have lots of experience with their …

51 comments

Thinking Async

Here's the rub: when you load JavaScript from a third party you should do it asynchronously. …

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

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

7 comments

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 a SurveyMonkey party and a crew of us from Wufoo / SurveyMonkey will be there hanging out. Free food and drinks. RSVP here and come.

My ShopTalk Show cohort Dave Rupert lives down there. We have no official plans but …