Get a free trial // Grow your CSS skills // Land your dream job

Article Archives


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


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?

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


Content Folding

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

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


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


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


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 …


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


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 …

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 to get it done and done fairly, but also fun and darn interesting. Three quick things that stood out to me while judging:

  • I think I only saw one or two that didn't use jQuery
  • Maybe only a handful that

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.

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.

Responsive Navigation Patterns

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

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 a good teacher, and be good on camera. You also need to live or be willing to move to Orlando, Florida. If that's you, it's a sweet gig.…


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.

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

I can’t design in the browser

Sarah Parmenter with some good honest thoughts about the popular idea of designing in the browser.

I’ve tried, goodness knows I’ve tried, but my designs end up suffering, looking boxy, bland and uninspiring.

Not that I'm that great of a designer but I feel the same way. I have to start in Photoshop to get anything decent looking. I try to get out it as soon as possible, but once I'm into the HTML/CSS my brain is in a more …

ShopTalk Episode 6

This week Dave and I were joined by Zoey Gillenwater and we chat about print stylesheets, CSS formatting, icon fonts, spec mysteries, and much more.…

BarCamp Tour 2012

I'll be representin' Wufoo at a bunch of BarCamps again this year. Super fun. We need to figure out exactly what (U.S.) cities we are going to go to this year, so if you are organizing one, hit us up at the form on the site.…

one comment

ShopTalk Episode 5

Jeffrey Way, Dave and I talk shop about some newly released projects, -webkit-gate, and our weekly staple of Q&A.…


Musings on Preprocessing

I've been using Sass for pretty much everything I do recently. Here's some musings on the journey. From hold-ups, to trip-ups, to turn-offs. From apps and teams to workflows and syntax.…

A proposal to drop browser vendor prefixes

Interesting idea by Felipe G on using a new at-rule, @-vendor-unlock, to tell the browser to use it's experimental implementation of any particular property, rather than using a vendor prefix on that property. Unfortunately at this point, even if you could get all the browsers on board, you'd need to use this and vendor prefixes to get deep support, which makes the problem worse. What we really need is for all browsers to implement auto-updating so eventually "supporting older …

Digging Into WordPress 3.3

Digging Into WordPress (the book) is now updated to v3.3. Includes new chapters specially on what's new in 3.2 and 3.3, all the rest of the chapters tightened up and refreshed, better internal hyperlinking (in the PDF), and more. It's a free update (PDF) to all previous buyers. New print copies are on order and will be available soon. …

ShopTalk Episode 4

Dave, Jonathan Longnecker, Nate Croft and I talk shop. Topics include website building apps, where to start designing, when not to design for modern browsers, and more.

Sponsored by LessAccounting. …


New Poll: In The Next 10 Years, Will We See CSS Competitor?

What do you think folks? Is a new language going to come along in the next ten years that deals with layout / style / design and unseat CSS? Or at least give it a run for its money?

You should vote not based on if there will be any attempt at it, which there certainly will be and already has. But instead if you think one of those attempts will actually make it into native support by a browser …


Star Ratings With Very Little CSS

Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the UX part of it done with very little code and no JavaScript.…

Real-World CSS

A very serious not at all tongue-in-cheek gallery of CSS3 techniques that poo-poos the fancy in favor of the practical.…

Better Box Sizing

Paul Irish suggests the universal selector (*) to apply border-box box-sizing to every element. I've been wanting to try this forever because this box model is, in my opinion, just better. Imagine: elements with percentage widths and pixel padding without worry.…

Firefox 10 now a stable release. It's notable because it's the first release with it's own built in developer tools (video overview). It's all HTML/CSS for now (not a Firebug replacement) but they are nicely designed and a great first step for a product that really should be in-house. Also, CSS 3D transforms! After you've upgraded, check out this demo using -moz-element and the just-now-supported 3D transforms.…


Poll Results: Internet Connection Speed

In this latest poll, I asked people to test their own internet connection speed then vote in the poll based on their result. The speed choices ranged from (what I would consider) blazingly fast, to mediocre, to nearly unusably slow. I would have guessed a bell curve, with most people having mediocre speeds and just a few on the edges of extreme fast/slow. We didn't get that at all. …

Twitter Bootstrap 2.0

If your web app doesn't look or work as well as Bootstrap does out of the box, it's time to have a pretty serious discussion with your team about why.…

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed