Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.
Here are some nice patterns that Paul uses for starting points in his own projects.
This is handy: a look at which DOM properties and methods cause layout thrashing (reflows).
The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!
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.
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.
Some sensible ideas about having a consistent CSS writing style.
Paul has open-sourced his front-end style guide and put it up on Github. It’s a very handy starting point for making your own.
Samantha does an excellent job of explaining how useful style tiles can be for visual design and iteration.
Anna goes through some of her favourite pattern libraries. It’s really, really great to see this stuff getting documented.
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.
Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.
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.
Some thoughts on structuring your CSS for responsive designs.
David gives a quick rundown of some of the selectors we can expect to see in CSS4.
This presentation from Lea contains some CSS gems (and it’s all delivered in HTML).
Samantha gives the rundown of a hands-on use of Style Tiles.
Bootstrap is Twitter’s CSS and markup style guide—very similar to the pattern portfolios that we often provide as deliverables at Clearleft.
Use strong, definite language in your writing. Make that sentence your bitch.
A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.
An excellent design technique from Samantha that allows you to nail down a visual vocabulary without using something as wishy-washy as a mood board or as rigid as a fully-blown comp. Brilliant!
The style tile is not a literal translation of what the website is going to be, but a starting point for the designer and the client to have a conversation and establish a common visual language.
Paul has created a site for tracking usage of the BBC’s GEL (Global Experience Language) visual design language. Nice’n’responsive it is too.
Paul gives an excellent and thorough explanation of why systems thinking is important in web design.
Mozilla aims to plug the :visited/getComputedStyle bug/feature.
This is an interesting idea: paste in some markup and this will automatically generate CSS selectors based on your classes and IDs.
A CSS gallery with a difference. This one highlights sites with good print stylesheets.
Scroll to the bottom to see a nice robots-into-zomies effect.
A really nice stylesheet for sitemaps represented as nested unordered lists in HTML.
Typographically thoughtful themes for NetNewsWIre. Even if you don't use the RSS reader, check out the gorgeous design of this site.
Kai has written a handy little CSS diagnostic script to help you identify problems with your markup.
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?
This article is an oldie but a goodie. I find myself referring to it all the time: "Beating typographic correctness out of (X)HTML: more than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography."
Jon's helvetican theme for Google Reader.
Rachel and Kevin's new book looks very interesting indeed. It is about just one thing: CSS tables.
A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.
A wonderfully informative and useful look at paragraphs styles ...in history and in CSS.
About freakin' time! The FONT element, whose presence until now in HTML5 was an utter embarrassment to all concerned, is finally gone. Thanks, Hixie.
The Economist style guide: the "dos and don'ts" section is particularly useful.
Jina has put together an excellent series of steps you can take to keep not just nice, but downright sexy.
A nice well-illustrated article from Larissa Meek pointing to some design trends that can be applied to the Web.
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.
Tom Watson's new site design changes stylesheets with the season. More of this kind of thing please, Web.
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.
If you take a picture of anybody at South by SouthWest, be sure to tag your picture on Flickr with stylemastersxsw. You could win an iPod nano.
Aaron uses image replacement on an image to provide one image for screen and another print. Very clever.
You can skin Adium using just XHTML and CSS. Who knew?
Simon has some good hands-on suggestions for mobile stylesheets.