Link tags: flex




Minimal snippets for modern CSS layouts and components.

Learn Box Alignment

A cute walkthrough for flexbox and grid.

The Thought Process Behind a Flexbox Layout | CSS-Tricks

This is such a great way to explain a technology! Chris talks through his thought process when using flexbox for layout.

The Ugly Truth about Design Systems

The video of a talk in which Mark discusses pace layers, dogs, and design systems. He concludes:

  1. Current design systems thinking limits free, playful expression.
  2. Design systems uncover organisational disfunction.
  3. Continual design improvement and delivery is a lie.
  4. Component-focussed design is siloed thinking.

It’s true many design systems are the blueprints for manufacturing and large scale application. But in almost every instance I can think of, once you move from design to manufacturing the horse has bolted. It’s very difficult to move back into design because the results of the system are in the wild. The more strict the system, the less able you are to change it. That’s why broad principles, just enough governance, and directional examples are far superior to locked-down cookie cutters.

The CSS Mindset | Max Böck - Frontend Web Developer

This post absolutely nails what’s special about CSS …and why supersmart programmers might have trouble wrapping their head around it:

Other programming languages often work in controlled environments, like servers. They expect certain conditions to be true at all times, and can therefore be understood as concrete instructions as to how a program should execute.

CSS on the other hand works in a place that can never be fully controlled, so it has to be flexible by default.

Max goes on to encapsulate years of valuable CSS learnings into some short and snappy pieces of advices:

No matter what your level of CSS knowledge, this post has something for you—highly recommended!

Content-based grid tracks and embracing flexibility

This is a really good explanation of the difference between context-aware layouts—that we’ve had up until now—and content-aware layouts, which are now possible with CSS grid:

With the min-content, max-content and auto keywords, we can size grid tracks based on their content. I think this is very cool. If we manage to embrace as much of the web’s flexibility as we can, we can get the most out of these tools, and let CSS help us with designing for the unknown.

Using CSS Grid the right way | hey it’s violet

CSS Grid is easy to use but difficult to learn. It’s a more intuitive paradigm than any other CSS layout technique, but it’s completely different from its predecessors.

Some great advice here on how to approach CSS grid:

  • Use names, not numbers
  • Use fr as your flexible unit
  • Don’t use a grid system

The Flexbox Holy Albatross | HeydonWorks

Er …I think Heydon might’ve cracked it. And by “it”, I mean container queries.

This is some seriously clever thinking involving CSS custom properties, calc, and flexbox. The end result is a component that can respond to its container …and nary a media query in sight!

Fractional. — Ethan Marcotte

Ethan’s ode to the fr unit in CSS grid.

Your Brain on Front-End Development | CSS-Tricks

I find this soooo relatable:

I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.

Difference is, Chris comes up with some very, very clever techniques.

Tim Brown: Coming soon: Flexible Typesetting

Fellow web type nerds: Tim Brown brings very good tidings indeed!

My new book is called Flexible Typesetting, and it will be published by A Book Apart this summer. I absolutely cannot wait for you to read it, because we have so much to talk about.

Getting Started With CSS Layout — Smashing Magazine

Rachel gives a terrific explanation of CSS layout from first principles, starting with the default normal flow within writing systems, moving on to floats, then positioning—relative, absolute, fixed, and sticky—then flexbox, and finally grid (with a coda on alignment). This is a great primer to keep bookmarked; I think I’ll find myself returning to this more than once.

CSS Grid: More flexibility with minmax() by Michelle Barker on CodePen

A good use case for using minmax with CSS grid to dispense with a media query.

Grid to Flex

Una has put together this handy one-pager of flexbox fallbacks for some common grid layouts.

Best Practices With CSS Grid Layout — Smashing Magazine

A great set of answers from Rachel to frequently asked questions about CSS grid. She addresses the evergreen question of when to use flexbox and when to use grid:

I tend to use Flexbox for components where I want the natural size of items to strongly control their layout, essentially pushing the other items around.

A sign that perhaps Flexbox isn’t the layout method I should choose is when I start adding percentage widths to flex items and setting flex-grow to 0. The reason to add percentage widths to flex items is often because I’m trying to line them up in two dimensions (lining things up in two dimensions is exactly what Grid is for).

Saving Your Web Workflows with Prototyping · Matthias Ott – User Experience Designer

A well-written (and beautifully designed) article on the nature of the web, and what that means for those of us who build upon it. Matthias builds on the idea of material honestly and concludes that designing through prototypes—rather than making pictures of websites—results in a truer product.

A prototyping mindset means cultivating transparency and showing your work early to your team, to users – and to clients as well, which can spark excited conversations. A prototyping mindset also means valuing learning over fast results. And it means involving everyone from the beginning and closely working together as a team to dissolve the separation of linear workflows.

Building Flexible Design Systems // Speaker Deck

The slides from Yesenia’s talk on scenario-driven design.

Airplanes and Ashtrays – CSS Wizardry

Whenever you plan or design a system, you need to build in your own ashtrays—a codified way of dealing with the inevitability of somebody doing the wrong thing. Think of what your ideal scenario is—how do you want people to use whatever you’re building—and then try to identify any aspects of it which may be overly opinionated, prescriptive, or restrictive. Then try to preempt how people might try to avoid or circumvent these rules, and work back from there until you can design a safe middle-ground into your framework that can accept these deviations in the safest, least destructive way possible.