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 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.
Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes - Tantek
I love that Tantek is as pedantic as I am …although I don’t think “pedantic” is exactly the right word.
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.
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.
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.
Proposition to change the prefixing policy from Florian Rivoal on 2012-05-04 (email@example.com from May 2012)
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.
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 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.
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.
impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz
Joni points out a great advantage to the mobile-first approach if you choose not to polyfill for legacy versions of IE: you can go crazy with all sorts of CSS3 goodies in the stylesheet you pull in with media queries.
A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc., Boston, MA
A really nice pattern for data tables in responsive designs. Just as with conditional loading, the key point is making a distinction between essential and optional content.
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.
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.
#816: Revert mobile-first media queries and remove respond.js - Issues - h5bp/html5-boilerplate - GitHub
This thread on whether HTML5 Boilerplate should include Respond.js by default (and whether the CSS should take a small-screen first approach) nicely summarises the current landscape for web devs: chaotic, confusing …and very, very exciting.
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.