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?
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.
Jen tackles six aspects of web design that were true …but no longer.
- Everything must be a floating bar of soap
- Rectangles; only rectangles
- We can’t control the fold
- 12 columns is best
- We have to use a layout framework
- We are stuck in a rut because of RWD
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.
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.
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.
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 withfallbackoroptionalwhen usingfont-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. */
}
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.
Another style guide generator that parses comments in CSS.
A thorough explanation of @supports from Jen, with plenty of smart strategies for using it in your CSS today.
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.
Some nifty layout tricks using the writing-mode property in CSS.
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.
Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.
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.)
This is a wonderful way of progressively explaining the layered approach to building for the web that Charlotte was teaching in her Codebar workshop.
I love this back and forth between Brad and Jonathon. I think they’ve both got some good ideas:
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.
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.
Here’s a fun game to help practice those CSS selectors.
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.
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.
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.
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.
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.
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.
One way of implementing the growing/shrinking navigation pattern—an alternative to just shoving everything behind a hamburger icon.
This looks like a great resource for beginners looking to learn HTML and CSS.
A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!
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.
The slides from Arelia’s flexbox talk.
A few common patterns—tooltips, fly-out menus, and toggles—that you can achieve with CSS.
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.
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.
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.
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.
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.
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.
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!
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.
This is quite wonderful: a recreation of the video for Prince’s Sign O’ The Times made entirely with HTML and CSS.
Here’s a well put-together collection of common patterns that are now much easier thanks to flexbox.
This guide to CSS grid layout is the perfect companion piece to Rachel’s Grid by Example.
If you want to keep up to date with all the coolest stuff landing in CSS, I recommend bookmarking this ever-changing page.
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.
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.
Here’s a clever way to get text centred when it’s short, but left-aligned when it wraps.
Everything you ever wanted to know about CSS pseudo-classes (and pseudo-elements).
Classic Swiss designs recreated in CSS (with added animation).
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.
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?”
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.
Paul is digging deep into flexbox and finding it particularly useful for internationalisation …but there are still some gotchas.
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.
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).
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).
If Flexbox Froggy was too easy for you, take it to the next level with this tower defence game.
A pattern library of Walmart’s front-end code.
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.
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.
’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.)
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!
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.
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.
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!
You can do anything with CSS these days.
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!
A great description of a solid architectural approach to building on the web (and not just for accessibility either).
A nicely documented pattern library.
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!
We have some new font keywords that are basically shortcuts to using the system fonts on a device. This article explains the details.
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.
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.
A really terrific article from Dan on building pattern libraries. In summary:
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,)
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.
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.
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.
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.
Quite a few moving parts in this technique from Emil, but it’s very clever.
This looks like a great resource for anyone setting out to learn how to make websites.
A list of known bugs (and workarounds) in flexbox implementations. This is going to be handy to refer back to.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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
This is such a delightful story of a brilliant mistake—true typographic nerdery and nostalgia.
Read all the way through for a free gift.
I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.
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.
What a lovely bit of progressive enhancement—styling data tables to display as charts.
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!
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).
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.
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.
A great presentation from Stephen. He takes a thoughtful look at our processes and tools.
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.
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
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.
An in-depth look at where web components stand today, together with some very good questions about where they might be heading tomorrow.
Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.
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.
I really like the way that Paul’s talk builds on top of ideas laid down by Ethan and Frank. Good stuff.
An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.
A comparison of when to use percentages and when to use vw/vh in your CSS.
A deceptively simple but powerful use of flexbox.
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.
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.
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.
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.
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.
Mark Rothko paintings recreated with CSS gradients.
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).
Beautiful use of CSS transitions and transforms.
Also: CSS is officially the new Flash—”skip intro” is back.
Practical examples showing where you can use flexbox right now, along with some strategies on how to start doing it.
A terrific bit of smart CSS thinking from Heydon Pickering.
You know he’s speaking at Responsive Day Out, right?
More flexbox!
This time it’s a great article by Karen Menezes filled with practical examples showing where you can use flexbox today.
A really handy interactive intro to flexbox. Playing around with the properties and immediately seeing the result is a real help.
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.
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.
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.
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.”
A self-describing list of cursors available through CSS.
Four different techniques for vertical centring in CSS, courtesy of Jake.
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.
A great technique from Heydon for styling radio buttons however you want.
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.
Wonderfully creative use of CSS gradients, borders, box-shadows, and generated content.
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.
Harry has written down his ideas and recommendations for writing CSS.
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.
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.
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.
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.
Turns out that the :checked pseudo-class selector allows you to do some clever interaction without JavaScript.
Some very handy techniques for working with right-to-left text.
The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).
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.
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 clever way of doing progressive disclosure with CSS.
A lovely little tale of empowerment through HTML and CSS.
Scott’s trying to find out the best ways to load critical CSS first and non-critical CSS later. Good discussion ensues.
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.
A lovely little selection of loading indicators powered by CSS animations and transitions.
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.
This visual approach to demonstrating how CSS selectors work is really handy.
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.
Funny because it’s true:
The thing I regret the most is how my class addiction affected my relationship with HTML.
The alphabet illustrated with CSS.
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.
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.
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!
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.
An in-depth look at using icon fonts without any nasty edge-cases ruining your day.
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.
A lovely history lesson on CSS from John.
This looks interesting: a CSS postprocessor that polyfills support for perfectly cromulent styles.
John shares his concerns about the increasing complexity involved in developing for the web.
Some excellent practical advice on progressive enhancement.
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.
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.
I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.
Dan explains the reasoning behind his “Sigh, JavaScript” Tumblr blog, and provides an excellent example of progressive enhancement in the process.
Go, Dan, go!
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.
Looks like Google are offering responsive (or at least adaptive) ad sizes.
A page to demonstrate the conditional CSS technique I documented a while back.
A very handy starting point for creating a front-end style guide.
A great history lesson from Dave.
Ah, I remember when the CSS Zen Garden was all fields. Now get off my CSS lawn.
The battle between web fonts and performance. Ian Feather outlines some possible solutions, but of course, as always, the answer is “it depends”.
Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.
A handy walkthrough of using icon fonts. The examples here use the excellent IcoMoon service
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.
Wow! The CSS Zen Garden is a decade old. Crazy! It’s a true piece of web history …and it’s back!
Want to style those new HTML5 input types? I hope you like vendor prefixes.
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.
A handy one-stop-shop for tips on improving front-end performance.
A handy step-by-step guide to all the ways you can use CSS for layout.
Chris takes a look at all the different ways you can use SVG today.
Vasilis examines the multitude of factors that could influence an ideal measure.
A beautiful experiment with CSS transforms and a smattering of JavaScript.
A very hand tip from Ben on using SVG background images with a PNG fallback for IE8 and below.
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.
Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!
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.
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.
An in-depth look at CSS transitions with some handy tips for improving performance.
I love that Tantek is as pedantic as I am …although I don’t think “pedantic” is exactly the right word.
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.
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.
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”.
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.
The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!
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 shares my feelings on the email notification anti-pattern.
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.
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.
Tim shows how to make a scalable three-line navicon in CSS.
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).
I thoroughly agree with Lea’s approach. It’s all about the craft.
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.
Some good practical advice on improving performance. This should all be familiar to you, but it’s always worth repeating.
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.
Some sensible ideas about having a consistent CSS writing style.
A really great markup and CSS pattern for “content first, navigation second” from Aaron.
Jake demonstrates his technique for preprocessor-generated stylesheets for older versions of Internet Explorer (while other browsers get the same styles within 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.
Not only is FixMyStreet responsive, it’s using the “display: table-caption” trick I documented for adjustable “content first/navigation second” source order.
A nifty example of responsive tables. View source to see how it’s done.
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.
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.
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.
This seems like a sensible way for browsers to approach implementing vendor-prefixed CSS properties.
Using flexbox to creata a narrow-column stacking order that’s unrelated to the source order.
A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.
A smart response to the little conundrum I posted on my blog yesterday about detecting media-query quarantined CSS properties from JavaScript.
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.
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.
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.
Tim has published the results of a whole bunch of testing he did on how different browsers deal with hidden or replaced images.
In amongst all the shiny demos on this site, this one could actually be useful.
Here’s a handy little tip for CSS animations: instead of changing position properties, use translate instead.
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.
Emily walks us through a responsive design case study, stressing the importance using percentages for layout.
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.
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.
A sweet little meditation on the nature of the web and responsive design.
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.
An in-depth look at naming patterns for classes to help streamline CSS.
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.
The slides from Andy’s tour-de-force presentation at South by Southwest on CSS best practices.
Jeff documents some of the techniques he’s using to tackle responsive design, with some tips specifically for SASS.
A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.
A nice little bit of CSS for a page-loading animation. View source.
A detailed overview by Filament Group on progressively enhancing navigation for responsive sites.
The slides from Chris’s presentation on the known unknowns of the web.
A great pattern library from Dan.
A really handy test site from Lea that reports your browser’s recognition of CSS properties.
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.
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.
A bookmarklet version of that handy multiple-iframe page I linked to the other day. Even more useful for testing responsive designs!
A handy little document to load pages into differently-sized iframes—useful for testing responsive designs.
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.
Cute CSS animations illustrating the incredible rate of uploads to YouTube.
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.
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.
Richard starts diving into some the nifty ligatures that are becoming available to us in OpenType fonts with CSS3.
This is really handy: a bookmarklet that will disable any CSS3 on a page so you can check that your fallbacks look okay.
Stephen gives an excellent run-down of flexbox and how you can use it today.
A competitor to Prezi built with HTML, CCS and JavaScript.
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 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.
Most of these are pretty over the top but they’re good proofs of concept.
PPK tests the various ways that mobile browsers handle position:fixed, complete with videos.
Here’s a geek advent calendar I missed. There are some great CSS techniques here.
An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.
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.
If you use Sass, this could be a really handy technique for handling IE<9 support with mobile-first responsive designs.
Alex weighs in on the newly-reopened debate on vendor prefixes, roundly squashing Henri’s concerns.
Brad takes a detailed look at mobile browser support for fixed positioning and how it intersects with page zooming.
Some thoughts on structuring your CSS for responsive designs.
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.
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.
A great article by guest author Ethan on the various approaches to sizing text in CSS.
Lea documents a whole bunch of CSS animation possibilities.
David gives a quick rundown of some of the selectors we can expect to see in CSS4.
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.
A framework for banging out ready-made responsive designs.
A wonderfully in-depth article from Zoe on all the practical aspects of using media queries for layout.
This presentation from Lea contains some CSS gems (and it’s all delivered in HTML).
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.
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.
A set of default styles to get started on a mobile-first responsive design.
This handy matrix shows the effect of different -webkit-font-smoothing setting on various text combinations (serif/san-serif light/dark, etc.).
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.
A look under the hood of the dConstruct website (including some nth-child selectors I threw in there).
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.
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.
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.
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’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.
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.
A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.
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.
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.
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.
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.
Some great, considered thoughts from Mark on how CSS Grid Layout could work as part of a larger tradition in design.
A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.
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.
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).
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).
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.
I agree with Oli’s conclusion:
Save IDs for fragment identifiers or JavaScript hooks.
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.
Nicholas and Nicole have unveiled the CSS companion to JS Lint. And yes, it will your hurt your feelings.
Eric is making some genuinely beautiful art by applying CSS transforms to some well-known sites.
Chloe’s redesign/realign is a lovely bit of HTML5 and CSS3 all wrapped up in a responsive layout.
Josh explains the pros and cons of embedding background images in your CSS using base 64 encoding.
A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.
Buy. This. Book.
I mean it.
This is cute: using media queries to display multiple CSS Zen Garden submissions without refreshing the page — just adjust your browser window.
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 rejects a redesign in favour of a bit of responsive tweaking — and very nice it is too.
A useful bookmarklet that suggests font stacks to match up with the web fonts on whatever page you happen to be viewing.
A lovely bit of experimentation with prime numbers and multiple background images.
A supremely useful tool from Google for measuring performance.
Testing ways of only displaying background images on large screens whilst ensuring that they aren’t downloaded for smaller screens.
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.
Andy just debuted this at An Event Apart—lovely stuff.
Fellow Brightonians, the brothers Ribot and co., launch an excellently responsive company site.
A cute’n’nifty demonstration of transforms and animations in CSS that works a treat in Webkit.
A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.
Some nice drop-shadow effects. Generated content is the key.
Syntax for @font-face that’s more bulletproof than the techniques previously considered bulletproof …’till an even more bulletproof syntax comes along.
A great presentation by Andy on the use of progressive enhancement at Clearleft.
A curated collection of responsive web designs.
A beautiful responsive design, within the confines of Tumblr.
Anna’s redesign is beautiful, no matter what browser or device you’re using.
This is the webpage of a great presentation on HTML5 and CSS3. It is also the presentation itself.
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.
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.
A really nice example of responsive web design from an unexpected source.
An oldie but a goodie. This is why we have standards.
Nicole proposes an interesting way of clearing floats with a combination of display:table-cell and generated content.
A beautiful new responsive design from Mark.
37 Signals document their experiments with responsive web design. Looking good.
A fluid grid that linearises at smaller viewport widths.
A neat little experiment in replicating classic 80s albums using CSS.
A very impressive collection of CSS demos using no JavaScript. I like the clever use of :target to create tab functionality.
This looks like it could be a handy little tool for creating test cases with HTML, CSS and JavaScript.
A great explanation of the responsive enhancement of this site.
A cute little tool to help refine colour palettes.
Drag the text 'round for a bit of fun.
Ethan shares his thoughts on the role of the reference design in the responsive workflow.
A lovely idea, nicely implemented: time-conditional CSS.
Edit this page. Then view source.
Lovely typographic showcases from Stan and friends.
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.
The newest web fonts delivery service is a collaboration between five foundries: The Font Bureau, Ascender, Roger Black, Petr van Blokland and DevBridge.
Another set of default HTML/CSS/JS templates with some very clever ideas built in (courtesy of the always-brilliant Paul Irish).
Barebones templates for HTML5 documents. It needs a bit of work but it's a nifty idea.
An all-in-one validator from the W3C: markup, CSS and feed validation.
An excellent argument in favour of vendor prefixes in CSS, from Eric.
Just in case you forget.
Jon gets flexible. This is the mark of a true web designer.
A handy tool that generates font-sizing CSS based on a drag'n'drop interface.
A clever technique to create the effect of multiple background images using the :before and :after pseudo-elements.
Google-hosted free-as-in-beer webfonts.
Get a glimpse behind Fontdeck's curtain.
A very detailed set of coding standards and guidelines.
A clear explanation of device-width from PPK.
A (webkit-only) CSS3/HTML5 take on the Doctor Who opening titles.
Microsoft, Mozilla and Opera have formally submitted the WOFF font format to the W3C.
This web conference in July in St. Petersburg, Florida looks great — the line-up is excellent and tickets cost just $99. Bargain!
A lovely bit of CSS3.
A very handy GUI for figuring out the somewhat complicated syntax of border-image in CSS3.
Mozilla aims to plug the :visited/getComputedStyle bug/feature.
Edit some CSS rules and this in-browser code editor will automatically update related browser-specific declarations.
A handy shortcut for when you just can't recall the exact syntax of border-radius.
This is the way to do an adaptable liquid layout. Media queries are your friend. Oh, and the content's good too.
A thoroughly researched and well-written look at font stacks, with some practical suggestions and advice.
A store of fonts for sale, many of which have licenses that allow you to use them with @font-face.
A nifty little CSS experiment.
This is an interesting idea: paste in some markup and this will automatically generate CSS selectors based on your classes and IDs.
Beautifully done with HTML5 and font linking.
Test cases for font-linking.
Steve Souders does the research and reveals the sad truth about the effect font-linking has on performance.
A quick, slick primer on font linking.
A CSS gallery with a difference. This one highlights sites with good print stylesheets.
A good look at choosing fonts for font linking.
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.
Scroll to the bottom to see a nice robots-into-zomies effect.
Getting font-linking to work in all browsers.
Some very handy Textmate tips from Emil ....especially the bit about doing calculations for vertical rhythm.
Gorgeous visual design for an interestingly eclectic site.
Elliot gives a rundown of the font delivery services for the web that are on the way.
A whole heap of optimisation techniques from Google for faster CSS, JavaScript, markup and PHP.
A good, clear-headed summation of font linking.
A great round-up on the current state of web typography following TypeCon 2009.
@font-face for all — Ted shows how to convert TTF files to EOT using the command line.
Another font-linking service is on the way.
A really nice stylesheet for sitemaps represented as nested unordered lists in HTML.
Steven Pemberton, one of my favourite long-term thinkers, talks about programming, markup and XForms.
Experimenting with CSS3 and HTML5 features implemented in Webkit.
Double the awesomeness: Dan and Ethan made a book ...and a DVD ...and a workshop.
A surface skim of maintainability in front-end development.
A nice rundown of media queries and multiple columns in CSS3.
A good description of how font linking works.
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.
Jeff's got something up his sleeve that will help the cause of web typography.
A great example of @font-face in action: comparing Graublau Sans Web with with Lucida Grande.
This is just brilliant! Natalie has taken the Flash-based Pocketmod and reproduced it using HTML and CSS (including CSS transforms).
A repository of liberally-licensed fonts to link to with @font-face.
A nice stab at a markup (and CSS) pattern for forms.
"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."
A blog of all things webkit, itself showcasing some of the CSS niceties in the rendering engine.
An excellent take on font-linking from someone who designs typefaces for a living.
Mark Pilgrim knows the score.
Ethan follows up his Fluid Grids article with an equally excellent piece on resizing images.
A quick round-up of typographic best practices applied to the web.
Kai has written a handy little CSS diagnostic script to help you identify problems with your markup.
Natalie has put up the slides and video from her excellent Girl Geek Dinner talk on CSS in The Eagle last week.
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?
Superb article by Ethan on calculating percentages for liquid layouts. Read it. Do it.
I love the design of this site almost as much as I love the content.
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.
The slides from Richard's superb Skillswap presentation.
This addition to Firebug is rather excellent: a built in reference for whatever you're inspecting.
A look at different font stacks out there in the wild.
Good news everyone: Douglas is back! Yay!
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.
Christopher Schmitt shows how to style XFN links using attribute selectors.
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,…
A great 24 Ways article by Elliot on creating and styling hCards.
Jon's helvetican theme for Google Reader.
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…
Ben has been working hard to upgrade the microformats wiki. His hard work has paid off: it looks great!
A wiki for tracking which fonts have licenses that allow for @font-face embedding with CSS.
Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.
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…
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.
Andy makes a great case for presenting clients with designs in HTML/CSS rather than flat, fixed, non-interactive graphics.
It looks like Natalie's presentation at BarCamp London 5 was excellent.
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.
Just for the record, this is a superb example of a bulletproof liquid layout: Simon Wiffen, solo acoustic singer-songwriter from Leeds.
A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.
A gallery of minimally designed websites. There are some lovely grid/type-based designs on view here.
Ethan has redesigned. It's shiny and beautifully proportioned.
Richard has launched the redesign he's had bubbling away for a while now. 'Tis lovely and gridilicous.
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…
Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.
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.
Jina's new site is live and quite lovely it is too.
A wonderfully informative and useful look at paragraphs styles ...in history and in CSS.
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).
Copy this bit of JavaScript code. Visit your website of choice in Safari. Paste said code into the address bar. Giggle with glee.
This looks like it could be a very valuable resource indeed: a user-contributed and edited reference for HTML, CSS and JavaScript.
The selector of the beast does not exist.
A version of the beautiful Seed Conference one-sheet Website that has been reworked to use ems instead of pixels.
Jon's demo site for his talk at The Future of Web Design. It's all about cheese. I wish it were real.
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.
Cameron has put all the materials from his four-part series together in one handy spot.
The typography on this page is simply gorgeous. And the event looks good too.
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.
A holding page for Malarkey's upcoming series of workshops. Add you name if your interested.
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.
Here's another CSS framework for grids. It could prove to be very useful for wireframing.
I'm loving the typography on this blog.
Brian has written an excellent article that not only explains how to write XFN but also how to parse it.
The latest website from Derek Powazek allows artists and businesses to hook up. Nicely done.
I saw Niall explain this at the Social Graph Foo Camp. It's crazy stuff that could be used for good or for evil.
Good typography + stylish grid + liquid layout = WIN!
Brian shows some clever uses of the little-known :target pseudo-class.
Excellent research into how screen readers respond to empty links (i.e. A elements with no text between the opening and closing tags).
An interesting CSS technique that uses table-layout instead of float.
A neat new CSS effect. You don't see many of those these days.
The asking price of $49 for all these apps together is a bargain. CSSEdit alone is easily worth that much.
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.
An offhand remark I made on Twitter spurs Dom on to do a whole lotta research on character encoding in class names.
Jina has put together an excellent series of steps you can take to keep not just nice, but downright sexy.
Check out the redesigned site for the podcast from Jon and John. Acknowledge the divinity in its gloriously liquid splendour. Smashing work, chaps!
A handy diagram showing the nesting of class names in an hCard. Useful for styling.
A comprehensive list of all the CSS properties supported in Safari including "a number of properties that are not supported for developer use."
WebKit continues to steam ahead. Now with CSS transforms; you can scale and rotate your elements.
Here's the in-depth lowdown on the CSS Eleven supergroup announced by Andy at Web Directions South last week.
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.
A clever little technique by Shaun for faux-styling file input elements using a mixture of CSS and JavaScript.
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.
I was feeling very browbeaten after Molly's tirade but count on Jeffrey to put things in perspective.
Sidesh0w is dead! Long live the new Ethan! I for one welcome our unstoppable robot ninja overlords.
A collection of websites incorporating noteworthy visual design elements.
Hail to the King... so says Business Week.
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.
Pulling together a bunch of CSS tricks from a range of sources: reseting, baseline typography and grids (fixed width, unfortunately).
The Validator got a new lick of CSS paint and it's looking good.
A nice collection of CSS tutorials and design trends.
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.
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 has launched his business site. Lovely grids and typography, as you'd expect.
Stephanie Sullivan has redesigned. Her site is now almost as smart and sassy as she is. Very nice work, Steph.
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.
Malarkey's got a brand new bag... if by "bag" you mean "website". And a very nice bag it is too.
The front page of The Guardian website has been redesigned with some good use of typography and colour. Shame it's so wide though.
Tom Watson's new site design changes stylesheets with the season. More of this kind of thing please, Web.
A nice subtle lifestream implementation complete with fading over time.
A really nice article by Jesse Bennett-Chamberlain detailing the process behind a site design.
Khoi has posted the slides from his grids workshop online. Download and learn.
Did you notice that Upcoming recently switched from liquid to fixed? Have your say about that here.
Here's some clever CSS: one YouTube video inside another YouTube video. Press play on both.
Mark has written a great article for ALA, focusing on one aspect of good typography: whitespace.
Happy tenth birthday, CSS.
A handy tool for creating grids using Yahoo's CSS.
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.
Dmitry built an incredibly cool JavaScript pie chart. It also integrates with Flickr using Ajax to do a Flickr version of googlefight. Great stuff!
Dan has redesigned his site and it looks gorgeous.
Got Safari? Try resizing this page.
Andy showed me some pages from the book over video iChat today. It looks great.
Jon redesigns too. It's lovely, but a bit wide for my taste.
Matt Mullenweg redesigns. I like it.
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.
Jon has come up with a lightweight user stylesheet for highlighting microformats. It works a treat for my site.
You gotta love an album with an opening track called "CSS Suxx"... especially when it sounds this good.
Cindy redesigns... with standards. Gorgeous!
Dan documents the process of adding microformats to Cork'd.
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 has put together a lovely looking portfolio page.
A transcript of the Q&A session with Dave.
Garret Dimon runs through some of the options available when using CSS to improve readability.
Aaron uses image replacement on an image to provide one image for screen and another print. Very clever.
Molly has written a great article about CSS and urban planning. The ensuing comments are sometimes thought-provoking, but mostly just plain antfucking.
You can skin Adium using just XHTML and CSS. Who knew?
Andy Hume has written a superb article about typography on the Web.
One great web development tip for every day in the Advent calendar, courtesy of Drew McLellan
Keep this one handy in case you have to use conditional comments to hide something from Internet Explorer.
Derek's new site is going to be a great resource for practical accessibility techniques.
Patrick Lauke, master of photography and accessibility.
This is something I always meant to do but never got around to: a gallery site for good liquid design.
Eric and Jeffrey are going to the city of brotherly love.
Multiple background images (from CSS3) is implemented in Safari.... and has been for months!
This is a beautiful blog.
A nice use of CSS.
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.
A Greasemonkey version of my zoom layout bookmarklet. Great stuff!
Eight people, including myself, explain what's so great about CSS.
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.
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."
Some nice CSS based redesigns this year. Of course, most of them are fixed width. C'est la vie.
The DOM support looks great.
A nice implementation of my JavaScript image gallery on a really nicely designed site
A very nifty little OS X app for viewing the markup and style of web pages. Sehr gut gelungen.
Roger Johansson details his elastic design.
Garrett has a new site. I'm very keen on the design, especially the typography.
Simon has some good hands-on suggestions for mobile stylesheets.
Rejoice! Rob has redesigned and it's a thing of beauty, semantically and visually.
