On pattern portfolios | Clear Thinking - The Clearleft Blog
Jon gives some insight into how and why we use pattern portfolios as deliverables at Clearleft.
Tags: style
Barebones — An initial directory setup, style guide and pattern primer by Paul Lloyd
Here are some nice patterns that Paul uses for starting points in his own projects.
On layout and web performance by Kelly Norton
This is handy: a look at which DOM properties and methods cause layout thrashing (reflows).
Base CSS | Pasteup | Guardian News
The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!
If Hemingway wrote JavaScript by fat xxx
This is a rather lovely way to show that in JavaScript, as in Perl, there’s always more than one way to skin a cat (in whatever idiom you prefer).
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.
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.
paulrobertlloyd/barebones
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.
A List Apart: Articles: Style Tiles and How They Work
Samantha does an excellent job of explaining how useful style tiles can be for visual design and iteration.
Style guide round-up
Anna goes through some of her favourite pattern libraries. It’s really, really great to see this stuff getting documented.
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.
Style Tiles
Samantha put together this handy one-page site to explain Style Tiles as part of her South by Southwest presentation.
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.
Structuring a Responsive Stylesheet | Sparkbox
Some thoughts on structuring your CSS for responsive designs.
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.
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).
agile approach | The Anatomy of a Design Decision: Examiner’s 2012 Campaign Site
Samantha gives the rundown of a hands-on use of Style Tiles.
Twitter Bootstrap
Bootstrap is Twitter’s CSS and markup style guide—very similar to the pattern portfolios that we often provide as deliverables at Clearleft.
The Elements of Fucking Style
Use strong, definite language in your writing. Make that sentence your bitch.
Layer Styles
A handy little GUI for generating CSS declarations for shadows, gradients, opacity and border radius.
Samantha Warren’s Web Design Blog | Design ~ Web Typography ~ Inspiration
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.
GELLED!
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.
Styleguides for the Web — Paul Robert Lloyd
Paul gives an excellent and thorough explanation of why systems thinking is important in web design.
Plugging the CSS History Leak at Mozilla Security Blog
Mozilla aims to plug the :visited/getComputedStyle bug/feature.
PrimerCSS
This is an interesting idea: paste in some markup and this will automatically generate CSS selectors based on your classes and IDs.
printFancy, a gallery of websites in print
A CSS gallery with a difference. This one highlights sites with good print stylesheets.
ThinkGeek :: Stuff for Smart Masses
Scroll to the bottom to see a nice robots-into-zomies effect.
SlickMap CSS — A Visual Sitemapping Tool for Web Developers
A really nice stylesheet for sitemaps represented as nested unordered lists in HTML.
LegiStyles™
Typographically thoughtful themes for NetNewsWIre. Even if you don't use the RSS reader, check out the gorgeous design of this site.
Kai Chan Vong - script snippets
Kai has written a handy little CSS diagnostic script to help you identify problems with your markup.
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: The Trouble With EM ’n EN (and Other Shady Characters)
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."
Helvetireader
Jon's helvetican theme for Google Reader.
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.
Typechart - Browse Web Type, Grab CSS.
A handy little tool that's beautifully designed. View typeface/style/size combinations and then grab the CSS.
The Paragraph in Web Typography & Design — Jon Tan ?
A wonderfully informative and useful look at paragraphs styles ...in history and in CSS.
font is dead, vive le style - W3C Q&A Weblog
About freakin' time! The FONT element, whose presence until now in HTML5 was an utter embarrassment to all concerned, is finally gone. Thanks, Hixie.
Research Tools | Economist.com | Economist.com
The Economist style guide: the "dos and don'ts" section is particularly useful.
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.
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.
Vitamin Features » Web Design-isms: 7 Surefire Styles that Work
A nice well-illustrated article from Larissa Meek pointing to some design trends that can be applied to the Web.
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.
110am. A Seasonal Design
Tom Watson's new site design changes stylesheets with the season. More of this kind of thing please, Web.
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.
feeling random?
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.
iIR: img Image Replacement
Aaron uses image replacement on an image to provide one image for screen and another print. Very clever.
Eric's Archived Thoughts: Adium: Chatting With Style
You can skin Adium using just XHTML and CSS. Who knew?
7 steps to better handheld browsing
Simon has some good hands-on suggestions for mobile stylesheets.