Screensiz.es »

A table showing “the screen specifications of the most popular devices and monitors currently on the market.”

Media Queries »

A collection of sites that use media queries and responsive web design practices.

Save bandwidth with webP – soon with fallback! »

CodePen »

“CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing.”

“Need to build a reduced test case to demonstrate and figure out a bug? CodePen is great for that. Want to show off your latest creation and get feedback from your peers? CodePen is great for that. Want to find example of a particular design pattern for you project? CodePen is great for that.”

Typeplate »

“A typographic starter kit encouraging great type on the Web”

Conditional loading of resources with mediaqueries »

Patternify »

CSS Pattern Generator

Specificity Calculator »

via @codylindley “A visual way to understand CSS specificity.”

CSS Values »

A handy, search-driven CSS reference for properties and values

Cicadients »

“A reworking of the first two examples of “The Cicada Principle and Why It Matters to Web Designers” using CSS gradients. “

Stylesheet Download Tests »

This page tests “whether today’s browsers will download stylesheets that are referenced with media queries that would not apply on that browser or device.”

Thee appears to be a lot of download overhead with media queries using link elements.

The Shapes of CSS »

The Web Platform: Browser technologies »

Critical bookmark for Web devs, as it’s an excellent index of browser technologies (HTML5, JavaScript, CSS, storage etc.).

Responsive Navigation Patterns »

Front-end Job Interview Questions »

Excellent list

Pears »

“Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.”

* { box-sizing: border-box } FTW »

I like this. I like it a lot.

SMACSS – Scalable and Modular Architecture for CSS

SMACSS Book Cover - Taken from smacss.comMany of you may already be aware of it, but in case not, I thought I’d point out that Jonathan Snook has released a site/ebook called Scalable and Modular Architecture for CSS or SMACSS (pronounced “smacks”). If you’ve read any of his previous stuff or had a chance to meet him at past events like South by Southwest Interactive, you know he’s a smart cookie, and nice to boot.

SMACSS is an interesting look into Jonathan’s process and structure, and as he puts it “a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It’s an attempt to document a consistent approach to site development when using CSS.”

I’ve personally spent a lot of time thinking about how I organize my CSS, so I love the opportunity to see the path that Jonathan has followed. We follow different practices in some cases (organization of attributes for example), but at a minimum, reading through his choices has caused me to think about the patterns I have set for myself.

Beyond the content, I love the fact that he’s sharing it publicly on the Web, in ebook format and via a third “Full Membership” option, so the information is freely available but he’s still able to profit from his efforts. I’ve signed up for that last option, in part to support him, but also because I’m excited to see what he’ll release to those members.

Image from the SMACSS site

Foundation »

“An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.”

LiveReload »

“monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.”