Presenting the Pile, a CSS and HTML mini web machine
that replaces many use cases for position absolute. It offers keyword alignments, optional z-index management
no container collapsing. I'm looking at you, container with absolute children. And it can be intrinsically sized based on content
This icon button uses the Pile. This logo uses the Pile. These icons use a Pile
That uses a Pile. This demo uses a Pile. And a super rad and animated in 3D
Anyway, this GUI challenge is comparison used to the Pile. This card stack used the Pile
And last but not least, this stories demo from GUI challenges used the Pile. You're watching mini web machines on Chrome Developers
where we dive into small groups of code that drive rad user experiences
No JavaScript in today's mini web machine. It's all HTML and CSS
So we've got a div container. And just any sort of children. We're using spans here
And then we're going to set the container to display grid, target each child, and put them in the same area, one and one
And this is going to set them to the same row and the same column. Essentially, it's a grid of only one cell, or one row
one column. And when we assign them all to the same one, they pile on top of each other. So here, you can see it go from natural to the pile
You can also, once this is set up, align all of the different elements as a group
So you can say, place content or align content and move them all together
You can also specify individually that they place themselves into somewhere as an exception
So you can put them all in the middle. But this one is over here on the edge. Here's that mini web machine again
And then let's go see what else it can do. Like an icon button
We've stacked the label, an input, and an SVG all on top of each other by setting them
to the same grid area. This VisBug logo is a pile on top of a pile
So there's a pile for the logo container that's got the head and the thorax
And then a pile for the thorax that contains the wings on top of the body
So many use cases. And then we've got these kind of cool blobs
where we're stacking multiple blob SVGs on top of each other just for funsies
Did you catch the mini web machine variant syntax there? It's still display grid
But the rows and the columns are defined and named. A one of our row is named stack
And a one of our column is named stack. We're still a single cell grid
But this names both the row and column the same name, making the next part read really nice
like assigning all the children to the same row and column, stack. Nothing fundamentally different between the stack variant
and the pile. But you could argue that the stack contains a little bit more of a cleaner intent in the code
Also, side note, stack was an early name that I used for the pile layout machine
But I later changed it because you can have stacks that aren't necessarily piles. But piles are always piles
They're on top of each other. And I just thought it just fit the intent better. The pile is used here to put the caption contents
on top of a reflected version of the image, kind of creating a cool effect
The pile is used here to disguise all the layers that it takes to make an element box on the web, which
I then reveal on hover with some CSS transforms for a neat illustration into the box model
This gooey challenge uses the pile to overlay a before and after container
on top of each other. The simple layout machine is then part of another simple machine that wires up
an input type range to a custom property for use within a mask. And voila, two mini web machines coming together
for a very rad result. This card stack gooey challenge uses the pile mini web machine
But it tries to be cute by naming the row gooey and the column challenges
It's just fun to write grid area gooey challenges. But notice the size of the column
It's not 1FR. This is showcasing that the container grid can size the row and column without taking the children
into account, if it wants to. Lastly, this gooey challenge for thinking on how a stories component could be built
uses a horizontal scroll snap setup for each of the user stories and the pile mini web
machine for each of the images from a user. So then JavaScript watches for taps
on either the right side of the component or the left side and contextually adjusts the opacity
of the images in the pile. So while you might think that mini web machines are always
going to have JavaScript or something like that in them, they're not. Sometimes they're going to be just CSS machines
that, through small combinations of code, you can create really powerful and reliable systems
And this one, the pile, is no exception. I've been using this over and over and over again
And I really hope it fits into your tool belt just as well as it's fitting into mine
And that was today's mini web machine. And I'll see you on the next one. Take care, y'all