CSS Quantity Queries
A few useful resources from around the web:
I'm Andy
Oxford based Web Developer and Graphic designer. Full-time position: Web, Design and Publications Manager at the NPEU, but I also freelance.
Note: I'm aware that this site needs lots of attention, but I just haven't had the time lately.
Recent posts
47 posts
CSS min(), max, and clamp()
A thorough look at the CSS functions min(), max() and clamp():
Skip Links
Useful reference:
Aspect Ratio Boxes
Useful reference:
Analytics
Harry looks at some markup and techniques to sending analytics requests in oft-overlooked scenarios:
Nutrition Cards for Accessible Components
Useful reference:
Async CSS
I’m not certain I have a need for this, currently, but it’s worth recording here:
Visually Hidden
Update 21-17-02:
Grid Resources
I’m sure I can add loads of stuff here.
Media Queries
A useful primer:
Container Queries
Focus Styles
A comprehensive look at focus styles:
Fonts
Not my strongest subject, and I definitely need to flesh this section out.
Media Queries
I’m sure I can add loads of stuff here.
50 Things You [Probably] Forgot To Design
Plenty of things to think about, with useful examples:
User Expectations and Behaviour
I’ll probably add more links to this post, but here’s the first few:
Accessibility feedback from Twitter
Handling Long Words
Just putting this up here to remind me to take these into account when designing patterns (and for StartCSS).
Basic Principles
I probably should have written this one a long time ago, but here goes:
Full Width Containers in Limited Width Parents
Responsive CSS Patterns without Media Queries Article on Sitepoint
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).
Read more about Responsive CSS Patterns without Media Queries Article on Sitepoint
Print Stylesheets
I plan to tidy up and enhance the ‘global’ print stylesheet for FallBack as soon as I can.
PHP: The Right Way
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:
Lazy Loading Images with Fallback
An interesting look at lazy loading images without breaking things if JS is unavailable:
CSS Hide-and-Seek
A useful insight into visually hidden text by Gaël Poupard (translated by Hugo Giraudel)
Magic randomisation with nth-child and Cicada Principle
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:
Read more about Magic randomisation with nth-child and Cicada Principle
Flex-grow 9999 Hack
A great trick from Joren Van Hee that fits nicely into this in collection: Flex-grow 9999 Hack
Flexbox Gallery Layout
A really useful in-depth tutorial on using flexbox to create a gallery layout like Google Images:
Vertical Text
This tip from Ahmad Shadeed is interesting:
Accessible Responsive Tables
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:
Flex-basis tip
I always get confused about when you should use flex-basis. Hopefully this flexbox tip from Zoe Gillenwater should help straighten it out in my head:
CSS Tricks
I’m a big fan of CSS Tricks but that’s not what this post is about.
Favicons
Produces a lot of code but pretty handy. A good compromise, I think.
CSS Classes and the Single Responsibility Principle
TL;DR
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.
Read more about CSS Classes and the Single Responsibility Principle
Flexbox for layout
Jake Archibold recommends not to use Flexbox for layout.
404 Pages
Some useful things to include:
Template HTML vs Content HTML
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).
Thoughts on SVG icons
Is there really such a thing as a 'purely decorative' image?
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?
Read more about Is there really such a thing as a 'purely decorative' image?
CSS Mustard Cut Article on Sitepoint
Sitepoint published my article on Cutting the Mustard with CSS Media Queries whereby putting certain combinations of Media Queries in a link tag to prevent older browsers loading CSS.
Fall-Back PE Techniques
Fall-Back is a collection of Progressive Enhancement techniques.
Footnotes Plugin for CKEditor
I’ve created and released a footnotes plugin for CKEditor.
Auto Enhance
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.
Endometriosis CaRe Centre Logo
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.