From IndieWeb

Front End Study Hall #003 was an IndieWeb popup on Zoom held on 2024-05-23.



  • Al has a flex question - how does the flex: 1 0 0 layout in this Threads post work:
  • CodePen for Flex exploration:
    • Context - there's a photo layout in Figma that he has in mind, will figure out how to post here to the etherpad in a minute.
    • My post I'd like to apply it to:
    • (examples)
    • gRegor Morrill I've referenced this a lot in the past:
    • Al for James: great description of the "inline magic" of images getting extra padding and also other layout issues:
    • Chrome's web inspector has fun little UI hints and controls that almost look like Webflow, if you hover over a display: grid property in CSS. You can click on diagrams of different values to change the layout.
    • Firefox does a cool thing where you if you choose different values for align-items from the autocomplete, it will update the main viewport in real time. (Chrome does this too)
    • gRegor Morrill for Al: on I've used the shorthand `flex: 0 0 [some measure]` like in the masthead with logo and text. I don't fully remember *why* but I think I was just trying to use flex-basis, which is the third parameter. Also some context: this is flex progressively enhanced with CSS Grid if supported, because at that time CSS Grid wasn't as widely supported. So you'll see a mix of flex and grid (and they share some properties, which is nice) (Thank you Gregor πŸ‘)
    • Joe finds min-content to be too aggressive for text but to be useful for non-text content. Al wants to play with it for the header design of his blog, i.e. to make sure the description or date fields don't go longer than the main headline.

units: rem vs em vs ch vs...

And more single div drawings: And this! CSS!

Chrome Function

Joe's Never Mind The Bollocks codepen which uses transform

    • Al: my most common use of transform for practical work is when working with absolutely positioned elements that need to be centered, rather than the default top left. Use css transform: translate(-50%, -50%) to center the "grab point" in the element.

Front End Study Hall (FrESH)
Find upcoming Front End Study Hall Events on
2024 04-24 β€’ 05-07 β€’ 05-23 β€’ 06-06 β€’ 06-18 β€’ 07-02 β€’