A few useful resources from around the web:
A thorough look at the CSS functions
Harry looks at some markup and techniques to sending analytics requests in oft-overlooked scenarios:
I’m not certain I have a need for this, currently, but it’s worth recording here:
A look at different techniques to hide something visually whislt keeping it accessible:
Plenty of things to think about, with useful examples:
I’ll probably add more links to this post, but here’s the first few:
Just putting this up here to remind me to take these into account when designing patterns (and for StartCSS).
I probably should have written this one a long time ago, but here goes:
Sitepoint published my article on Responsive CSS Patterns without Media Queries where I demonstrate some techniques (some mine, some found) to make elemlents arrange themselves according to their container’s width, rather than the viewport (which is the case when using Media Queries).
I plan to tidy up and enhance the ‘global’ print stylesheet for FallBack as soon as I can.
I’m not sure how I never managed not to come across this before, but I thought I’d post it here as a useful resource:
An interesting look at lazy loading images without breaking things if JS is unavailable:
I first heard about the Cidada principle on Sitepoint years ago: The Cicada Principle and Why It Matters to Web Designers. I was intrigued and I’ve tried using a couple of time to overlay background images to create the impression of randonmness. It’s very interesting and really nice to allow for some more organic variation, so I was quite pleased when it reared it’s head again:
A really useful in-depth tutorial on using flexbox to create a gallery layout like Google Images:
This is an issue I’ve looked a lot at over the years but I’ve not found time to really look for a solution myself, yet. I haven’t found time to compile all my thoughts and links on this yet either, but the following post prompted me to start:
Clearly define responsibility for groups of classes, and only allow more than one class on an element when they’re from different groups that will clearly never conflict.
As I was reading through Chris Coyer’s post on CSS Tricks it struck me that I’ve had lots of thoughts on this topic for a while now, but never consolidated them. Of particular note is is Chris’s distinction between template HTML and content HTML, also referred to as User Generated Content (UGC).
Hugo Giraudel’s post on SitePoint got me thinking about SVG icons again. On the whole I like to approach he lay’s out, especially considering how well it’s supported in the context of using the M3 Mustard Cut. I particularly like how we leaves any fallback text up to the context in which it’s used - the only difference is that I’d probably do the fallback text like this:
Well, technically, yes. You can use an
<img> tag to load any image, but when was the last time anyone used one as part of a decorative flourish on site’s design? Or anywhere else for that matter?
That’s all done with CSS these days, right?
Inspired by link-based enhancements like http://oembed.com (via http://css-tricks.com/oembed) and responsive URLs/content like http://www.smashingmagazine.com/2014/05/02/responsive-design-begins-with-the-url … it could be worth exploring patterns for other enhancements.
The team at the Endometriosis CaRe Centre, Oxford commissioned me to create a logo for the Centre. I enlisted the help of my colleague and all-round talented designer Sarah to help with this job.