Welcome to the
layouts
of
tomorrow!

Responsive design with modern CSS
@ErinJZimmer
https://layouts.ez.codes
CSS
is
awesome
Today, CSS is actually pretty good at layouts - especially responsive layouts. (and if you're ending up with a result like this, you're probably doing it wrong)
bootstrap foundation pure bulma semantic UI materialize spectre.css susy milligram
for a start, there are a whole heap of frameworks out there to help you you would not believe how many of them have logos that are just the letter S


						

nav ul {
	display: flex;
	flex-direction: column;

	@media (min-width: 576px) {
		flex-direction: row;
	}
}
						
for example, we can create a responsive menu that flips between a vertical alignment on mobile and a horizontal alignment on larger screens - using bootstrap, defining columns - or, if you prefer to write your own, using a very simple media query

the problem with
media queries

the web is continuous

as a very basic example, consider these 2 mockups on a phone, you have some nav items stacked at the top, then a single column of content on a tablet, you have some nav items spread across the top, and multiple layers of content you could easily build this using a single media query the thing about the web though, is that it's not discrete like this yes, those two screen sizes exist, but so does every other size in between. and these mockups tell us nothing about how our page should behave in those in-between sizes obviously, there should be layouts that include 2 or 3 columns of content, but at what point should the nav switch from vertical to horizontal? to some extent, we can mitigate this by using breakpoints specific to our design, rather than creating designs to fit specific sized screens however, that still leaves another problem

You don't have all the context

  • How big is the content?
  • How big is the container?
you don't have all the context at build time how much content? how big is it? have fonts/images loaded? has the user changed the font? you might know the container if you know everything that's on the viewport, but not always
What can we do instead?

Let the browser work it out

remember, the flexibility of the web is a feature, not a bug instead of trying to code around it, we should be using it to our advantage we don't need to code for every possible situation with imperfect information instead, we can give the browser some boundaries and guidelines and let it work out the fine detail using the information it has available

columns

start by looking at an example using newspaper-style columns not a pattern you see often on the web because infinite scroll could make sense in the context of a design where you have a container of limited height

Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.

Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.

This planet has - or rather had - a problem, which was this: most of the people living on it were unhappy for pretty much of the time. Many solutions were suggested for this problem, but most of these were largely concerned with the movements of small green pieces of paper, which is odd because on the whole it wasn't the small green pieces of paper that were unhappy.

And so the problem remained; lots of the people were mean, and most of them were miserable, even the ones with digital watches.

Many were increasingly of the opinion that they'd all made a big mistake in coming down from the trees in the first place. And some suggested that even the trees had been a bad move, and that no one should ever have left the oceans.

this used to be quite complicated to do you don't know how big anything is on the web you don't know how many columns can fit, or how wide you don't know the font for sure, so you're not sure how much space the text takes up instead, you'd have to do something with javascript to work out the dimensions and which text goes in which column at runtime then use CSS with media queries to set up the columns, something like...
.column {
	min-width: 200px;
	width: 100%;
	padding: 2em;

	@media (min-width: 400px) {
		width: 50%;
	}

	@media (min-width: 600px) {
		width: 33%;
	}

	@media (min-width: 800px) {
		width: 25%;
	}

	@media (min-width: 1000px) {
		width: 20%;
	}
}

.column:not(:last-child) {
	border-right: 2px solid black;
}
this css is complicated and error-prone because it's using values that rely on each, but not obviously so (can't use variables in a media queries)

css columns


.columns {
	columns: 3 200px;
}
					
  • I'd like a multi-column layout
  • No more than 3 columns
  • I'd like the columns to be about 200px wide
Now, you can do it like this instead description of code by passing control to the browser, we end up with code that is "more declarative" it's easier to write, easier to read, and guaranteed to work in more situations
190px
~125px

Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.

Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.

This planet has - or rather had - a problem, which was this: most of the people living on it were unhappy for pretty much of the time. Many solutions were suggested for this problem, but most of these were largely concerned with the movements of small green pieces of paper, which is odd because on the whole it wasn't the small green pieces of paper that were unhappy.

And so the problem remained; lots of the people were mean, and most of them were miserable, even the ones with digital watches.

Many were increasingly of the opinion that they'd all made a big mistake in coming down from the trees in the first place. And some suggested that even the trees had been a bad move, and that no one should ever have left the oceans.

580px
~250px
~250px

Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.

Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.

This planet has - or rather had - a problem, which was this: most of the people living on it were unhappy for pretty much of the time. Many solutions were suggested for this problem, but most of these were largely concerned with the movements of small green pieces of paper, which is odd because on the whole it wasn't the small green pieces of paper that were unhappy.

And so the problem remained; lots of the people were mean, and most of them were miserable, even the ones with digital watches.

Many were increasingly of the opinion that they'd all made a big mistake in coming down from the trees in the first place. And some suggested that even the trees had been a bad move, and that no one should ever have left the oceans.

columns + flexbox

growing & shrinking

common pattern - things side-by-side, shrink until "mobile", then switch to vertical layout
- the buttons shrink as the container gets smaller - the buttons switch to vertical layout once the container is too small to fit the buttons - the point that it switches depends on the size of the content - in the vertical layout, the buttons stretch to take up the whole container you can achieve some of this with media queries, in some situations to do it all, you need...

flexbox

.buttons-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.buttons-container button {
	flex: 1 1;
	min-width: 10em;
}
button will shrink to min-content we can add a min-width if we prefer can also add a max-width gap property is only available on firefox, or behind a flag in Chrome 84-85 we are defining the boundaries and relationships the browser is using what it knows about the content we end up with a much nicer layout

.track-activity-button {
	flex: 1 0 24%;
}
					
make sure you set your boundaries right though, else you end up with something like this, from my activity tracker, which looks fine on small screens, but seems unusually interested in tracking my period on larger screens if we take a peek at the code, we see that the flex-basis on the buttons is set to 24%, which, to me, suggests that perhaps there were 4 buttons when the code was written, and maybe the 5th button got added without too much thought at any rate, removing the boundary, gives us a better layout

alignment

flexbox gives us some fun ways to lay things out, but it's limited to alignment in a single dimension
Slurm
Slurmee
Royal Slurm
SuperSlurm
New Slurm
Diet Slurm
Enslurm
Slurm Loco
Slurm Medicinal Tonic
Slurm Slim
fun, organic layout, everything is aligned horizontally, but not vertically sometimes that's what you want but sometimes you need something a little more orderly
Slurm
Slurmee
Royal Slurm
SuperSlurm
New Slurm
Diet Slurm
Enslurm
Slurm Loco
Slurm Medicinal Tonic
Slurm Slim
there isn't really a way to get flexbox to do this, especially with the element spanning two rows

grid

grid in 2 minutes
grid in 2 minutes: auto
Amy
Dr Zoidberg
Leela
Professor Farnsworth
you can make a grid with cells that fit the size of their contents
grid in 2 minutes: auto-fit
Amy
Dr Zoidberg
Leela
Professor Farnsworth
or you can have a grid where the size & number of columns is determined by the size of the container you can't do both, which is a bit unfortunate this second type of responsive grid is best suited to situations where you know or can control the size of the content
image grid
columns + flexbox + grid
Relinquishing control does not mean relinquishing quality. Quite the opposite. In acknowledging the many unknowns involved in designing for the web, designers can craft in a resilient flexible way that is true to the medium.
Jeremy Keith Resilient Web Design
accept that we don't have enough information to completely specify the design at build-time instead, give the browser some boundaries and guidelines and let it work it out at run-time
Columns
Flexbox
Grid
@ErinJZimmer
Thank you!
bender holding applause sign
@ErinJZimmer