This talk covers the architecture and process we use @ caring.com to manage our stylesheets and front-end design.

Font units aren’t pixels or points anymore, they’re percentages (typically for top-level baseline reset) or, more often, ems. And yet the vast majority of us still write width-based media queries in pixels

There's probably a number of ways to do this. With JavaScript, you could measure the window width and shuffle things around in the DOM. That seems heavy to me, but the browser support would be good. I'd rather lean on CSS for this kind of thing. That's what CSS is (supposed to be) for. The grid layout may hold some possibilities for us, but for this tutorial, let's use the hot-off-the-presses CSS Regions, a contribution by Adobe.

A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression.

General CSS notes, advice and guidelines

Enter the Image Sequence. An Image Sequence is exactly what it sounds like, a series of images, each representing a single frame of an animation. Usually these will be exported from a high-level application like Adobe After Effects. For memory and performance reasons, these images are usually combined into a single Sprite Sheet. You may have heard of this technique, because we've been using it for decades.

The “px” unit in CSS doesn't really have anything to do with screen pixels, despite the poorly chosen name. It's actually an non-linear angular measurement. The formulæ to convert between radians and px are as follows:

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

The Responsive grid generator

As the over-heated CSS vendor prefix debate rages, I can’t help but note the mounting pile of logical fallacies and downright poor reasoning being deployed. Some context is in order.

Selector specificity

This was inspired by, and based on @lensco's excellent Simple Responsive Design Test Page. It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices. After getting such a positive response to my original post, I thought I'd expand on it a little. Since people are obviously targeting different device screen sizes with their projects, the form below now lets you generate a custom bookmarklet that displays only those device sizes you're interested in.

I’ve been recently working on optimizing performance of a so-called one-page web app. The application was highly dynamic, interactive, and was heavily stuffed with new CSS3 goodness. I’m not talking just border-radius and gradients. It was a full stack of shadows, gradients, transforms, sprinkled with transitions, smooth half-transparent colors, clever pseudo-element -based CSS tricks, and experimental CSS features.

The most exciting engineering challenges lie on the boundary of theory and the unknown. Not so unknown that they're hopeless, but not enough theory to predict the results of our decisions. Systems at this boundary often rely on emergent behavior — high-level effects that arise indirectly from low-level interactions.

For the best HTML e-mail delivery results, CSS should be inline. This is a huge pain and a simple newsletter becomes un-managable very quickly. This script is our solution.

CSS Selectors are parsed by browser engines right to left. So they first find the children and then check their parents to see if they match the rest of the parts of the rule.

When brainstorming alternatives, we found what seemed to be an obvious solution: the image Data URI scheme. It works in all major browsers (except IE6 and IE7), and it solves our problem of too many HTTP calls. The code looks like this:

The absence of a DOCTYPE is a crime punishable by death. You may have relied on the following DOCTYPE in the past, but it's important to know that this is now being superceded by a leaner and meaner snippet.

It indexes all the elements and their classes, and then--class by class--it removes one, and times how long it takes to scroll the page. Classes that save a considerable amount of time when removed indicate problem areas.

This little book is to aid a shared understanding of front-end development best practice at PUP.

It's to help us deliver high quality content that works better, reaches more people - not only in today's browsers & devices, but in tomorrows.

On one hand you want to keep the file dimensions as small as possible to take best advantage of the tiling effect. However, when you notice a distinctive feature — for instance, a knot in some woodgrain — repeating at regular intervals, it really breaks the illusion of organic randomness.

Maybe we borrow some ideas from cicadas to break that pattern?

Nonetheless, I wanted to document every browser-specific css selector and style attribute hack I've seen. Plus there's no way to provide stylesheets to only Safari, I believe.

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

Since the beginning of the 'webfont revolution' we've relied on somewhat hacky @font-face declarations to get webfonts loading cross-browser. Could there be a better way? One that's clear and compatible with future browsers?

Just because you didn’t get to go to that awesome conference doesn’t mean that you can’t still watch the lectures! Each weekend, we’ll feature a recommended web development lecture on Nettuts+.
This presentation, by Stoyan Stefanov and Nicole Sullivan, primarily details the huge performance benefits to using Object-Oriented CSS, as well as a crop of other common CSS hurdles.

So you learned the base id, class, and descendant selectors – and then called it a day? If so, you’re missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory.

I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short.

At the prompting of an inquiry from a respected software vendor, I asked The Twitters for pointers to “canonical” lists of vendor-prefixed properties, values, and selectors. Here’s what the crowd sourced at me:

This is a collection of buttons that show what is possible using CSS3. They look best in WebKit browsers and appear quite plain in IE.

Inspired by a shot from Jonno Riekwel, I knocked up a quick Progress Bar in Photoshop on a friday afternoon before heading to the pub. Then a couple of people suggested implementing it with CSS.

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.

When you are coding up a brand new site, I think this is a pretty efficient workflow for how to handle CSS Sprites.

A few weeks ago, the insanely talented people at Information Architects released a new, semi-responsive design, augmenting their already lovely site with a flexible grid, and some media queries to optimize their design for smaller resolutions. On the higher end of the resolution spectrum, they fell back to an em-based, fixed-width layout. Given the combination of flexible and fixed-width layouts, I felt it was a great example of a partially responsive design, and I said as much on Twitter.

If you wanted to ensure the box kissed the edges of the parent, but still use a 100% width declaration, you’d have to set the child divs width to 476px. But now we’ve run into a problem, and that’s fluid width design. Let’s say instead of the parent being 500px, you use 72%. Now what do you set the inner divs width to be to make sure it kisses the edges? There is no answer with the current box model. The percentages mixed with pixel values just don’t mix well. Setting the inner divs width to 95.2% will work when the parent just happens to be exactly 500px, but if it grows wider, as happens in fluid width design, the div will be too narrow, and if the parent grows narrower, the inner div will be too wide and break out of the parent.

There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

Great introduction to html and css for newcomers.

Simple sliding doors button techniques done in CSS for scalable buttons.

Clearing floats with overflow:auto on the container div.

Lightbox using pure HTML and CSS, no Javascript required. Add Webkit transitions?

compress your javascript and css files.

Quick trick to render iPhone specific style.