Search
Collective #607
28.5.2020
Windups * Untools * Tailblocks * PureCSS Gaze * RoughNotation * Responsive web design turns ten
Collective #607 was written by Pedro Botelho and published on Codrops
Responsive web design turns ten.
27.5.2020
Ethan on the thinking and research that inspired the term:
Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened. When she got back, she told me about these wheeled lounge chairs she saw in one section, and how people would move them apart for a...
Responsive web design turns ten.
27.5.2020
Ethan on the thinking and research that inspired the term:
Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened. When she got back, she told me about these wheeled lounge chairs she saw in one section, and how people...
A Guide to the Responsive Images Syntax in HTML
27.5.2020
This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). We'll go over srcset and , plus a whole bunch of things to consider to help you get the best performance and design control from your images.
The post A Guide to the Responsive Images Syntax...
Turning a Fixed-Size Object into a Responsive Element
11.5.2020
I was in a situation recently where I wanted to show an iPhone on a website. I wanted users to be able to interact with an application demo on this “mock” phone, so it had to be rendered in CSS, not an image. I found a great library called marvelapp/devices.css. The library implemented the device...
Playing With (Fake) Container Queries With watched-box & resizeasaurus
5.5.2020
Heydon’s <watched-box> is a damn fantastic tool. It’s a custom element that essentially does container queries by way of class names that get added to the box based on size breakpoints that are calculated with ResizeObserver. It’s like a cleaner version of what Philip...
Different Approaches to Responsive CSS Motion Path
24.4.2020
As a follow-up to Jhey’s recent post on responsive motion paths, Michelle Barker notes that another approach could be to just transform: scale() the whole dang element.
The trade-off there is that you’re scaling both the path and the element on the path at the same time; Jhey’s...
Collective #603
23.4.2020
Gallery * Responsive CSS Motion Path * Spacing in CSS * pattern.css * The Cost of JavaScript Frameworks
Collective #603 was written by Pedro Botelho and published on Codrops
Create a Responsive CSS Motion Path? Sure We Can!
15.4.2020
There was a discussion recently on the Animation at Work Slack: how could you make a CSS motion path responsive? What techniques would be work? This got me thinking.
A CSS motion path allows us to animate elements along custom user-defined paths. Those paths follow the same structure as SVG paths....
Using CSS to Set Text Inside a Circle
14.4.2020
You want to set some text inside the shape of a circle with HTML and CSS? That’s crazy talk, right?
Not really! Thanks to shape-outside and some pure CSS trickery it is possible to do exactly that.
However, this can be a fiddly layout option. We have to take lots of different things into...
Collective #601
9.4.2020
LCH colors in CSS * Frontend Mentor * Responsive Images the Simple Way * Button?Design * Interactive Timetable
Collective #601 was written by Pedro Botelho and published on Codrops
Fluid Width Video
11.3.2020
IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5 <video tag. You might...
Currying in CSS
6.3.2020
Funny timing on this I was just looking at the website for Utopia (which is a responsive type project which I hate to admit I don't fully understand) and I came across some CSS they show off that looked like this:
:root {
--fluid-max-negative: (1 / var(--fluid-max-ratio)...
10+ Examples of Responsive Websites That Got It Right
27.2.2020
How do you make sure your website will look good on every browser and device? Take a look at these responsive web designs and you’ll discover how.
10+ Examples of Responsive Websites That Got It Right was written by Bogdan Sandu and published on Codrops
Responsive Grid Magazine Layout in Just 20 Lines of CSS
25.2.2020
I was recently working on a modern take of the blogroll. The idea was to offer readers a selection of latest posts from those blogs in a magazine-style layout, instead of just popping a list of our favorite blogs in the sidebar.
The easy part was grabbing a list of posts with excerpts from...
Blame the implementation, not the technique
17.2.2020
I'm not sure we've gotten much better at this since Tim Kadlec wrote this in 2012:
Stop me if you’ve heard this one before.
“Responsive design is bad for performance.”“User agent detection is bad. Don’t segment the web.”“Hybrid apps don’t work as well as native apps.”“CSS preprocessors shouldn’t...
Collective #589
13.2.2020
Toward Responsive Elements * The wonderful sound of an atomic commit * OpenChakra * drop.lol * GitHub CLI beta
Collective #589 was written by Pedro Botelho and published on Codrops
Toward Responsive Elements
12.2.2020
Hot news from Brian Kardell, regarding what we've been referring to as "container queries", the most hotly requested feature in CSS:
There does seem to be some general agreement on at least one part of what I am going to call instead "Responsive Design for Components" and that is that flipping...
Helping Browsers Optimize With The CSS Contain Property
10.2.2020
There is a growing number of things that we have to do to help the browser achieve for peak performance.
Responsive image syntax has several. For example, needing to tell the browser how large the image will be in our layout with the sizes attribute and how big the images are with w descriptors....
Collective #586
3.2.2020
iHateRegex * Old CSS, new CSS * Vanilla Web Projects * coders.guide * Responsive, JavaScript-free charts
Collective #586 was written by Pedro Botelho and published on Codrops