Tags: css

539

sparkline

Building Resizeable Components with Relative CSS Units | CSS-Tricks

A thorough and compelling demonstration of why it makes sense to size all the properties of your components—font size, margins, borders, etc.—in ems or rems rather than mixing in pixels for some properties. It’s all about the scalability, innit?

Grid layout is a much needed step-change for CSS | Matt Hinchliffe, Front-End Developer

This is not only a really good explanation of CSS grid layout, it’s also a practical walkthrough, recreating the layout of the Financial Times. I think if I followed along at home, writing the markup and CSS outlined here, it would me to get this stuff “clicking” in my brain.

6 web layout myths busted | Creative Bloq

Jen tackles six aspects of web design that were true …but no longer.

  1. Everything must be a floating bar of soap
  2. Rectangles; only rectangles
  3. We can’t control the fold
  4. 12 columns is best
  5. We have to use a layout framework
  6. We are stuck in a rut because of RWD

Web Platform Feature Availability

Here’s a handy graph from Paul:

Powered by data from caniuse.com and StatCounter, this page indicates the percentage of users who have a browser that natively supports various web platform features.

Proposal to CSSWG, Sept 2016 // Speaker Deck

Jen has some ideas for a new CSS Region spec to turbo-boost Grid. I’m still trying to wrap my head around it, but in the meantime, if you have feedback on this, please let her know.

Why we use progressive enhancement to build GOV.UK | Technology at GDS

This is a terrific read that gets to the heart of why progressive enhancement is such a solid methodology: progressive enhancement improves resilience.

Meeting our many users’ needs is number one on our list of design principles. We can’t know every different setup a person might use while building our systems, but we can build them in a way that gives all of our users the greatest chance of success. Progressive enhancement lets us do this.

The article is full of great insights from a very large-scale web project.

`font-display` for the Masses | CSS-Tricks

The font-display property is landing in browsers, and this is a great introduction to using it:

If you don’t know which option to use, then go with swap. Not only does it provide an optimal balance between custom fonts and accessibility of content, it provides the same font loading behavior that we’ve relied on JavaScript for. If you have fonts on the page that you’d like to have load, but could ultimately do without, consider going with fallback or optional when using font-display.

Until it’s more widely supported, you can continue to use a JavaScript solution, but even then you can feature detect first:

if ("fontDisplay" in document.body.style === false) {
  /* JavaScript font loading logic goes here. */
}

The web is not print and other stories

Rachel takes a look back at twenty years of building on the web. Her conclusion: we’ve internalised constraints that are no longer relevant, and that’s holding us back from exploring new design possibilities:

Somehow the tables have turned. As the web moves on, as we get CSS that gives us the ability to implement designs impossible a few years ago, the web looks more and more like something we could have build with rudimentary CSS for layout. We’ve settled on our constraints and we are staying there, defined by not being print.

Create awesome styles- Nucleus - Living style guide generator

Another style guide generator that parses comments in CSS.

Using Feature Queries in CSS ★ Mozilla Hacks – the Web developer blog

A thorough explanation of @supports from Jen, with plenty of smart strategies for using it in your CSS today.

Refactoring CSS Without Losing Your Mind // Speaker Deck

A talk from Harry on the whys and hows of refactoring CSS. He mentions the all: initial declaration, which I don’t think I’ve come across before.

CSS Writing Mode

Some nifty layout tricks using the writing-mode property in CSS.

Inline SVG spriting and currentColor | Charlotte Jackson, Front-end developer

The currentColor value in CSS comes in very handy when you’ve got an SVG sprite and you want icons to inherit their colour from the surrounding text.

Horizontal lines around centered content

Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.

CSS only scroll indicator

This is witchcraft. I’ve been deconstructing the CSS to figure out how this works and it’s really clever.

(Hint: try commenting out some of the CSS and see what happens.)

Web Design in 4 minutes

This is a wonderful way of progressively explaining the layered approach to building for the web that Charlotte was teaching in her Codebar workshop.

A Code Review, Or Yet Another Reason to Love the Web | Brad Frost

I love this back and forth between Brad and Jonathon. I think they’ve both got some good ideas:

  • I agree with Brad that you can start marking up these kind of patterns before you’ve got visual designs.
  • I agree with Jonathon that it’s often better to have a generic wrapper element to avoid making assumptions about which elements will be used.

Teaching web development to design students (Phil Gyford’s website)

Phil’s write-up of teaching web development to beginners is immensely valuable in the run-up to the Codebar workshop that Charlotte is running this weekend. This bit gave both us a real “a-ha!” moment:

It only occurred to me at the end that I should have encouraged the students to try and fix each other’s bugs. If anyone had problems I’d go round and help people and often it’d be a little typo somewhere. Helping each other would acknowledge that this is entirely normal and that a second pair of eyes is often all that’s needed.

The best of Google I/O 2016 | Andrew Betts

Andrew picks out his favourite bits from this year’s Google I/O, covering web payments, CSS containment, and—of course—Service Workers and progressive web apps, although he does note (and I concur):

I wish Google would focus as much attention on ‘normal’ sites that perform navigations as they do on so called ‘app-shell’ (which is just a new name for single-page apps, as far as I can tell), but then many people will be building SPAs and these recipes will make those apps fly. In news publishing we seem to flip flop between traditional page navigations and SPAs, but I’ve never found a SPA news site (or a native app) that I really like more than a normal website. Maybe a really good progressive web app will change that. But I’m not convinced.

Still, as he says:

All this really just underscores how flexible ServiceWorker is and that with it we can disagree on what the right solution is, but we can all get what we want anyway.

CSS Diner - Where we feast on CSS Selectors!

Here’s a fun game to help practice those CSS selectors.

CSS Containment Module Level 3

A way of declaring the scope of an element’s layout and paint styles, which browsers can then use as a hint to optimise performance. It’s already shipping in Chrome and Opera.

The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today – Smashing Magazine

An attempt to crack the element query nut. It relies on executing JavaScript at runtime so it doesn’t feel production-ready to me unless you’re already relying on JavaScript to render or style your content. Still, there’s a lot of good thinking has gone into the syntax—it’s worth investigating for that reason alone.

How Will Web Components Change CSS Architecture? - Snook.ca

Depending on how you’re currently structuring your CSS and class attributes, web components might not make all that much of a difference to your workflow.

Typography Handbook

You can think of this as a short book or a long article, but either way it’s a handy overview of typography on the web:

A concise, referential guide on best web typographic practices.

Mind you, I take issue with this assertion:

Establishing a vertical rhythm is simple.

The :target Trick

An alternative to using the :checked pseudo-class for sprinkling in some behaviour—you can use the :target pseudo-class. It might mess up the browser history though.

Jeremy Keith | < A > | HTML Special, CSS Day on Vimeo

The video of my talk on hypertext at the HTML Special before CSS Day. I’m pretty with my delivery here. There’s a bit of Q&A afterwards as well.

Completely CSS: Progressively Collapsing Navigation | Kenan Yusuf

One way of implementing the growing/shrinking navigation pattern—an alternative to just shoving everything behind a hamburger icon.

MarkSheet: a free HTML and CSS tutorial - Free tutorial to learn HTML and CSS

This looks like a great resource for beginners looking to learn HTML and CSS.

The Languages Which Almost Were CSS - Eager Blog

A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!

Enhancing Optimistically | Filament Group, Inc., Boston, MA

I love the thinking that Scott puts into all aspects of building on the web. Here, he outlines a really robust approach to cutting the mustard for progressive enhancement.

Intro to Flexbox

The slides from Arelia’s flexbox talk.

You Don’t Need JavaScript for That!

A few common patterns—tooltips, fly-out menus, and toggles—that you can achieve with CSS.

Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders | Lea Verou

You’re supposed to be able to create two-handled sliders with input type="range" but the browser support isn’t there yet. In the meantime, Lea has created a nice lightweight polyfill.

marmelab/universal.css: The only CSS you will ever need

Ensure that your class names never go out of sync with your style declarations with this one simple trick:

Take any CSS rule you want to apply, replace : by -, and dots by -dot-, and you get the name of the corresponding universal css classname.

The only thing missing is immutability, so I would suggest also putting !important after each declaration in the CSS. Voila! No more specificity battles.

Flex Layout Attribute (FLA)

The markup here (with proprietary inline attributes for styling) is a terrible idea but the demo that accompanies is great at showing how flexbox works …I just wish it didn’t try to abstract away the CSS. This is so close to being a really good learning tool for flexbox.

CSS When/Else Rules

A really interesting proposal for more logic constructs in CSS: when/else conditions. At first glance, this looks like it would complicate the language (and one of the most powerful features of CSS is its simplicity), but when you dig a bit deeper you realise that there’s nothing new enabled by this extra syntax—it actually simplifies what’s already possible.

Semantic CSS - Snook.ca

Snook has been on a roll lately, sharing lots of great insights into front-end development. This is a particularly astute post about that perennial issue of naming things.

Developing Dependency Awareness – Smashing Magazine

A typically superb article by Aaron. Here, he breaks down a resilient approach to building for the web by examining the multiple ways you could add a button to a page. There’s a larger lesson here too:

We don’t control where our web-based products go or how our users access them. All we can do is imagine as many less-than-perfect scenarios as possible and do our best to ensure our creations will continue to do what they’re supposed to do. One of the easiest ways to do that is to be aware of and limit our dependencies.

The Sonos Pattern Library — zdfs

There’s a lot I disagree with here. I don’t think this pattern library process is very elegant or scalable, and it certainly wouldn’t work for me.

But I’m still linking to it. Why? Because I think it’s absolutely wonderful that people share their processes like this. It doesn’t matter one whit whether or not it would work for me.

Frontend development may have gotten a lot more complicated, but the simple premise of sharing what you’ve learned hasn’t.

I couldn’t agree more!

Let’s Write Beautiful CSS Comments | Sparkbox

If you don’t comment your CSS, you’ll confuse other people looking at your code, and, more embarrassingly, you’ll confuse future you. If you do comment CSS, everybody will be less confused, and things will be accidentally broken less often. You will be popular and generally well-liked, and people will remember to send you cards on your birthday. Comment more.

Some good advice here on how to write better comments in CSS.

Sign O’ The Times - original video in pure CSS

This is quite wonderful: a recreation of the video for Prince’s Sign O’ The Times made entirely with HTML and CSS.

Flexbox Patterns

Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.

A Complete Guide to CSS Grid Layout | Chris House

This guide to CSS grid layout is the perfect companion piece to Rachel’s Grid by Example.

Layout Demos by Jen Simmons

If you want to keep up to date with all the coolest stuff landing in CSS, I recommend bookmarking this ever-changing page.

Interview with Håkon Wium Lie — net magazine — Medium

A trip down memory lane with Håkon.

It’s not like the web has been done. This is history in the making. The web is only 25 years old. It’s going to be around for a long time, so there are lots of things to develop.

Interactive Form

I quite like this step-by-step interface for a form, all cleverly handled with the :focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.

Aligning text smartly in CSS

Here’s a clever way to get text centred when it’s short, but left-aligned when it wraps.

CSS Pseudo // Speaker Deck

Everything you ever wanted to know about CSS pseudo-classes (and pseudo-elements).

Swiss in CSS

Classic Swiss designs recreated in CSS (with added animation).

Should I use Grid or Flexbox?

Rachel compares two CSS layout modules; Grid and Flexbox. This distinction is crucial:

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

CSS and Scalability

Some good thoughts in here about writing scalable CSS …although the finger-pointing at sites (that are shipping at scale) reminds me a bit of that quote by copywriter Paul Butterworth: “Where the heck were you when the page was blank?”

PX, EM or REM Media Queries? by Zell Liew

Just recently on a Clearleft project, some of us were discussing whether there was a reason not to use rems instead of ems for media queries. Apart from one older browser implementation difference, we couldn’t come up with much.

Some in-depth research here supports the use of em values for media queries. Very good to know.

CSS Flexbox Is Entirely Logical (Almost) / Paul Robert Lloyd

Paul is digging deep into flexbox and finding it particularly useful for internationalisation …but there are still some gotchas.

ECSS

Enduring CSS (not int the sense of “put up with” but in the sense of “long-lasting”) is a new book by Ben Frain all about writing and maintaining modular reusable CSS.

You can read the whole thing for free online or buy an eBook.

Styling Broken Images

This is really, really clever. You can’t use generated content (:before and :after) on replaced content. The img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using :before and :after).

Use rems for global sizing, use ems for local sizing | Clagnut

In this extract from his forthcoming book, Richard looks at when to use ems, when to use rems …and when to use ch (no, me neither).

Flexbox Defense

If Flexbox Froggy was too easy for you, take it to the next level with this tower defence game.

Walmart Web Style Guide

A pattern library of Walmart’s front-end code.

How to lint your Sass/CSS properly with Stylelint — Creative Nightly

Linting CSS seems like a very good idea, especially if you’re not the only one writing the CSS. This guide is going to come in very handy when I give it a try.

Frontend Design | Brad Frost

Well, this pretty much sums up the front-end team at Clearleft:

Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface.

I’ve often said that at Clearleft, development is always in the service of design. And like Brad, I often find myself defining that work by what it isn’t:

They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios

They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons.

They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging.

They understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc.

16 CSS Lessons via Post-it® Notes

’Sfunny—I was just talking about how important it is to keep document ways of teaching the basics of CSS, then I come across this delightful series of explanations.

(I hope Kaylan posts this to her own site as well as Ev’s blog.)

Teaching the order of margins in CSS | Charlotte Jackson, Front-end developer

Y’know, all too often we’re caught up in the latest techniques and technologies. It’s easy to forget that there are people out there trying to learn this whole web thing from scratch. That’s why I think blog posts like this are so, so important!

Based on her experience teaching CSS at Codebar, Charlotte describes how she explains margins. Sounds simple, right? But is that because we’ve internalised this kind of thing? When was the last time we really thought about the basic building blocks of making websites?

Anyway, this is by far the best explanation of margin shorthand properties that I’ve seen.

More of this kind of thing, please!

Vanishing boxes with display contents

I’ve seen the exact problem that Rachel describes here—flexbox only applied to direct children, meaning the markup would have to be adjusted. display: contents looks like a nifty solution.

Battling BEM – 5 common problems and how to avoid them

We tend to use a variant of BEM in our CSS at Clearleft. Glad to see that when we’ve hit these issues, we’ve taken the same approach.

Surma.link – New ways to make your web app jank with Houdini – An introduction

This is a really good primer on all the pieces that make up the Houdini approach to CSS—giving authors access to low-level APIs for rendering.

As is often repeated here, it’s still early days and caution is advised, but it’s still a good idea to wrap your head around what’s coming down the standards pipe.

There’s even more specs in Houdini’s list of drafts, but the future of those is rather uncertain and they are not much more than a placeholder for an idea at this point. Examples include custom overflow behaviors, CSS syntax extension API, extension of native scroll behavior and similar ambitious things that allow you to screw up your web app even worse than ever before. Rejoice!

Jeremy Kard

You can do anything with CSS these days.

A simple HTML5 Progress bar | Charlotte Jackson, Front-end developer

I love this little markup pattern: simple, accessible and elegant …with some quirky CSS gotchas around styling non-standard prefixed pseudo-elements. They came from the Shadow DOM …dun dun DUN!

The accessibility stack: making a better layer cake » Simply Accessible

A great description of a solid architectural approach to building on the web (and not just for accessibility either).

Revisiting the Float Label pattern with CSS — That Emil is Emil Björklund

A clever technique by Emil to implement the “float label” pattern using CSS. It all hinges on browsers supporting the :placeholder-shown pseudo-class which, alas, is not universal.

I was hoping that maybe @supports could come to the rescue (so that a better fallback could be crafted), but that tests for properties and values, not selectors. Damn!

Using System Fonts in the Browser

We have some new font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.

12 Little-Known CSS Facts (The Sequel)

I somehow missed this when it was first published last Summer: a collection of twelve obscure CSS knowledge grenades.

You learn something new every day. I just learned twelve somethings.

Content and Display Patterns | Brad Frost

Brad follows up with his thoughts on Dan’s article, emphasising the importance of a developer’s role in not just slavishly recreating what’s in a static comp, but seeing through to the underlying pattern beneath:

It’s so incredibly crucial to treat development as a key part of the design process.

“Content & Display Patterns,” an article by Dan Mall

A really terrific article from Dan on building pattern libraries. In summary:

  1. Naming things is hard,
  2. Separation of content and presentation is A Good Thing.

There are some really good insights here into getting just the right level of abstraction for a component—not too tightly tied to a specific visual display, but also not too tightly tied to a specific kind of content type:

When thinking about patterns, content strategists are primarily thinking about Content patterns, designers are primarily thinking about Display patterns, and front-end developers are responsible for bringing the two together.

(And it’s great to see Charlotte’s excellent article get a shout-out in the “Related reading” section at the end,)

More Responsive Tapping on iOS | WebKit

This solution to the mobile tap delay by the WebKit team sounds like what I was hoping for:

Putting touch-action: manipulation; on a clickable element makes WebKit consider touches that begin on the element only for the purposes of panning and pinching to zoom. This means WebKit does not consider double-tap gestures on the element, so single taps are dispatched immediately.

It would be nice to know whether this has been discussed with other browser makers or if it’s another proprietary addition.

Smaller, Faster Websites - - Bocoup

The transcript of a great talk by Wilto, focusing on responsive images, inlining critical CSS, and webfont loading.

When we present users with a slow website, a loading spinner, laggy webfonts—or tell them outright that they‘re not using a website the right way—we’re breaking the fourth wall. We’ve gone so far as to invent an arbitary line between “webapp” and “website” so we could justify these decisions to ourselves: “well, but, this is a web app. It… it has… JSON. The people that can’t use the thing I built? They don’t get a say.”

We, as an industry, have nearly decided that we’re doing a great job as long as we don’t count the cases where we’re doing a terrible job.

IonicaBizau/gridly

Grid frameworks don’t get much more minimal than this—eleven lines of CSS:

.row { display: flex; }
.col { flex: 1; }
@media (max-width: 48em) {
    .row { flex-direction: column; }
    .col { flex: 0 0 100%; }
}
.col-tenth { flex: 0 0 10%; }
.col-fifth { flex: 0 0 20%; }
.col-quarter { flex: 0 0 25%; }
.col-third { flex: 0 0 33.3333334%; }
.col-half { flex: 0 0 50%; }

Should’ve been a gist really.

Putting My Patterns through Their Paces ◆ 24 ways

Ethan demonstrates progressive enhancement at the pattern level using flexbox.

I’ve found that thinking about my design as existing in broad experience tiers – in layers – is one of the best ways of designing for the modern web.

The “Blur Up” Technique for Loading Background Images | CSS-Tricks

Quite a few moving parts in this technique from Emil, but it’s very clever.

Learn to Code HTML & CSS - Beginner & Advanced

This looks like a great resource for anyone setting out to learn how to make websites.

philipwalton/flexbugs

A list of known bugs (and workarounds) in flexbox implementations. This is going to be handy to refer back to.

Flexbox Grid Finesse | HeydonWorks

Great tips from Heydon on building a real design system using flexbox. Perfect for those times when you can’t predict the amount of content that will be in layout …so, pretty much always.

There’s even a trick in here that kinda sorta gives us element queries.

WTF is Solid?- Solid

The new style guide and pattern library for Buzzfeed.

It all looks pretty reasonable on the surface but if you poke around in the CSS, you’ll find 1157 uses of !important. Yikes!

The whole point of having an agreed-upon codebase in a pattern library is so that developers need never reach for nuclear options like !important, so I’m afraid, for me, this is a demonstration of what not to do (in terms of CSS—the output of the HTML in the styleguide looks perfectly fine).

Solid uses immutable, atomic CSS classes…

CSS is “mutable”. By design. I don’t think we should be working against that.

Flexbox’s Best-Kept Secret

I’m filing this one away for future reference: combining flexbox with margin:auto is a magical combination.

Using auto margins with Flexbox is an effective way to get all of the flexibility of css floats, without the nastiness of breaking elements out of the document’s normal flow.

Remember this, future self!

Flexbox Froggy - A game for learning CSS flexbox

This is superb!

Flexbox can be tricky to get your head around, but this exercise does a great job of walking you through each step in a fun way. I highly recommend trying all 24 levels.

Troubleshooting rendering performance issues - YouTube

Harry packs a lot of great tips and tricks into one short video about performance troubleshooting. It’s also a great lesson in unlocking some handy features in Chrome’s developer tools.

Great stuff!

A look at detecting, pinpointing, measuring, and fixing rendering performance issues.

New design thinking by Mikey Allan

Web technology is no longer limiting us or scaring us into “staying safe” moreover it’s enabling us to get inspired by our surroundings and go and create some truly amazing, Web-Specific design.

Three years with CSS Grid Layout

Rachel outlines the history of the CSS Grid Layout spec so far:

The process works, as slow as it may seem to us who wait anxiously to be able to take advantage of these techniques. I am happy that we are waiting for something that I really believe has the ability to completely change how we do layout on the web.

jonathantneal/mdcss

A tool for generating a pattern library from Markdown comments in CSS. This isn’t the way that I tend to work, but I can see how it would be quite handy.

From Pages to Patterns: An Exercise for Everyone · An A List Apart Article

I’m so proud of Charlotte right now: last week she gave a conference talk and today she has an article published in A List Apart. Superb work on both fronts!

She does a great job of talking through a collaborative exercise to help teams move from thinking in pages to thinking in patterns.

Using Quantity Queries to write content-aware CSS - tomango

Another take on the kind of quantity queries that Charlotte has been experimenting with for a while now. It all goes back to the nth-child stuff that Heydon was talking about at Responsive Day Out

System shock — Medium

This is such a delightful story of a brilliant mistake—true typographic nerdery and nostalgia.

Read all the way through for a free gift.

GOV.UK elements

I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.

180: Panel on “Inline Styles” - ShopTalk on Huffduffer

Shop Talk Show is trying a new panel format. They got me on to join in the discussion about adding inline styles with JavaScript instead of using Cascading Style Sheets.

Making Charts with CSS | CSS-Tricks

What a lovely bit of progressive enhancement—styling data tables to display as charts.

CSS element() function - Vincent De Oliveira

Fire up Firefox and try out these demos: the CSS element value is pretty impressive (although there are currently some serious performance issues).

To put it simply, this function renders any part of a website as a live image. A. Live. Image!

CSS counter property By Charlotte Jackson

This is nifty little piece of CSS for numbering nested lists. I don’t think I’ve come across the counter value or the counter-reset and counter-increment properties before (or if I did, I’ve completely forgotten about it).

Confidence and Overwhelm

Following on from her great conversation with Jen on The Web Ahead podcast, Rachel outlines a strategy to avoid feeling overwhelmed by the deluge of tools, frameworks, libraries, and techniques inundating front-end developers every day:

Learn your core skills well. Understand HTML and CSS, be able to build a layout without leaning on a framework. Get a solid understanding of how a website actually gets from the server to a browser, an understanding of security and accessibility. These are the basics, the constants. These things change slowly. These things sit underneath all the complexity and the tooling, the CMSs and the noise of thousands of people all trying to make their mark on this industry.

She also makes this important point:

As you are doing this don’t forget to share what you know.

Dave Shea – – beyond tellerrand DÜSSELDORF 2015 on Vimeo

A wonderful, wonderful history of the web from Dave at this year’s Beyond Tellerrand conference. I didn’t get to see this at the time—I was already on the way back home—so I got Dave to give me the gist of it over lunch. He undersold it. This is a fascinating story, wonderfully told.

So gather round the computer, kids, and listen to Uncle Dave tell you about times gone by.

Stephen Hay | The Back(side) of the Class | CSS Day on Vimeo

A great presentation from Stephen. He takes a thoughtful look at our processes and tools.

NTH-TEST | nth-child and nth-of-type Tester

A tool for getting instant visual feedback on your nth-child selectors. Considering that the way I figure out nth-child selectors is to try randomly changing numbers until it works, this should be quite useful for me.

Designing with Progressive Enhancement — sixtwothree.org

The full text of Jason’s great talk at this year’s CSS Summit. It’s a great read, clearing up many of the misunderstandings around progressive enhancement and showing some practical examples of progressive enhancement working at each level of the web’s technology stack

Contextual Styling: UI Components, Nesting, and Implementation Detail by Harry Roberts

Smart thinking from Harry here on a common issue when it comes to naming and styling. As he points out, the solution is not technical, but lies in how you form your mental model:

The design issue here is solved by subtly inverting the problem.

Practical Questions around Web Components - Ian Feather

An in-depth look at where web components stand today, together with some very good questions about where they might be heading tomorrow.

A Practical Guide to SVGs on the web

Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.

Writing for Yourself (& the Power of Absolute Positioning)

We should write for ourselves, we should write about whatever we want to. Not just about the web either. Our twitter feeds don’t need to be a highlight reel of our best moments and not every blog post needs to be a stinging critique of the latest javascript framework. They just need to reflect who we are and what we think about and with any luck, when we look back on them, we might learn something about ourselves.

Paul Robert Lloyd | Responsive Principles | CSS Day on Vimeo

I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.

A Complete Guide to SVG Fallbacks | CSS-Tricks

An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.

Viewport vs Percentage Units - bitsofco.de

A comparison of when to use percentages and when to use vw/vh in your CSS.

GSWO Workshop with Sparkbox

Katie, Divya, and the other great designers and developers at Sparkbox run workshops on HTML and CSS for girl scouts. They’ve shared their resources and I might just borrow some of them for Codebar.

keyboard (div) ✿ dabblet.com

Here’s a really nifty use of the :checked behaviour pattern that Charlotte has been writing about—an interface for choosing a note from a piano keyboard. Under the hood, it’s a series of radio buttons and labels.

Keeping it simple: coding a carousel by Christian Heilmann

I like this nice straightforward approach. Instead of jumping into the complexities of the final interactive component, Chris starts with the basics and layers on the complexity one step at a time, thereby creating a more robust solution.

If I had one small change to suggest, maybe aria-label might work better than offscreen text for the controls …as documented by Heydon.

With a spoonful of flexbox by Charlotte Jackson, Front-end developer

Charlotte has experimenting with a nice discrete bit of flexbox on her personal site. Here she documents what she did, and what the fallback is.

Playing With Flexbox and Quantity Queries, From the Notebook of Aaron Gustafson

Aaron documents his process of implementing Heydon’s clever quantity queries in CSS.

I am really looking forward to hearing Heydon’s talk at Responsive Day Out.

Rothkode

Mark Rothko paintings recreated with CSS gradients.

Home · Primer

Github’s pattern library.

As always, it’s great to see how other organisations are tackling modular reusable front-end code (though I can’t imagine why anyone other than Github would ever want to use it in production).

In Pieces - 30 Endangered Species, 30 Pieces.

Beautiful use of CSS transitions and transforms.

Also: CSS is officially the new Flash—”skip intro” is back.

Experiment: Using Flexbox Today - Chris Wright

Practical examples showing where you can use flexbox right now, along with some strategies on how to start doing it.

Quantity Queries for CSS · An A List Apart Article

A terrific bit of smart CSS thinking from Heydon Pickering.

You know he’s speaking at Responsive Day Out, right?

Harnessing Flexbox For Today’s Web Apps - Smashing Magazine

More flexbox!

This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.

flexbox in 5 minutes

A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.

Grid by Example

We were discussing the CSS3 grid layout module in the Clearleft office today, so naturally Rachel’s name came up. This is such a great resource for diving into this stuff.

Flying Toasters | After Dark in CSS

For people of a certain age, this will bring back memories of a classic screensaver.

If you had told me back then that the screensaver could one day be recreated in CSS, I’m not sure I would’ve believed it.

Sass Guidelines

Advice for writing Sass. I don’t necessarily agree with everything, but on the whole, this is a solid approach.

It’s worth bearing Chris’s advice in mind.

CSS: Just Try and Do a Good Job

Good advice from Chris, particularly if you’re the one who has to live with the CSS you write.

As Obi-Wan Kenobi once said, “You must do what you feel is right, of course.”

Cursors

A self-describing list of cursors available through CSS.

JS Bin: Vertical centering is impossible in CSS lol!

Four different techniques for vertical centring in CSS, courtesy of Jake.

Axiomatic CSS and Lobotomized Owls · An A List Apart Article

I’m quite intrigued by the thinking behind this CSS selector of Heydon’s.

* + * {
    margin-top: 1.5em;
}

I should try it out and see how it feels.

Replacing Radio Buttons Without Replacing Radio Buttons

A great technique from Heydon for styling radio buttons however you want.

Solved By Flexbox — Cleaner, hack-free CSS

Documenting common layout issues that can be solved with Flexbox. I like the fact that some of these can be used as enhancements e.g. sticky footer, input add-ons …the fallback in older browsers is perfectly acceptable.

A Single Div

Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.

A device agnostic approach to inlining CSS | Blog | Decade City

I very much agree with Orde’s framing here: I don’t think it makes much sense to talk about “above the fold” CSS …but it makes a lot of sense to talk about critical CSS.

And, yeah, it’s another example of progressive enhancement.

CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS

Harry has written down his ideas and recommendations for writing CSS.

Heydon Pickering | Effortless Style | CSS Day on Vimeo

Remember when I was talking about refactoring the markup for Code for America? Well, it turns out that Heydon Pickering is way ahead of me.

He talks about the viewpoint of a writer (named Victoria) who wants to be able to write in Markdown, or HTML, or a textarea, without having to add classes to everything. That’s going to mean more complex CSS, but it turns out that you can do a lot of complex things in CSS without using class selectors.

There are slides.

Pure CSS parallax scrolling websites | Keith Clark

This is clever: a way to achieve parallax scrolling without JavaScript—much more performant.

Of course, you might want to ask yourself why you want a parallax effect in the first place.

How we make RWD sites load fast as heck

Scott shares the code that Filament Group are using to determine which style declarations are critical (and can be inlined) and which are non-critical (and can be loaded asynchronously). It makes quite a difference in perceived performance.

By the way, I really, really like the terminology of “critical” and “non-critical” CSS, rather than “above the fold” and “below the fold” CSS.

Full-width pinned layouts with flexbox

Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.

Radio-Controlled Web Design · An A List Apart Article

Turns out that the :checked pseudo-class selector allows you to do some clever interaction without JavaScript.

Let’s Talk About RTL

Some very handy techniques for working with right-to-left text.

A Maintainable Style Guide - Ian Feather

The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).

GitHub’s CSS · @mdo

Mark Otto talks through the state of Github’s CSS and the processes behind updating it. There’s a nice mix of pragmatism and best practices, together with a recognition that there’s always room for improvement.

simpl.info

A handy reference for HTML, CSS, and JavaScript features. Each feature has a bare-bones demo at a nice guessable URL e.g. http://simpl.info/datalist/

A no-javascript toggle content feature

A clever way of doing progressive disclosure with CSS.

Getting Back That Lovin’ Feeling on Sparkbox

A lovely little tale of empowerment through HTML and CSS.

Comparing two ways to load non-critical CSS

Scott’s trying to find out the best ways to load critical CSS first and non-critical CSS later. Good discussion ensues.

It’s OK not to use tools by Jonas Downey of Basecamp

Today, a basic HTML/CSS site seems almost passé. But why? Is it because our new tools are so significantly better, or because we’ve gone overboard complicating simple things?

He’s right, y’know.

Single Element CSS Spinners

A lovely little selection of loading indicators powered by CSS animations and transitions.

Incomplete List of Mistakes in the Design of CSS [CSS Working Group Wiki]

I think I concur with this list. Although I guess it’s worth remembering that, given the size of the CSS spec, this isn’t an overly-long list.

It’s interesting that quite a few of them are about how things are named. It’s almost as if that’s one of the, say, two hardest things in computer science.

Learn CSS Selectors interactively

This visual approach to demonstrating how CSS selectors work is really handy.

Creating Style Guides · An A List Apart Article

A great article by Susan on getting started with creating a styleguide for any project.

I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.

Confessions Of A CSS Expert

Funny because it’s true:

The thing I regret the most is how my class addiction affected my relationship with HTML.

CSS A/Z

The alphabet illustrated with CSS.

Jonathan T. Neal | Thoughts on Media Queries for Elements

Some good ideas on the idea of element-level media queries, a feature that developers are crying out for and browser makers are saying is too hard. This post has some thoughts on how to deal with the potential issues.

Label Pattern - CodePen

This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.

Getting Started With Pattern Libraries ∙ An A List Apart Blog Post

A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.

A-mer-ica! Fuck yeah!

Flexbox for forms - German for black

Here’s a clever use of flexbox: have a form field stretch to fill up most of the space and a button fill up what’s left.

Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA

An in-depth look at using icon fonts without any nasty edge-cases ruining your day.

About Variables in CSS and Abstractions in Web Languages | CSS-Tricks

Chris has a written a response to my post (which was itself inspired by his excellent An Event Apart presentation) all about CSS, variables, and abstractions.

I love this kind of old-school blog-to-blog discussion.

Happy 17th Birthday CSS | Web Directions

A lovely history lesson on CSS from John.

Myth - CSS the way it was imagined.

This looks interesting: a CSS postprocessor that polyfills support for perfectly cromulent styles.

The (other) Web we lost

John shares his concerns about the increasing complexity involved in developing for the web.

Building for the device agnostic web | Talks | Decade City

Some excellent practical advice on progressive enhancement.

Responsive scrollable tables | 456 Berea Street

I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.

Jeremy Keith – The Power Of Simplicity – border:none

This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.

Warning: it does get quite ranty towards the end.

Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.

Wallop Slider

I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.

Progressive Enhancement. Still Alive and Kickin’

Dan explains the reasoning behind his “Sigh, JavaScript” Tumblr blog, and provides an excellent example of progressive enhancement in the process.

Go, Dan, go!

Not Real Programming by John Allsopp

A terrific long-zoom look at web technologies, pointing out that the snobbishness towards declarative languages is a classic example of missing out on the disruptive power of truly innovative ideas …much like the initial dismissive attitude towards the web itself.

Create a responsive ad unit - AdSense Help

Looks like Google are offering responsive (or at least adaptive) ad sizes.

Media Query Events Example

A page to demonstrate the conditional CSS technique I documented a while back.

Style Guide Boilerplate

A very handy starting point for creating a front-end style guide.

Why the Web Doesn’t Need Another CSS Zen Garden - YouTube

A great history lesson from Dave.

Ah, I remember when the CSS Zen Garden was all fields. Now get off my CSS lawn.

Web Fonts and the Critical Path - Ian Feather

The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.

Text-align: Justify and RWD

Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.

Using icon fonts

A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service

CSS is not an amoral monster.

I’m in general agreement with this rousing defence of CSS. I think it does a pretty great job of balancing a whole ton of use cases.

mezzoblue § 10 Years

Wow! The CSS Zen Garden is a decade old. Crazy! It’s a true piece of web history …and it’s back!

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

Specializing yourself into a corner by Scott Kellum

I can empathise with Scott’s worries about fragmentation on the front-end with Saas, Styles, LESS, Compass, yada, yada, yada.

I want to share my code with everyone who writes CSS, not a subset of that group.

How to lose weight (in the browser)

A handy one-stop-shop for tips on improving front-end performance.

Learn CSS layout

A handy step-by-step guide to all the ways you can use CSS for layout.

Using SVG on CSS-Tricks

Chris takes a look at all the different ways you can use SVG today.

Logical breakpoints for your responsive design

Vasilis examines the multitude of factors that could influence an ideal measure.

CSS 3D Clouds

A beautiful experiment with CSS transforms and a smattering of JavaScript.

Protip: All browsers that support SVG background images also supports multiple background images.

A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.

The Vanilla Web Diet by Christian Heilman

I like the sound of the book that Chris is writing for Smashing Magazine. It sounds like a very future-friendly approach to front-end development.

On the styling of forms by Bruce Lawson

Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!

Front-end performance for web designers and front-end developers by Harry Roberts

A really good introduction to front-end performance techniques. Most of this was already on my radar, but I still picked up a handy tip or two (particularly about DNS prefetching).

At this stage it should go without saying that you should be keeping up with this kind of thing: performance is really, really, really important.

Implementing off-canvas navigation for a responsive website by David Bushell

This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.

All you need to know about CSS Transitions | Alex MacCaw

An in-depth look at CSS transitions with some handy tips for improving performance.

Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes - Tantek

I love that Tantek is as pedantic as I am …although I don’t think “pedantic” is exactly the right word.

Andy Hume: CSS for Grownups, SXSW 2012 - YouTube

The slides and audio from Andy’s exceptional talk earlier this year at Southby, combined into one video.

It really is excellent, although he does make the mistake of pulling the “dogma” card on those who woud disagree with him, and he really doesn’t need to: his argument is strong enough to stand on its own.

display: none; | Laura Kalbag

Laura explains the problems with hiding content for small screens, and uses this as an opportunity to elucidate why you should blog, even if you’re think that no-one would be interested in what you have to say:

The point I’m trying to make is that we shouldn’t be fearful of writing about what we know. Even if you write from the most basic point of view, about something which has been ‘around for ages’, you’ll likely be saying something new to someone. They might be new to the industry, you might just be filling in the holes in someone’s knowledge.

Let’s Talk Solar | LOGO24

Here’s a really useful case study for anyone who wants to do “guerrilla” responsive design: when you’re handed a fixed-width mockup but you know that responsive is the way to go:

I started by styling up every element, without layout. The result was a fully elastic layout that effectively served as a mobile, or small screen, layout, which just needed some tweaking of horizontal spacing.

Bingo! And this approach had knock-on benefits as it “supported writing component-based, or modular, CSS”.

❍ IcoMoon

This is a great free service for generating small subsetted icon fonts. Launch the app and have a play around — you can choose from the icons provided or you can import your own SVG shapes.

Nice touch: you can get the resulting font (mapped to your choice of unicode characters) base-64 encoded for your stylesheet.

Base CSS | Pasteup | Guardian News

The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!

IE10 Snap Mode and Responsive Design - TimKadlec.com

Useful advice from Tim on preparing your responsive site for IE10’s new “snap mode”. Don’t worry: it doesn’t involve adding any proprietary crap …quite the opposite, in fact.

CSSquirrel : The Savage Beatings Anti-Pattern

CSSquirrel shares my feelings on the email notification anti-pattern.

Max CSS

I like this suggestion. If you’re using minified CSS in production, it would be a nice gesture to have an easily-discoverable unminified version for people to view source on.

CSSquirrel : Game Break | opinions and news on web design by Kyle Weems

Hey look; Anna’s in a CSSquirrel comic! And for good reason: Kyle is as impressed as I am with Anna’s research into browsers on gaming devices.

There’s also a call for more community device labs. I approve.

Mobile Navigation Icons | TimKadlec.com

Tim shows how to make a scalable three-line navicon in CSS.

Uncle Dave’s Ol’ Padded Box - Dave Rupert

Yet another brilliant technique from Dave. The only caveat is that it uses background images rather than img elements, but it’s still very powerful (and very clever).

» 29 June 2012, baked by Lea Verou @ The Pastry Box Project

I thoroughly agree with Lea’s approach. It’s all about the craft.

Classes? Where We’re Going, We Don’t Need Classes! | Smashing Coding

This is a well-reasoned, thoughtful article on avoiding class names in CSS …but I don’t agree with it. That said, perhaps there’s a reasonable middle ground to be found between this extreme stance and the opposite (but in some ways just as extreme) stance of OOCSS.

How We Improved Page Speed By Cleaning CSS, HTML and Images | Dyn Blog

Some good practical advice on improving performance. This should all be familiar to you, but it’s always worth repeating.

Single-direction margin declarations — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts

Some smart thinking from Harry Roberts on standardising the direction of your margins in CSS i.e. all top-margin or all bottom-margin declarations.

necolas/idiomatic-css

Some sensible ideas about having a consistent CSS writing style.

Build a smart mobile navigation without hacks | Tutorial | .net magazine

A really great markup and CSS pattern for “content first, navigation second” from Aaron.

IE-friendly mobile-first CSS with Sass 3.2

Jake demonstrates his technique for preprocessor-generated stylesheets for older versions of Internet Explorer (while other browsers get the same styles within media queries).

Issue #408: Generate a separate css with flattened media queries

This is an excellent idea from Jake: use a preprocessor to automatically spit out a stylesheet for older versions of IE that includes desktop styles (garnered from the declarations within media queries).

If you’re a dab hand with Ruby and you’d like to see this in SASS, you can help.

FixMyStreet

Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.

Shopping Cart example

A nifty example of responsive tables. View source to see how it’s done.

Like A Rounded Corner (Bruce and The Standardettes) - YouTube

Bravo, Bruce, bravo.

I heard Glen Campbell’s “Like A Rhinestone Cowboy” on the radio and began absent-mindedly singing “Like a rounded corner” to it.

A New Take on Responsive Tables by ZURB

An interesting approach to squishing down large data tables for small-screen viewing …though I wonder if there isn’t a “Mobile First” approach that could scale up, say, lists to become tables on large screens.

Springload: OnMediaQuery - Responsive Javascript

This is nice: the solution I blogged about for conditional CSS (reading media queries from JavaScript) all wrapped up in a nice small reusable bundle.

Proposition to change the prefixing policy from Florian Rivoal on 2012-05-04 (www-style@w3.org from May 2012)

This seems like a sensible way for browsers to approach implementing vendor-prefixed CSS properties.

Jordan Moore | Building With Content Choreography

Using flexbox to creata a narrow-column stacking order that’s unrelated to the source order.

Creating a Mobile-First Responsive Web Design - HTML5 Rocks

A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.

Breakpoint Checking in Javascript with CSS User Values | Sparkbox

A smart response to the little conundrum I posted on my blog yesterday about detecting media-query quarantined CSS properties from JavaScript.

What’s the Deal With Display: Inline-Block? | Design Shack

When I linked to the Toast framework the other day, I mentioned that I was intrigued by its use of inline-block for layout. Here’s a more detailed analysis of how display: inline-block works, along with some caveats.

Toast | A simple CSS framework

This is interesting, not because it’s yet another grid framework (which I never use anyway) but because of the way it’s doing layout: with border-box and inline-block, rather than floats. If you’re only serving up your layout styles to browsers that support media queries (which would discount older versions of IE anyway), this could make a lot of sense.

A List Apart: Articles: Creating Intrinsic Ratios for Video

This really is a ridiculously smart way of keeping third-party videos scalable in responsive layouts. I’ve just implemented it on this year’s dConstruct site.

Media Query & Asset Downloading Results | TimKadlec.com

Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.

Paperfold CSS | Demo Studio | Mozilla Developer Network

In amongst all the shiny demos on this site, this one could actually be useful.

Untitled ✿ dabblet.com

Here’s a handy little tip for CSS animations: instead of changing position properties, use translate instead.

Content Folding | CSS-Tricks

An interesting idea from Chris: instead of linearising content on smaller screens, what if you could interweave it instead? Theoretically, CSS regions makes it possible, regardless of source order.

Script Junkie | Flexibility: A Foundation for Responsive Design

Emily walks us through a responsive design case study, stressing the importance using percentages for layout.

Stop solving problems you don’t yet have | this is rachelandrew.co.uk

I completely agree with everything Rachel says here. I see far too many projects that start out with pre-emptive conditional comments, JavaScript libraries and polyfills, without knowing whether or not they’re actually going to be needed.

Style Guide

I met one of the guys from the Starbucks team at South by Southwest and he mentioned that they had a markup pattern library. I encouraged them to make it public, and it here it is!

I really hope that more companies and agencies will start sharing stuff like this.

Jordan Moore | Web Design, Northern Ireland, Bangor, Freelance

A sweet little meditation on the nature of the web and responsive design.

Off Canvas

Inspired by Luke’s documentation of layout patterns in responsive designs, Jason goes into more detail on the pattern of hiding navigation and extra content to the left and right of the viewport on small screens.

About HTML semantics and front-end architecture – Nicolas Gallagher

An in-depth look at naming patterns for classes to help streamline CSS.

Abstract Sequential - Print Styles Are Responsive Design

An excellent piece by Stephanie on how to approach print stylesheets. I’ve always maintained that Print First can be as valid as Mobile First in getting you to focus on what content really matters.

CSS for grown ups: maturing best practises // Speaker Deck

The slides from Andy’s tour-de-force presentation at South by Southwest on CSS best practices.

How I’m implementing Responsive Web Design – JeffCroft.com

Jeff documents some of the techniques he’s using to tackle responsive design, with some tips specifically for SASS.

CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.

Progress Bar

A nice little bit of CSS for a page-loading animation. View source.

A Responsive Design Approach for Navigation, Part 1 | Filament Group, Inc., Boston, MA

A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.

What We Don’t Know // Speaker Deck

The slides from Chris’s presentation on the known unknowns of the web.

Pears

A great pattern library from Dan.

The CSS3 Test

A really handy test site from Lea that reports your browser’s recognition of CSS properties.

» Of Grids, Class Names, Responsiveness, and Lifecycles Bits Pushed Around

The thought process behind trying to abstract class names that are used for layout in responsive designs (and can therefore refer to different widths depending on the context). Here, the author settles on letters. In the past, I’ve approached the same kind of abstraction by using latinised names.

* { box-sizing: border-box } FTW « Paul Irish

Paul quite rightly sings the praises of box-sizing: border-box — this is something that Microsoft got right and the spec got wrong. I never thought of making it part of a universal reset though.

BenjaminKeen.com

A bookmarklet version of that handy multiple-iframe page I linked to the other day. Even more useful for testing responsive designs!

Bricss - Simple responsive design test page

A handy little document to load pages into differently-sized iframes—useful for testing responsive designs.

Browser Support

A very useful site for checking browser support for CSS features. The test cases are really handy and the site gets extra bonus points for not calling itself “HTML5” anything.

YouTube - One Hour Per Second

Cute CSS animations illustrating the incredible rate of uploads to YouTube.

HTML5 Please

This looks like a handy resource with a shitty, shitty name. Count the number of items that are in HTML (or JavaScript or APIs). Now count the number of items that are in CSS.

Sirens | Aaron Mentele

Some very interesting results from testing background image downloads contained within media queries or overridden with media queries: it turns out that, in iOS at least, the browser is getting smarter and smarter.

Using OpenType font features with CSS 3: Part 1 | Fontdeck Blog

Richard starts diving into some the nifty ligatures that are becoming available to us in OpenType fonts with CSS3.

deCSS3 - a bookmarklet for graceful degradation.

This is really handy: a bookmarklet that will disable any CSS3 on a page so you can check that your fallbacks look okay.

Learn You a Flexbox for Great Good! | The Haystack.

Stephen gives an excellent run-down of flexbox and how you can use it today.

Leaving Old Internet Explorer Behind — Joni Korpi

Joni points out a great advantage to the mobile-first approach if you choose not to polyfill for legacy versions of IE: you can go crazy with all sorts of CSS3 goodies in the stylesheet you pull in with media queries.

A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc., Boston, MA

A really nice pattern for data tables in responsive designs. Just as with conditional loading, the key point is making a distinction between essential and optional content.

Typography Effects with CSS3 and jQuery

Most of these are pretty over the top but they’re good proofs of concept.

Position: fixed revisited - QuirksBlog

PPK tests the various ways that mobile browsers handle position:fixed, complete with videos.

HTML5 and CSS3 Advent 2011

Here’s a geek advent calendar I missed. There are some great CSS techniques here.

Polyfilling The HTML5 Gaps With JavaScript

An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.

InstaCSS | Instant CSS Documentation Search

A fantastically useful resource! Don’t let the name fool you: this provides instant access to documentation for CSS and HTML and JavaScript!

Put this one on speed dial.

“Mobile first” CSS and getting Sass to help with legacy IE – Nicolas Gallagher

If you use Sass, this could be a really handy technique for handling IE<9 support with mobile-first responsive designs.

Vendor Prefixes Are A Rousing Success | Infrequently Noted

Alex weighs in on the newly-reopened debate on vendor prefixes, roundly squashing Henri’s concerns.

Fixed Positioning in Mobile Browsers | Brad Frost Web

Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.

Structuring a Responsive Stylesheet | Sparkbox

Some thoughts on structuring your CSS for responsive designs.

CSS vendor prefixes, an answer to Henri Sivonen -

Daniel responds to Henri’s call-to-arms on vendor prefixes. While he stridently disagrees with most of what Henri suggests, there is also overlapping agreement: they both want vendor prefixes to ship only in experimental builds, not stable browser releases.

Vendor Prefixes Are Hurting the Web

This is a very thoughtful piece by Henri on vendor prefixes and it’s well worth a read …however the thought of one browser implementing support for vendor-prefixed properties intended for a different browser does make me quite quesy.

Type study: Sizing the legible letter « The Typekit Blog

A great article by guest author Ethan on the various approaches to sizing text in CSS.

Animatable: One property, two values, endless possiblities

Lea documents a whole bunch of CSS animation possibilities.

What’s slated for CSS4 Selectors? - destroy/dstorey

David gives a quick rundown of some of the selectors we can expect to see in CSS4.

#816: Revert mobile-first media queries and remove respond.js - Issues - h5bp/html5-boilerplate - GitHub

This thread on whether HTML5 Boilerplate should include Respond.js by default (and whether the CSS should take a small-screen first approach) nicely summarises the current landscape for web devs: chaotic, confusing …and very, very exciting.

Foundation: Rapid Prototyping and Building Framework from ZURB

A framework for banging out ready-made responsive designs.

zomigi.com » Essential considerations for crafting quality media queries

A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.

CSS3 Secrets 10 things you might not know about CSS3

This presentation from Lea contains some CSS gems (and it’s all delivered in HTML).

Responsive images without Javascript - Notebook

This isn’t recommended as a robust means of delivering responsive images, but it’s still quite clever: using media queries to pass information to the server about the viewport size.

Scalable and Modular Architecture for CSS

Jonathan has encapsulated his CSS methodology into a short online book. He isn’t presenting this as the “right” way to do things: he’s simply documenting what he does in the hope that it will help others.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

A set of default styles to get started on a mobile-first responsive design.

Test page for -webkit-font-smoothing | Christoph Zillgens

This handy matrix shows the effect of different -webkit-font-smoothing setting on various text combinations (serif/san-serif light/dark, etc.).

Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices

This just launched at the Breaking Development conference: another site that uses the term HTML5 to include CSS and Ajax. Still, despite its inaccurate nomenclature, it’s a useful compatibility table of device support in mobile browsers.

dConstruct and Responsive Design - Ubelly

A look under the hood of the dConstruct website (including some nth-child selectors I threw in there).

Stubbornella » Blog Archive » Don’t Style Headings Using HTML5 Sections

Nicole provides a step-by-step explanation of why it will probably benefit you to add classes to your headings to ensure consistent styling without writing overly-verbose CSS.

via Frank : Designers vs Coding

Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside. HTML and CSS give another venue to provide structure to content in the native language of the web, and learning these guides decisions by surfacing the affordances of the medium.

Line-height in input fields | 456 Berea Street

This abuse of the !important declaration in Firefox’s user-agent stylesheet was driving me crazy recently. Roger proposes a CSS patch, but this is really something that needs to be fixed in the browser.

Sizing with CSS3’s vm and vh units - Snook.ca

Once again I’m getting all my CSS3 information from Jonathan. This time he’s discovered the vw and vh units which allow you to specify sizes relative to the size of the viewport.

Jake Archibald - Font-Face - Good vs Legal on Vimeo

Jake’s talk at DIBI earlier this year was absolutely fantastic. It features a rape reference, a story about pissing, and a Human Centipede metaphor.

It’s also very, very informative. Watch this.

SimpleBits / Adapted

Dan gives his pragmatic perspective on making Dribbble more adaptive. Baby steps.

When time, resources and funds are more abundant, I’d love us to rethink things in a more holistic manner, but for now incremental improvements will keep us moving.

davidnewton.ca | The Current State of Hyphenation on the Web

A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.

Golden Grid System

I’m usually not a fan of CSS “frameworks” but I like the thinking that’s gone into this fluid, responsive system. I particularly like this advice:

Take it apart, steal the parts that you like, and adapt them to your own way of working.

HTML5 Rocks - How Browsers Work: Behind the Scenes of Modern Web Browsers

Insanely in-depth look at how browsers work, right down to the nitty gritty. You’d think there’d be a lot of engineering talk, but actually a lot of it is more about linguistics and language parsing.

OLO

This is a thoroughly enjoyable, frustratingly addictive two-player game for the iPad.

Oh, and it just happens to be made with HTML, CSS and JavaScript.

Techniques For Gracefully Degrading Media Queries - Smashing Magazine

There are some inaccuracies and misrepresentations in here, but on the whole this is a pretty good round-up of your options when dealing with responsive design in older browsers.

Rethinking CSS Grids| Mark Boulton

Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.

Bruce Lawson’s personal site  : HTML5, hollow demos and forgetting the basics

A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.

Let the Web move you-CSS3 Animations and Transitions | Web Directions

John tells you everything you need to know about CSS animations and transitions, and then he gives you a tool to help you get started.

Using CSS Selectors as Fragment Identifiers

I really like this proposal to allow for more nuanced linking using CSS selectors in fragment identifiers (though I worry about the overloading of the # symbol in URLs).

Responsive images using CSS3 – Nicolas Gallagher

Once there’s better support for the CSS3 attr() function, this could be a nifty way of handling responsive images (although large-screen user-agents will download more than one image).

Responsive images right now — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts

Another approach to responsive images, this time using background images. The disadvantage is that large-screen devices will download both images. Still, pretty darn clever.

Don’t use IDs in CSS selectors? ❧ Oli.jp (@boblet)

I agree with Oli’s conclusion:

Save IDs for fragment identifiers or JavaScript hooks.

Responsive Containers - Blog | Andy Hume

This is an excellent idea from Andy: selector queries. Like media queries but at the component level. Quite often it isn’t the width of the viewport that matters, it’s the width of the containing element for whatever you’re trying to style.

CSS Lint

Nicholas and Nicole have unveiled the CSS companion to JS Lint. And yes, it will your hurt your feelings.

Spinning the Web - a set on Flickr

Eric is making some genuinely beautiful art by applying CSS transforms to some well-known sites.

cnn

Chloe Weil

Chloe’s redesign/realign is a lovely bit of HTML5 and CSS3 all wrapped up in a responsive layout.

JoshEmerson.co.uk · Blog · Base64 and the tiling background

Josh explains the pros and cons of embedding background images in your CSS using base 64 encoding.

Layer Styles

A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.

css Zen Garden: All-In-One

This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.

Font sizing with rem - Snook.ca

Well, ya learn something new every day …or at least I did. I had no idea about the rem unit—relative em—for font-sizing in CSS.

David Emery Online: Response

David rejects a redesign in favour of a bit of responsive tweaking — and very nice it is too.

FFFFALLBACK - A simple tool for bulletproof web typography.

A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.

The Cicada Principle and Why It Matters to Web Designers » HTML & CSS, Layout » Design Festival

A lovely bit of experimentation with prime numbers and multiple background images.

Page Speed Online

A supremely useful tool from Google for measuring performance.

Media Query Test

Testing ways of only displaying background images on large screens whilst ensuring that they aren’t downloaded for smaller screens.

HTTP Archive

This is wonderful stuff: a long-term project to track the performance of high-traffic sites over time: oodles of lovely data and some quite shocking stats.

Madmanimation

Andy just debuted this at An Event Apart—lovely stuff.

Ribot - interface innovation

Fellow Brightonians, the brothers Ribot and co., launch an excellently responsive company site.

Showcase: Pop-Up Book in HTML and CSS | eleqtriq

A cute’n’nifty demonstration of transforms and animations in CSS that works a treat in Webkit.

yepnope.js | A Conditional Loader For Your Polyfills!

A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.

Demo: CSS drop-shadows without images – Nicolas Gallagher

Some nice drop-shadow effects. Generated content is the key.

The New Bulletproof Font-Face Syntax | Fontspring

Syntax for @font-face that’s more bulletproof than the techniques previously considered bulletproof …’till an even more bulletproof syntax comes along.

LONDON WEB - Sept 2010 - The Progressive Web - Andy Hume on Vimeo

A great presentation by Andy on the use of progressive enhancement at Clearleft.

Media Queries

A curated collection of responsive web designs.

Stephen Caver

A beautiful responsive design, within the confines of Tumblr.

Anna Debenham

Anna’s redesign is beautiful, no matter what browser or device you’re using.

Getting to work with new web technologies

This is the webpage of a great presentation on HTML5 and CSS3. It is also the presentation itself.

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8

Adding CSS3 support to legacy versions of Internet Explorer using JavaScript. I like the fact that, although it requires a JavaScript library, it works with multiple libraries.

CssUserAgent (cssua.js)

This script adds user-agent information in class names to the document’s root element so that those user agents can be targeted with CSS. It could be useful, but only in direst need.

The Year in Pictures: Passages — USA TODAY

A really nice example of responsive web design from an unexpected source.

..about validating

An oldie but a goodie. This is why we have standards.

Stubbornella » Blog Archive » The hacktastic zoom fix

Nicole proposes an interesting way of clearing floats with a combination of display:table-cell and generated content.

The Personal Disquiet of Mark Boulton

A beautiful new responsive design from Mark.

Experimenting with responsive design in Iterations - (37signals)

37 Signals document their experiments with responsive web design. Looking good.

The 1140px CSS Grid System/Framework · Fluid down to mobile

A fluid grid that linearises at smaller viewport widths.

80s ALBUM ART RECREATED IN CSS ALONE | Monkeon | Web Design Leeds

A neat little experiment in replicating classic 80s albums using CSS.

Deaxon's CSS playground

A very impressive collection of CSS demos using no JavaScript. I like the clever use of :target to create tab functionality.

Create a new Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

This looks like it could be a handy little tool for creating test cases with HTML, CSS and JavaScript.

Yiibu - About this site...

A great explanation of the responsive enhancement of this site.

0to255

A cute little tool to help refine colour palettes.

David DeSandro

Drag the text 'round for a bit of fun.

With Good References — Unstoppable Robot Ninja

Ethan shares his thoughts on the role of the reference design in the responsive workflow.

Evening edition - Bobulate

A lovely idea, nicely implemented: time-conditional CSS.

Live style sheet editing!

Edit this page. Then view source.

Lost World's Fairs

Lovely typographic showcases from Stan and friends.

Information Architects

A great example of responsive web design. I like the idea of upping the font size for really large viewports. I may do that on Huffduffer.

Webtype

The newest web fonts delivery service is a collaboration between five foundries: The Font Bureau, Ascender, Roger Black, Petr van Blokland and DevBridge.

HTML5 Boilerplate - A rock-solid default for HTML5 awesome.

Another set of default HTML/CSS/JS templates with some very clever ideas built in (courtesy of the always-brilliant Paul Irish).

HTML5 Reset

Barebones templates for HTML5 documents. It needs a bit of work but it's a nifty idea.

Unicorn

An all-in-one validator from the W3C: markup, CSS and feed validation.

A List Apart: Articles: Prefix or Posthack

An excellent argument in favour of vendor prefixes in CSS, from Eric.

Is CSS3 part of HTML5?

Just in case you forget.

Finally ° a fluid Hicksdesign ° The Hickensian ° Hicksdesign

Jon gets flexible. This is the mark of a true web designer.

Typograph – Scale & Rhythm

A handy tool that generates font-sizing CSS based on a drag'n'drop interface.

Multiple Backgrounds and Borders with CSS 2.1 – Nicolas Gallagher — Blog & Ephemera

A clever technique to create the effect of multiple background images using the :before and :after pseudo-elements.

Google Font Directory

Google-hosted free-as-in-beer webfonts.

FontDeck: Exclusive Sneak Peek | Design Shack

Get a glimpse behind Fontdeck's curtain.

Code Standards | Isobar

A very detailed set of coding standards and guidelines.

QuirksBlog: A pixel is not a pixel is not a pixel

A clear explanation of device-width from PPK.

Doctor Who: The WebKit Implementation

A (webkit-only) CSS3/HTML5 take on the Doctor Who opening titles.

WOFF File Format 1.0 Submission Request to W3C

Microsoft, Mozilla and Opera have formally submitted the WOFF font format to the W3C.

Front-End Design Conference - July 23, 2010

This web conference in July in St. Petersburg, Florida looks great — the line-up is excellent and tickets cost just $99. Bargain!

border-image-generator - In Case of Stairs

A very handy GUI for figuring out the somewhat complicated syntax of border-image in CSS3.

Plugging the CSS History Leak at Mozilla Security Blog

Mozilla aims to plug the :visited/getComputedStyle bug/feature.

CSS3 Please! The Cross-Browser CSS3 Rule Generator

Edit some CSS rules and this in-browser code editor will automatically update related browser-specific declarations.

CSS Border Radius

A handy shortcut for when you just can't recall the exact syntax of border-radius.

Talking Animal blug

This is the way to do an adaptable liquid layout. Media queries are your friend. Oh, and the content's good too.

Revised Font Stack | A Way Back

A thoroughly researched and well-written look at font stacks, with some practical suggestions and advice.

Fontspring | Fonts, fonts and more fonts

A store of fonts for sale, many of which have licenses that allow you to use them with @font-face.

Román Cortés » Pure CSS Coke Can

A nifty little CSS experiment.

PrimerCSS

This is an interesting idea: paste in some markup and this will automatically generate CSS selectors based on your classes and IDs.

Times Skimmer by The New York Times

Beautifully done with HTML5 and font linking.

Web fonts test

Test cases for font-linking.

High Performance Web Sites :: @font-face and performance

Steve Souders does the research and reveals the sad truth about the effect font-linking has on performance.

@font-face

A quick, slick primer on font linking.

printFancy, a gallery of websites in print

A CSS gallery with a difference. This one highlights sites with good print stylesheets.

@font-face in Depth

A good look at choosing fonts for font linking.

CSS3 And Me « Trent Walton

It's not very often, I must confess, that I see a poem about CSS. You know a technology is in its prime when people start talking about it in rhyme.

ThinkGeek :: Stuff for Smart Masses

Scroll to the bottom to see a nice robots-into-zomies effect.

Bulletproof @font-face syntax « Paul Irish

Getting font-linking to work in all browsers.

Whatcha Readin' For? - Handy TextMate tips for working with HTML & CSS

Some very handy Textmate tips from Emil ....especially the bit about doing calculations for vertical rhythm.

Radio - The New York Moon

Gorgeous visual design for an interestingly eclectic site.

The Font-as-Service | i love typography, the typography and fonts blog

Elliot gives a rundown of the font delivery services for the web that are on the way.

Let's make the web faster - Google Code

A whole heap of optimisation techniques from Google for faster CSS, JavaScript, markup and PHP.

Font in your face | Nimbupani Designs

A good, clear-headed summation of font linking.

Web fonts. Where are we? Will web fonts ever be a reality? | i love typography, the typography and fonts blog

A great round-up on the current state of web typography following TypeCon 2009.

How to create EOT files without Microsoft WEFT — Edward O’Connor

@font-face for all — Ted shows how to convert TTF files to EOT using the command line.

Kernest.com | @font-face central

Another font-linking service is on the way.

SlickMap CSS — A Visual Sitemapping Tool for Web Developers

A really nice stylesheet for sitemaps represented as nested unordered lists in HTML.

The Future of Code

Steven Pemberton, one of my favourite long-term thinkers, talks about programming, markup and XForms.

HTML5 Video + CSS Visual Effects

Experimenting with CSS3 and HTML5 features implemented in Webkit.

HANDCRAFTED CSS by Dan Cederholm with Ethan Marcotte

Double the awesomeness: Dan and Ethan made a book ...and a DVD ...and a workshop.

Maintainability Guide (Beta) – Jens Meiert

A surface skim of maintainability in front-end development.

CSS3 – a big storm is coming | Reinhold Weber

A nice rundown of media queries and multiple columns in CSS3.

beautiful fonts with @font-face at hacks.mozilla.org

A good description of how font linking works.

Styling buttons to look like links | Natalie Downe

An excellent tutorial from Nat explaining how to deal with those situations where you should be using a button but the design calls for it to look like a link.

Introducing Typekit « The Typekit Blog

Jeff's got something up his sleeve that will help the cause of web typography.

Nice Web Type Suggests: Graublau Sans with Lucida sanserif

A great example of @font-face in action: comparing Graublau Sans Web with with Lucida Grande.

Dinky pocketbooks with WebKit transforms | Natalie Downe

This is just brilliant! Natalie has taken the Flash-based Pocketmod and reproduced it using HTML and CSS (including CSS transforms).

Typefaces we can all share : Open Font Library

A repository of liberally-licensed fonts to link to with @font-face.

Uni-Form

A nice stab at a markup (and CSS) pattern for forms.

The League of Moveable Type

"We're done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won't have it. It's time to raise our standards. Here, you'll find only the most well-made, free & open-source, @font-face ready fonts."

WebKitBits · A tumblog about the browser engine built into Safari, Chrome, iPhone, and Android.

A blog of all things webkit, itself showcasing some of the CSS niceties in the rendering engine.

Tal Leming » Web Fonts

An excellent take on font-linking from someone who designs typefaces for a living.

Fuck the foundries [dive into mark]

Mark Pilgrim knows the score.

Fluid Images — Unstoppable Robot Ninja

Ethan follows up his Fluid Grids article with an equally excellent piece on resizing images.

8 Simple Ways to Improve Typography In Your Designs • Blog Archive • AisleOne

A quick round-up of typographic best practices applied to the web.

Kai Chan Vong - script snippets

Kai has written a handy little CSS diagnostic script to help you identify problems with your markup.

Practical, maintainable CSS | Natalie Downe

Natalie has put up the slides and video from her excellent Girl Geek Dinner talk on CSS in The Eagle last week.

as days pass by, by Stuart Langridge — A WAI-ARIA “stylesheet”

Stuart has an interesting take on ARAI attributes. Why can't they be set declaratively in an external file in the same way as we set styles?

A List Apart: Articles: Fluid Grids

Superb article by Ethan on calculating percentages for liquid layouts. Read it. Do it.

this is a working library

I love the design of this site almost as much as I love the content.

Brighton Girl Geeks

Geek girls of Brighton: don't miss Natalie's CSS talk in The Eagle on March 4th. Nat is the best front-end developer I know.

Facing up to Fonts | Slides and notes

The slides from Richard's superb Skillswap presentation.

FireScope

This addition to Firebug is rather excellent: a built in reference for whatever you're inspecting.

Striking Web Sites with Font Stacks that Inspire - Inspiration Bit

A look at different font stacks out there in the wild.

stopdesign

Good news everyone: Douglas is back! Yay!

Effective Design for Multiple Screen Sizes | mobiForge

A superb article by Bryan Rieger on designing for multiple screen sizes. The closing section makes it clear that if you care about mobile, you'd better get comfortable with liquid layouts fast.

Styling XFN and rel-license links - Opera Developer Community

Christopher Schmitt shows how to style XFN links using attribute selectors.

Font-weight is still broken in all but one browser | Clagnut § Browsers · Typography · CSS techniques

A superb bit of browser research by Richard. "There’s more to the lives of many typefaces than just Bold and Regular, but almost no browsers follow the proper CSS 1 way of specifying Light, Semibold, Black and other weights. There is a workaround,…

24 ways: A Christmas hCard From Me To You

A great 24 Ways article by Elliot on creating and styling hCards.

Helvetireader

Jon's helvetican theme for Google Reader.

Rate My Area | Review and share your favourite places!

Clearleft worked on this project; information architecture, visual design, and front-end (that was my part: markup, CSS and JavaScript). I'm very, very happy to see that it's finally launched and even happier to see the level of appreciation for g…

Microformats.org Wiki 2.0 · Microformats Wiki

Ben has been working hard to upgrade the microformats wiki. His hard work has paid off: it looks great!

Fonts available for @font-face embedding - Webfonts.info

A wiki for tracking which fonts have licenses that allow for @font-face embedding with CSS.

Everything You Know About CSS Is Wrong! - SitePoint Books

Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.

Ubiquitous web font embedding just got a step closer | Web Directions

John has come to the same conclusion as Richard with regards to font embedding. In short, the font foundries are missing a huge revenue stream. They could be offering fonts on a per-domain basis (a la Google Maps or any other third-party API). Rem…

paulhammond.org: Conditional classnames

Here's a handy little trick from Paul: use conditional comments to add a class to your BODY element, allowing you to target IE without a separate stylesheet.

Time to stop showing clients static design visuals | For A Beautiful Web

Andy makes a great case for presenting clients with designs in HTML/CSS rather than flat, fixed, non-interactive graphics.

CSS Systems for writing maintainable CSS | Natalie Downe

It looks like Natalie's presentation at BarCamp London 5 was excellent.

Five CSS design browser differences I can live with | For A Beautiful Web

A great article by Malarkey wherein he lists five examples of progressive enrichment (as Dan is wont to call it) complete with side-by-side comparisons. Useful ammo, this.

Simon Wiffen - Acoustic Singer Songwriter from Leeds

Just for the record, this is a superb example of a bulletproof liquid layout: Simon Wiffen, solo acoustic singer-songwriter from Leeds.

Typechart - Browse Web Type, Grab CSS.

A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.

minimalsites | minimal design css gallery

A gallery of minimally designed websites. There are some lovely grid/type-based designs on view here.

On Nails, Lipstick, and Redesigns — Unstoppable Robot Ninja

Ethan has redesigned. It's shiny and beautifully proportioned.

A new design | Clagnut § Blogging · Information design · Clagnut news

Richard has launched the redesign he's had bubbling away for a while now. 'Tis lovely and gridilicous.

For A Beautiful Web | Creative web site design and development training and workshops

Malarkey has launched his latest project: For A Beautiful Web is a series of web design master class training workshops covering topics including visual design for the web, best-practice XHTML mark-up and CSS, Microformats and practical web access…

iphone login screens - a set on Flickr

Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.

Flickr login mobile

CSS for lunch » Mastering the presentation layer of the web… at lunch time.

Here's a great project from Andrew Mager. He takes a little time out at lunch to post a small markup or CSS tip. Over time this builds up into a really valuable resource.

Sushi & Robots

Jina's new site is live and quite lovely it is too.

The Paragraph in Web Typography & Design — Jon Tan ?

A wonderfully informative and useful look at paragraphs styles ...in history and in CSS.

Grid Calculator

A handy tool for calculating grid and gutter widths although you'll still have to some calculating to get the figures to work in percentages (assuming you're designing for the Web).

Twitter / Simon Willison: javascript:(function(){var ...

Copy this bit of JavaScript code. Visit your website of choice in Safari. Paste said code into the address bar. Giggle with glee.

Google Doctype - Google Code

This looks like it could be a very valuable resource indeed: a user-contributed and edited reference for HTML, CSS and JavaScript.

Selectors

The selector of the beast does not exist.

Seed Conference | Chicago | 6 June 2008

A version of the beautiful Seed Conference one-sheet Website that has been reworked to use ems instead of pixels.

Cheesophile : What a friend we have in Cheeses!

Jon's demo site for his talk at The Future of Web Design. It's all about cheese. I wish it were real.

CSS Compatibility and Internet Explorer

A very handy table of CSS support for versions of Internet Explorer from 5 to 8. Note that IE8 Beta 1 is listed separately to IE8.0.

The Highly Extensible CSS Interface

Cameron has put all the materials from his four-part series together in one handy spot.

Seed Conference | Chicago | 6 June 2008

The typography on this page is simply gorgeous. And the event looks good too.

San Diego Web Standards Group

Live in San Diego? Interested in web standards? Come along tomorrow to the inaugural San Diego Web Standards Group meetup. You won't regret it.

Activate The Death Ray | A demonstration site by Andy Clarke

A holding page for Malarkey's upcoming series of workshops. Add you name if your interested.

Edge to edge alignment with CSS | Matt Wilcox .net

Here's a very handy CSS technique for floating a group of objects edge to edge. I've been in this situation quite a few times in the past.

960 Grid System

Here's another CSS framework for grids. It could prove to be very useful for wireframing.

× × timoni.org × ×

I'm loving the typography on this blog.

XFN encoding, extraction, and visualizations - Opera Developer Community

Brian has written an excellent article that not only explains how to write XFN but also how to parse it.

Pixish: We bring visual artists and publishers together

The latest website from Derek Powazek allows artists and businesses to hook up. Nicely done.

Sniff browser history for improved user experience

I saw Niall explain this at the Social Graph Foo Camp. It's crazy stuff that could be used for good or for evil.

kropp

Good typography + stylish grid + liquid layout = WIN!

Vitamin Features » Stay on :target

Brian shows some clever uses of the little-known :target pseudo-class.

Empty Links and Screen Readers » Yahoo! User Interface Blog

Excellent research into how screen readers respond to empty links (i.e. A elements with no text between the opening and closing tags).

How to create CSS layouts without using FLOAT

An interesting CSS technique that uses table-layout instead of float.

CSS Gradient Text Effect

A neat new CSS effect. You don't see many of those these days.

MacHeist » Bundle

The asking price of $49 for all these apps together is a bargain. CSSEdit alone is easily worth that much.

Dean Edwards: IE7.js version 2.0 (beta)

A new version of Dean's IE7 script is available. Given my daily frustrations with IE6, I hope its marketshare declines enough that I can use this as a magic bullet in front-end development.

Clichés are hard

An offhand remark I made on Twitter spurs Dom on to do a whole lotta research on character encoding in class names.

Vitamin Features » Creating Sexy Stylesheets

Jina has put together an excellent series of steps you can take to keep not just nice, but downright sexy.

The Rissington Podcast | Like Gardeners Question Time, but for geeks

Check out the redesigned site for the podcast from Jon and John. Acknowledge the divinity in its gloriously liquid splendour. Smashing work, chaps!

Markup Map for hCard Microformat : Christopher Schmitt

A handy diagram showing the nesting of class names in an hCard. Useful for styling.

Safari CSS Reference

A comprehensive list of all the CSS properties supported in Safari including "a number of properties that are not supported for developer use."

Surfin’ Safari - Blog Archive » CSS Transforms

WebKit continues to steam ahead. Now with CSS transforms; you can scale and rotate your elements.

CSS Eleven | Malarkey Rides Again

Here's the in-depth lowdown on the CSS Eleven supergroup announced by Andy at Web Directions South last week.

Design View / Andy Rutledge - quiet structure

A nice overview of avoiding clutter in web design. It's not just about whitespace; the number of edges and gradients can also add up to an undifferentiated design.

Styling File Inputs with CSS and the DOM // ShaunInman.com

A clever little technique by Shaun for faux-styling file input elements using a mixture of CSS and JavaScript.

CSS Training Courses with edgeofmyseat.com

Want to learn CSS kung-fu? Get thee to Maidenhead on October 29th and you can learn from the best: Rachel Andrew and Drew McLellan.

Jeffrey Zeldman Presents : What crisis?

I was feeling very browbeaten after Molly's tirade but count on Jeffrey to put things in perspective.

Unstoppable Robot Ninja

Sidesh0w is dead! Long live the new Ethan! I for one welcome our unstoppable robot ninja overlords.

design|snips

A collection of websites incorporating noteworthy visual design elements.

Jeffrey Zeldman: King of Web Standards

Hail to the King... so says Business Week.

Syncotype Your Baselines — RobGoodlatte.com

Here's a handy little bookmarklet that overlays a grid on a web page—very handy for tweaking vertical rhythm and aligning to a baseline.

Blueprint: A CSS Framework

Pulling together a bunch of CSS tricks from a range of sources: reseting, baseline typography and grids (fixed width, unfortunately).

What's New at The W3C Markup Validation Service

The Validator got a new lick of CSS paint and it's looking good.

Web Designer Wall - Design Trends and Tutorials

A nice collection of CSS tutorials and design trends.

Thirteen Simple Rules for Speeding Up Your Web Site

The justification behind YSlow. If you've heard Nate Koechley speak, some of this will be familiar to you. It's all solid advice as far as I can tell.

Apple Developer Connection - iPhone for Web Developers - Optimizing Web Applications and Content for iPhone

Straight from the horse's mouth, advice for web developers on how the iPhone's browser renders pages. I'm very intrigued to find out how it handles liquid designs with no set min-width.

Mark Boulton Design : +44 (0)845 603 2399

Mark has launched his business site. Lovely grids and typography, as you'd expect.

W3Conversions .:. Web Standards, Accessibility and Training

Stephanie Sullivan has redesigned. Her site is now almost as smart and sassy as she is. Very nice work, Steph.

Eric's Archived Thoughts: Formal Weirdness

Eric explores the dark cabbalistic world of attempting to style form controls. This explains why he doesn't use the universal selector for resetting default styles.

Stuff and Nonsense

Malarkey's got a brand new bag... if by "bag" you mean "website". And a very nice bag it is too.

Guardian Unlimited

The front page of The Guardian website has been redesigned with some good use of typography and colour. Shame it's so wide though.

110am. A Seasonal Design

Tom Watson's new site design changes stylesheets with the season. More of this kind of thing please, Web.

Andy Pearson is a web designer and developer from the UK

A nice subtle lifestream implementation complete with fading over time.

Digital Web Magazine - Redesigning the ExpressionEngine Site

A really nice article by Jesse Bennett-Chamberlain detailing the process behind a site design.

Subtraction: Oh Yeeaahh!

Khoi has posted the slides from his grids workshop online. Download and learn.

Upcoming.org Suggestion Board

Did you notice that Upcoming recently switched from liquid to fixed? Have your say about that here.

nasty nets » 2001 2006

Here's some clever CSS: one YouTube video inside another YouTube video. Press play on both.

A List Apart: Articles: Whitespace

Mark has written a great article for ALA, focusing on one aspect of good typography: whitespace.

YUI: CSS Grid Builder

A handy tool for creating grids using Yahoo's CSS.

mezzoblue § About Mezzoblue

Dave redesigns. And before I could bash him for his wide fixed width layout, he went and added a Jeremy Keith Button® on his about page that toggles between liquid and fixed. Cheeky bugger.

Pie Chart (JavaScript edition)

Dmitry built an incredibly cool JavaScript pie chart. It also integrates with Flickr using Ajax to do a Flickr version of googlefight. Great stuff!

SimpleBits

Dan has redesigned his site and it looks gorgeous.

Multiple CSS background images

Got Safari? Try resizing this page.

Transcending CSS: The Fine Art of Web Design by Andy Clarke

Andy showed me some pages from the book over video iChat today. It looks great.

hicksdesign: design for print and new media Ο°

Jon redesigns too. It's lovely, but a bit wide for my taste.

Photo Matt » New Blog Design

Matt Mullenweg redesigns. I like it.

The 9th Incarnation of ShaunInman.com // ShaunInman.com/post

Shaun is pushing the boundaries of CSS as an indicator of the passage of the time. I'm really happy to see this kind of experimentation: this is exactly why we want separation of content and presentation.

Highlight Microformats with CSS :: journal :: hicksdesign Ο°

Jon has come up with a lightweight user stylesheet for highlighting microformats. It works a treat for my site.

CSS - Cansei de Ser Sexy

You gotta love an album with an opening track called "CSS Suxx"... especially when it sounds this good.

The Adventures of Cindy Li

Cindy redesigns... with standards. Gorgeous!

SimpleBits | Pairing Wine and Microformats

Dan documents the process of adding microformats to Cork'd.

Bite Size Standards

John has been working behind the scenes on this for quite a while and now it's ready for launch. Lots of yummy standards-based goodness in bite-sized chunks.

Cameron Moll ~ I {heart} design.

Cameron has put together a lovely looking portfolio page.

Dave Shea London Geek Dinner - 23rd January 2006

A transcript of the Q&A session with Dave.

Digital Web Magazine - CSS Typography

Garret Dimon runs through some of the options available when using CSS to improve readability.

iIR: img Image Replacement

Aaron uses image replacement on an image to provide one image for screen and another print. Very clever.

A List Apart: Articles: Thinking Outside the Grid

Molly has written a great article about CSS and urban planning. The ensuing comments are sometimes thought-provoking, but mostly just plain antfucking.

Eric's Archived Thoughts: Adium: Chatting With Style

You can skin Adium using just XHTML and CSS. Who knew?

The Anatomy of Web Fonts [Design Principles]

Andy Hume has written a superb article about typography on the Web.

24 ways

One great web development tip for every day in the Advent calendar, courtesy of Drew McLellan

Valid downlevel-revealed conditional comments | 456 Berea Street

Keep this one handy in case you have to use conditional comments to hide something from Internet Explorer.

Simply Accessible

Derek's new site is going to be a great resource for practical accessibility techniques.

Web Standards Group - Ten Questions for Patrick Lauke

Patrick Lauke, master of photography and accessibility.

Liquid Designs

This is something I always meant to do but never got around to: a gallery site for good liquid design.

An Event Apart News: Lightning Strikes

Eric and Jeffrey are going to the city of brotherly love.

Surfin’ Safari » Multiple Backgrounds

Multiple background images (from CSS3) is implemented in Safari.... and has been for months!

two point three

This is a beautiful blog.

SimpleBits | New Book: Bulletproof Web Design

Dan's new book will be out soon. I predict it will be great: the subject matter is exactly what CSS coders need to know.

Auto Zoom Greasemonkey script

A Greasemonkey version of my zoom layout bookmarklet. Great stuff!

Falling in love with CSS - Vorsprung durch Webstandards

Eight people, including myself, explain what's so great about CSS.

No More CSS Hacks

This is probably the worst possible way to deal with browser inconsistensies. Doesn't anyone else remember forking their JavaScript in the 90s? Don't try this at home.

CSS Beauty | Designer in Action

I've been suckered into another debate on fixed width layouts: "Discussing whether 800 is better than 1024 is like discussing whether Coke is better than Pepsi when all you really want is a nice drink of water."

CSS Reboot - May 1st 2005

Some nice CSS based redesigns this year. Of course, most of them are fixed width. C'est la vie.

Web specifications supported in Opera 8

The DOM support looks great.

Six Ounce Board Store: Board gallery

A nice implementation of my JavaScript image gallery on a really nicely designed site

Xylescope Beta

A very nifty little OS X app for viewing the markup and style of web pages. Sehr gut gelungen.

About fluid and fixed width layouts

Roger Johansson details his elastic design.

GarrettDimon.com

Garrett has a new site. I'm very keen on the design, especially the typography.

7 steps to better handheld browsing

Simon has some good hands-on suggestions for mobile stylesheets.

Rob Weychert

Rejoice! Rob has redesigned and it's a thing of beauty, semantically and visually.