Full Bleed Scroller

Description

Sometimes you need to switch to/from an overflow-x: scroll; single line scroller from a grid, whilst still keeping the content on grid.

  • .full-bleed-scroller sets a container to being an overflow scrolling container with outer gutter shims
  • .full-bleed-scroller-reset resets the container

Note: works with both fluid and fixed width .container thanks to a .breakout's clever outer gutter handling.

Setup

tailwind.config.js
const { Setup, Container, FullBleedScroller } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [Setup, Layout, FullBleedScroller],
  theme: {
    screens: {
      xs: "0",
      sm: "544px",
      md: "650px",
      lg: "990px",
      xl: "1300px",
      xxl: "1520px"
    },
    mainColWidths: {
      xs: "auto",
      sm: "auto",
      md: "auto",
      lg: "auto",
      xl: "auto",
      xxl: "1440px"
    },
    innerGutters: {
      xs: "10px",
      sm: "15px",
      md: "20px",
      lg: "30px",
      xl: "40px",
      xxl: "40px"
    },
    outerGutters: {
      xs: "20px",
      sm: "30px",
      md: "40px",
      lg: "40px",
      xl: "40px",
      xxl: "0px"
    },
    columnCount: {
      xs: "4",
      sm: "4",
      md: "8",
      lg: "12",
      xl: "12",
      xxl: "12"
    },
  }
  ...
};

Requires Setup and Container plugin with theme.screens, theme.mainColWidths, theme.innerGutters, theme.outerGutters and theme.columnCount configured.

Demo

A full bleed scroller, at all breakpoints:

document.html
<div class="breakout">
  <ul class="full-bleed-scroller">
    <li class="flex-none w-1-cols-vw"></li>
    <li class="flex-none w-2-cols-vw"></li>
    <li class="flex-none w-3-cols-vw"></li>
    <li class="flex-none w-4-cols-vw"></li>
    <li class="flex-none w-5-cols-vw"></li>
    <li class="flex-none w-6-cols-vw"></li>
    <li class="flex-none w-7-cols-vw"></li>
    <li class="flex-none w-8-cols-vw"></li>
  </ul>
</div>

Using a .breakout class (from Container#breakout) to get a 100vw container.
full-bleed-scroller by default sets display: flex; flex-flow: row nowrap; gap: var(--inner-gutter);.

Note the children use .*-vw type Layoutwidth classes, this is because the container here is wider that .container. Also note that each child has flex-none set, so the width is controlled by the width class and not the child content.

Full bleed scroller on smaller screens, constrained by container width at md breakpoint and up

document.html
<div class="breakout md:breakout-reset">
  <ul class="full-bleed-scroller md:before:hidden md:after:hidden">
    <li class="flex-none w-3-cols-vw md:w-3-cols"></li>
    <li class="flex-none w-3-cols-vw md:w-3-cols"></li>
    <li class="flex-none w-3-cols-vw md:w-3-cols"></li>
    <li class="flex-none w-3-cols-vw md:w-3-cols"></li>
    <li class="flex-none w-3-cols-vw md:w-3-cols"></li>
    <li class="flex-none w-3-cols-vw md:w-3-cols"></li>
    <li class="flex-none w-3-cols-vw md:w-3-cols"></li>
    <li class="flex-none w-3-cols-vw md:w-3-cols"></li>
  </ul>
</div>

Again using a .breakout class to get a 100vw container and then at md breakpoint, resetting the breakout with md:breakpoint-reset.

On the full-bleed-scroller element, at md breakpoint, removing the ::before and ::after content that full-bleed-scroller inserts to add the outer gutter spacing.

And the children swap there w-3-cols-vw for md:w-3-cols at the md breakpoint (although this isn't strictly necessary, it does serve to demonstrate when to use the .*-vw Layout classes over the regular ones).

A full bleed scroller on smaller screens, resets to a grid at md breakpoint

document.html
<div class="breakout md:breakout-reset"><div class="breakout md:unbreakout">
  <ul class="full-bleed-scroller md:full-bleed-scroller-reset md:grid md:gap-gutter md:grid-cols-2 lg:grid-cols-3">
    <li class="flex-none w-3-cols-vw md:w-auto"></li>
    <li class="flex-none w-3-cols-vw md:w-auto"></li>
    <li class="flex-none w-3-cols-vw md:w-auto"></li>
    <li class="flex-none w-3-cols-vw md:w-auto"></li>
    <li class="flex-none w-3-cols-vw md:w-auto"></li>
    <li class="flex-none w-3-cols-vw md:w-auto"></li>
    <li class="flex-none w-3-cols-vw md:w-auto"></li>
    <li class="flex-none w-3-cols-vw md:w-auto"></li>
  </ul>
</div>

Similar to above, only now at the md breakpoint we reset the scroller with md:full-bleed-scroller-reset and add Tailwind grid classes.