notes/code/CSS Recipes

tagged: css, webdev, howto

Accordions

Use the <details> element: https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/

Here's how to make them simply and accessibly, with no JavaScript, using the :focus-within pseudo selector: https://css-tricks.com/solved-with-css-dropdown-menus

You can also use the <details> element: https://css-tricks.com/using-details-for-menus-and-dialogs-is-an-interesting-idea/ Read more about this on the <details> page

Horizontal scrolling sections

Thanks to this tweet from Cassie Evans.

.container {
width: 100vw;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.item {
flex: 0 0 auto;
}

Responsive tiled layout with CSS Grid and no media queries

This is great for making grid layouts of even-sized tiles where each tile never gets narrower than the specified min-width. Stolen from this tweet by @thekitze.

const autoGrid = (minColumnWidth = 250, gap = 0) => css`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(${minColumnWidth}px, 1fr));
grid-gap: ${gap};
`