Fluid scale and tokens: a match made in heaven - Andy Bell
Andy takes Utopia for a spin—it very much matches his approach.
Link tags: fluid
23
Utopia
This is the project that Trys and James have been working on at Clearleft. It’s a way of approaching modular scales in web typography that uses CSS locks and custom properties to fantastic effect.
Utopia is not a product, a plugin, or a framework. It’s a memorable/pretentious word we use to refer to a way of thinking about fluid responsive design.
Fractional. — Ethan Marcotte
Ethan’s ode to the fr unit in CSS grid.
Rebuilding slack.com – Several People Are Coding
A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.
The math of CSS locks
A very very in-depth look at fluid typography in CSS using calc.
Get the Balance Right: Responsive Display Text ◆ 24 ways
Some really great CSS tips from Rich on sizing display text for multiple viewports.
Resizable Displays | Fluid Interfaces
See now, this is why liquid layouts are the way to go.
LukeW | Multi-Device Layout Patterns
Luke catalogues layout patterns in responsive designs.
The ‘trouble’ with Android | Stephanie Rieger
Stephanie focuses on Android but this is a cautionary tale about trying to impose control over what you’re sending to the multitude of mobile devices out there.
Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices.
Responsive Design Essentials: Look Great on any Device - Facebook developers
The process behind the mobile-first responsive design of audiovroom.com.
You Say Responsive, I Say Adaptive | Sparkbox
On the importance of using a fluid grid in responsive design.
Foundation: Rapid Prototyping and Building Framework from ZURB
A framework for banging out ready-made responsive designs.
Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit
A set of default styles to get started on a mobile-first responsive design.
Golden Grid System
I’m usually not a fan of CSS “frameworks” but I like the thinking that’s gone into this fluid, responsive system. I particularly like this advice:
Take it apart, steal the parts that you like, and adapt them to your own way of working.
ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design.
Another browser-based tool for testing your responsive designs at different screen sizes.
You Say Responsive, I Say Adaptive | Sparkbox
On the importance of using fluid grids as part of responsive web design:
We do responsive web design, but we don’t do it for the sake of being trendy. We do it because we believe it’s the way websites should be made. This is an opportunity for us to finally embrace the dynamic medium we build for. The web is not fixed width.
Hand Crafted Web design Kawartha Lakes, Lindsay, Peterborough | Bitfoundry
A thoroughly lovely responsive design, very nicely and thoughtfully executed.
Fit To Scale | Trent Walton
More documentation of a responsive redesign, this time from Trent Walton. Be sure to check out the FitText jQuery plug-in that was created as a result.
Design for the changing web: Our response :: Studio :: Headshift
Documenting the process of switching to a responsive design. I think there’s always insight to be gained from seeing how your peers are approaching these challenges.
Information Architects
A great example of responsive web design. I like the idea of upping the font size for really large viewports. I may do that on Huffduffer.