@anydigital/bricks 0.21.0

package/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013 Anton Staroverov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,303 @@
+# *Any*bricks
+
+Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.
+
+## Installation
+
+### Via CDN
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anydigital/bricks@1/dist/bricks.css" />
+```
+
+### Via npm
+
+```sh
+npm install @anydigital/bricks
+```
+
+Then import in your CSS:
+
+```css
+@import "@anydigital/bricks";
+```
+
+## Features
+
+### Overflow Control
+
+Prevents horizontal overflow and scrolling on the entire page:
+
+```css
+html,
+body {
+  overflow-x: clip;
+}
+```
+
+This is automatically applied when you include the stylesheet.
+
+### Full Viewport Height
+
+Ensures the body element takes at least the full height of the viewport using dynamic viewport height for better mobile support:
+
+```css
+body {
+  min-height: 100dvh;
+}
+```
+
+This is automatically applied when you include the stylesheet.
+
+### Typography Enhancements
+
+Improves text rendering and readability:
+
+```css
+body {
+  hyphens: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+
+- Automatic hyphenation for better text flow
+- Font smoothing for cleaner text rendering across browsers
+- Hyphenation is disabled for links and tables to prevent awkward breaks
+
+This is automatically applied when you include the stylesheet.
+
+### Prose Styling
+
+The `.prose` class provides enhanced typography for article content and long-form text with container-like behavior:
+
+**Container:**
+
+- Full width with `1rem` padding
+- Centered with automatic inline margins
+
+**Typography Helpers:**
+
+- `small` elements: styled for multi-line subtitles with top vertical alignment, `0.1em` top margin, `1.1` line height, lighter weight (`300`), and displayed as `inline-block` with `100%` width to prevent underline decoration inside links
+
+**Links:**
+
+- Custom underline offset (`0.1em`) and thickness (`1px` default, `2px` on hover)
+- Anchor links (starting with `#`) have no text decoration
+- Icon helper: `i` elements inside links are displayed as `inline-block` with normal font style to prevent underline decoration, with `1em` height and `0.25em` right margin. Nested `img` elements are styled with `100%` height, no margin, and positioned `0.15em` from the bottom for proper alignment
+
+**Headings:**
+
+- `h1` elements have a `0.5em` bottom margin
+- `h1 small` elements get reduced font size (`50%`)
+
+**Tables:**
+
+- Tables within `.breakout` containers are automatically styled for full-bleed display and horizontal scrolling
+- Table cells (`th` and `td`) have padding of `1rem 2rem 1rem 0` (extra space on the right for better horizontal scroll on mobile) and `top` vertical alignment
+- Table headers (`th`) have `bottom` vertical alignment
+- Workaround for widening columns using hidden `hr` elements (width: `12ch`, with zero margin and hidden visibility)
+- Support for headings in Markdown tables using `big` elements (styled as bold)
+- Images in table cells have no top margin and `1em` bottom margin
+
+**Blockquotes:**
+
+- Lighter font weight (`300`)
+- Adjacent `figcaption` elements (using `+ figcaption` selector) are styled with italic text, right alignment, lighter weight (`300`), negative top margin (`-1em`), and an em dash prefix (`—`) with `0.25em` right margin
+
+**Code Blocks:**
+
+- Code blocks with `data-caption` attribute display the caption above the code block (styled with 50% opacity, italic, and `1.5em` bottom margin)
+
+### Code Highlighting
+
+Includes specialized styling for Prism.js, specifically focusing on treeview components:
+
+- Custom styling for `.token.treeview-part`
+- Reduced opacity for entry lines (25%) and names (50%) to create a hierarchical visual effect
+- Entry lines have a fixed width of `2.5em`
+- Last-child entry names have no `::before` pseudo-element
+- Supports complex file tree visualizations out of the box
+
+### Utilities
+
+#### Scrollbar Inversion
+
+The `.invert` class can be used to invert the scrollbar colors, which is particularly useful for dark themes or specific UI components:
+
+```css
+.invert {
+  ::-webkit-scrollbar {
+    filter: invert(1) !important;
+  }
+}
+```
+
+**Usage:**
+
+```html
+<article class="prose">
+  <h1>Article Title</h1>
+  <p>Your content here...</p>
+</article>
+```
+
+This is automatically included when you import the stylesheet.
+
+### Flexbox Layout
+
+Sets up a flexible column layout structure:
+
+```css
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+body > main {
+  flex-grow: 1;
+}
+```
+
+The body becomes a flex container with column direction, and `main` elements automatically grow to fill available space. This is useful for creating sticky footers and full-height layouts.
+
+This is automatically applied when you include the stylesheet.
+
+### Breakout CSS
+
+Includes [breakout-css](https://github.com/anydigital/breakout-css) utilities for breaking out images and figures beyond their container width. Use the `.breakout` class to allow elements to extend beyond their parent container:
+
+```html
+<div class="breakout">
+  <img src="image.jpg" alt="Description" />
+</div>
+```
+
+The breakout container has `10%` inline padding and a max-width of `calc(10% + 65ch + 10%)`. The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. Tables inside `.breakout` are specifically enhanced for horizontal scrolling and full-bleed mobile display. This is automatically included when you import the stylesheet.
+
+## Bricks (Template Components)
+
+The package includes reusable Liquid templates in the `bricks/` directory. These are useful for common web development patterns.
+
+### Base HTML Template (`__html-begin.liquid` and `__html-end.liquid`)
+
+Base HTML templates that provide the essential document structure with built-in support for modern web best practices. Split into begin and end files to wrap around your content.
+
+**Features:**
+
+- HTML5 DOCTYPE with language attribute (defaults to `en`, configurable via `site.lang`)
+- UTF-8 charset and comprehensive viewport meta tag with `viewport-fit=cover` for notched devices
+- Dynamic title generation with site title suffix (title is stripped of HTML tags and separated with `|`)
+- Favicon link (to `/favicon.ico`)
+- Automatic stylesheet linking from `site.styles` array
+- Inline styles from `site.inline_styles` array (joined with newlines in a `<style>` tag)
+- Automatic script loading from `site.scripts` array (with `defer` attribute)
+- Inline module scripts from `site.inline_scripts` array (joined with newlines in a `<script type="module">` tag)
+- Custom header content via `content_for_header`
+- Google Tag Manager integration (automatically rendered via `_gtm.liquid` template for both `<head>` and `<body>`)
+
+**Usage:**
+
+```liquid
+{% render 'bricks/__html-begin', site: site, title: title, content_for_header: content_for_header %}
+
+<!-- Your page content -->
+
+{% render 'bricks/__html-end' %}
+```
+
+Note: Google Tag Manager is automatically included in both `<head>` and `<body>` (via the `_gtm.liquid` template) when `site.prod` and `site.gtm_id` are set.
+
+**Variables:**
+
+- `title` - Page title (optional, will be stripped of HTML tags)
+- `site.title` - Site title for the title suffix
+- `site.lang` - Language code (optional, defaults to `'en'`)
+- `site.styles` - Array of stylesheet URLs (optional)
+- `site.inline_styles` - Array of inline CSS strings (optional)
+- `site.scripts` - Array of script URLs (optional)
+- `site.inline_scripts` - Array of inline JavaScript strings (optional)
+- `content_for_header` - Custom HTML for the head section (optional)
+- `site.gtm_id` - Google Tag Manager ID (optional)
+- `site.prod` - Boolean flag for production environment (optional)
+
+### Navigation (`_nav.liquid`)
+
+A navigation template that renders a list of navigation links with proper accessibility attributes.
+
+**Parameters:**
+
+- `nav_pages` - Array of navigation page objects with `url` and `title` properties
+- `current_url` - The URL of the current page (used to set `aria-current="page"`)
+
+**Usage:**
+
+```liquid
+{% render 'bricks/_nav', nav_pages: navPages, current_url: page.url %}
+```
+
+**Example:**
+
+```liquid
+{% assign navPages = site.pages | where: "nav", true %}
+{% render 'bricks/_nav', nav_pages: navPages, current_url: page.url %}
+```
+
+**Output:**
+
+```html
+<nav>
+  <a href="/">Home</a>
+  <a href="/about" aria-current="page">About</a>
+  <a href="/contact">Contact</a>
+</nav>
+```
+
+**Compatibility:** Compatible with [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually).
+
+### Google Tag Manager (`_gtm.liquid`)
+
+A template for embedding Google Tag Manager scripts in your pages.
+
+**Parameters:**
+
+- `site.gtm_id` - Your Google Tag Manager container ID (e.g., `GTM-XXXXXXX`)
+- `site.prod` - Boolean flag to enable GTM only in production
+- `for_body` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
+
+**Note:** This template is automatically included when using `__html-begin.liquid` and `__html-end.liquid`. You only need to manually render it if you're not using those base templates.
+
+**Manual Usage:**
+
+In your base template's `<head>`:
+
+```liquid
+{% render 'bricks/_gtm', site: site %}
+```
+
+In your base template's `<body>` (right after the opening tag):
+
+```liquid
+{% render 'bricks/_gtm', site: site, for_body: true %}
+```
+
+**Example (Manual Integration):**
+
+```liquid
+<!DOCTYPE html>
+<html>
+<head>
+  {% render 'bricks/_gtm', site: site %}
+</head>
+<body>
+  {% render 'bricks/_gtm', site: site, for_body: true %}
+  <!-- Your content -->
+</body>
+</html>
+```
+
+**Rendering Logic:** The GTM script is only rendered when both `site.prod` is `true` and `site.gtm_id` is set. The template uses a capture block to strip whitespace from the output.
+
+## License
+
+MIT

package/bricks/__html-begin.liquid

@@ -0,0 +1,40 @@
+<!doctype html>
+{% # if-true trick not to break auto-formatting %}
+{% if true %}<html lang="{{ site.lang | default: 'en' }}">{% endif %}
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
+  <title>
+    {{- title | strip_html | append: ' | ' | if: title -}}
+    {{- site.title -}}
+  </title>
+  <link rel="icon" href="/favicon.ico">
+
+  {% # styles %}
+  {%- for href in site.styles %}
+    <link rel="stylesheet" href="{{ href }}">
+  {%- endfor %}
+  <style>
+    {{ site.inline_styles | join: '\n' }}
+  </style>
+
+  {% # scripts %}
+  {%- for src in site.scripts %}
+    <script src="{{ src }}" defer></script>
+  {%- endfor %}
+  <script type="module">
+    {{ site.inline_scripts | join: '\n' }}
+  </script>
+
+  {% # custom %}
+  {{ content_for_header }}
+
+  {% render './_gtm', site: site %}
+</head>
+
+{% # if-true trick not to break auto-formatting %}
+{% if true %}
+  <body>
+    {% render './_gtm', site: site, for_body: true %}
+{% endif %}

package/bricks/__html-end.liquid

@@ -0,0 +1,2 @@
+  </body>
+</html>

package/bricks/__html.css

@@ -0,0 +1,28 @@
+/* Prevent horizontal overflow and scrolling, modern way */
+html,
+body {
+  overflow-x: clip;
+}
+
+body {
+  /* Ensures body takes at least the full height of the viewport (using dynamic viewport height for better mobile support) */
+  min-height: 100dvh;
+
+  /* Enable hyphenation and font smoothing for better typography */
+  hyphens: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Make the body a flex container with column layout; main fills space */
+  display: flex;
+  flex-direction: column;
+  > main {
+    flex-grow: 1;
+  }
+
+  /* Disable hyphenation for links and tables */
+  a,
+  table {
+    hyphens: none;
+  }
+}

package/bricks/_gtm.liquid

@@ -0,0 +1,23 @@
+{% if site.prod and site.gtm_id %}
+  {% capture _ %}
+    {% unless for_body %}
+
+<!-- Google Tag Manager -->
+<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','{{ site.gtm_id }}');</script>
+<!-- End Google Tag Manager -->
+
+    {% else %}
+
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.gtm_id }}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
+
+    {% endunless %}
+  {% endcapture %}
+  {{ _ | strip }}
+{% endif %}

package/bricks/_nav.liquid

@@ -0,0 +1,9 @@
+<nav>
+  {%- for entry in nav_pages %}
+    {% # prettier-ignore %}
+    <a href="{{ entry.url }}" {% if entry.url == current_url %}aria-current="page"{% endif %}>
+      {{- entry.title -}}
+    </a>
+  {%- endfor %}
+</nav>
+{% # Compatible with https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually %}

package/bricks/_prism.css

@@ -0,0 +1,14 @@
+/* Prism.js */
+.token.treeview-part {
+  .entry-line {
+    width: 2.5em !important;
+    opacity: 25%;
+  }
+  .entry-name:last-child {
+    opacity: 50%;
+
+    &::before {
+      display: none !important;
+    }
+  }
+}

package/bricks/_prose.css

@@ -0,0 +1,110 @@
+.prose {
+  /* Container-like behavior with padding and auto margins */
+  width: 100%;
+  padding: 1rem;
+  margin-inline: auto;
+
+  /* Helper for multi-line subtitles */
+  small {
+    vertical-align: top;
+    margin-top: 0.1em;
+    line-height: 1.1;
+    font-weight: 300;
+    /* Workaround to prevent underline inside links */
+    display: inline-block;
+    width: 100%;
+  }
+
+  a {
+    text-underline-offset: 0.1em;
+    text-decoration-thickness: 1px;
+    /* Don't underline links that point to anchors */
+    &[href^="#"] {
+      text-decoration: none;
+    }
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+
+    /* Helper to insert icons in links */
+    i {
+      height: 1em;
+      margin-right: 0.25em;
+      font-style: normal;
+      /* Workaround to prevent underline */
+      display: inline-block;
+
+      img {
+        height: 100%;
+        margin: 0;
+        position: relative;
+        bottom: -0.15em;
+      }
+    }
+  }
+
+  img {
+    &:not(:where(.prose > img, .prose > p > img)) {
+      margin-top: 0;
+      margin-bottom: 1em;
+    }
+  }
+
+  h1 {
+    margin-bottom: 0.5em !important;
+
+    small {
+      font-size: 50%;
+    }
+  }
+
+  th,
+  td {
+    /* Keep extra space on the right for better horizontal scroll on mobile */
+    padding: 1rem 2rem 1rem 0;
+    vertical-align: top;
+    /* Workaround to widen particular columns */
+    hr {
+      width: 12ch;
+      height: 0;
+      margin: 0;
+      visibility: hidden;
+      /* &.ch16 {
+        width: 16ch;
+      } */
+    }
+    /* Workaround for headings in Markdown tables */
+    big {
+      font-weight: bold;
+    }
+  }
+  th {
+    vertical-align: bottom;
+  }
+
+  blockquote {
+    font-weight: 300;
+
+    + figcaption {
+      margin-top: -1em;
+      text-align: right;
+      font-style: italic;
+      font-weight: 300;
+
+      &::before {
+        content: "—";
+        margin-right: 0.25em;
+      }
+    }
+  }
+
+  code[data-caption] {
+    &::before {
+      content: attr(data-caption);
+      display: block;
+      margin-bottom: 1.5em;
+      opacity: 0.5;
+      font-style: italic;
+    }
+  }
+}

package/bricks/_util.css

@@ -0,0 +1,6 @@
+/* Utility classes */
+.invert {
+  ::-webkit-scrollbar {
+    filter: invert(1) !important;
+  }
+}

package/bricks/bricks.css

@@ -0,0 +1,10 @@
+/**
+ * @anydigital/bricks
+ * Framework-agnostic CSS utility helpers
+ */
+
+@import "__html";
+@import "_prose";
+@import "@anydigital/breakout-css"; /* after prose to override it */
+@import "_prism";
+@import "_util";

package/dist/bricks.css

@@ -0,0 +1,323 @@
+/**
+ * @anydigital/bricks
+ * Framework-agnostic CSS utility helpers
+ */
+
+/* Prevent horizontal overflow and scrolling, modern way */
+
+html,
+body {
+  overflow-x: clip;
+}
+
+body {
+  /* Ensures body takes at least the full height of the viewport (using dynamic viewport height for better mobile support) */
+  min-height: 100dvh;
+
+  /* Enable hyphenation and font smoothing for better typography */
+  hyphens: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Make the body a flex container with column layout; main fills space */
+  display: flex;
+  flex-direction: column;
+}
+
+body  > main {
+    flex-grow: 1;
+  }
+
+/* Disable hyphenation for links and tables */
+
+body a,body table {
+    hyphens: none;
+  }
+
+.prose {
+  /* Container-like behavior with padding and auto margins */
+  width: 100%;
+  padding: 1rem;
+  margin-inline: auto;
+
+  /* Helper for multi-line subtitles */
+}
+
+.prose small {
+    vertical-align: top;
+    margin-top: 0.1em;
+    line-height: 1.1;
+    font-weight: 300;
+    /* Workaround to prevent underline inside links */
+    display: inline-block;
+    width: 100%;
+  }
+
+.prose a {
+    text-underline-offset: 0.1em;
+    text-decoration-thickness: 1px;
+    /* Don't underline links that point to anchors */
+  }
+
+.prose a[href^="#"] {
+      text-decoration: none;
+    }
+
+.prose a:hover {
+      text-decoration-thickness: 2px;
+    }
+
+/* Helper to insert icons in links */
+
+.prose a i {
+      height: 1em;
+      margin-right: 0.25em;
+      font-style: normal;
+      /* Workaround to prevent underline */
+      display: inline-block;
+    }
+
+.prose a i img {
+        height: 100%;
+        margin: 0;
+        position: relative;
+        bottom: -0.15em;
+      }
+
+.prose img:not(:where(.prose > img,.prose > p > img)) {
+      margin-top: 0;
+      margin-bottom: 1em;
+    }
+
+.prose h1 {
+    margin-bottom: 0.5em !important;
+  }
+
+.prose h1 small {
+      font-size: 50%;
+    }
+
+.prose th,.prose td {
+    /* Keep extra space on the right for better horizontal scroll on mobile */
+    padding: 1rem 2rem 1rem 0;
+    vertical-align: top;
+    /* Workaround to widen particular columns */
+  }
+
+.prose th hr,.prose td hr {
+      width: 12ch;
+      height: 0;
+      margin: 0;
+      visibility: hidden;
+      /* &.ch16 {
+        width: 16ch;
+      } */
+    }
+
+/* Workaround for headings in Markdown tables */
+
+.prose th big,.prose td big {
+      font-weight: bold;
+    }
+
+.prose th {
+    vertical-align: bottom;
+  }
+
+.prose blockquote {
+    font-weight: 300;
+  }
+
+.prose blockquote  + figcaption {
+      margin-top: -1em;
+      text-align: right;
+      font-style: italic;
+      font-weight: 300;
+    }
+
+.prose blockquote + figcaption::before {
+        content: "—";
+        margin-right: 0.25em;
+      }
+
+.prose code[data-caption]::before {
+      content: attr(data-caption);
+      display: block;
+      margin-bottom: 1.5em;
+      opacity: 0.5;
+      font-style: italic;
+    }
+
+/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
+
+.breakout {
+  /* Prepare the container for breakout elements */
+  padding-inline: 10%;
+  max-width: calc(10% + 65ch + 10%);
+
+  /* Direct children, or wrapped in <p> for Markdown support */
+}
+
+.breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > pre:not(does-not-exist):not(.does-not-exist),.breakout > iframe:not(does-not-exist):not(.does-not-exist),.breakout > object:not(does-not-exist):not(.does-not-exist),.breakout > embed:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-item:not(does-not-exist),.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist),.breakout > p > table:not(.does-not-exist),.breakout > p > pre:not(.does-not-exist),.breakout > p > iframe:not(.does-not-exist),.breakout > p > object:not(.does-not-exist),.breakout > p > embed:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > .breakout-item,.breakout > p > .breakout-item-max {
+      width: -moz-fit-content;
+      width: fit-content;
+      min-width: 100%;
+      max-width: 125%;
+      margin-left: 50%;
+      transform: translateX(-50%);
+    }
+
+/* Respect inline blocks' min-width */
+
+.breakout > img:not(does-not-exist),.breakout > picture:not(does-not-exist),.breakout > figure:not(does-not-exist),.breakout > canvas:not(does-not-exist),.breakout > audio:not(does-not-exist),.breakout > p > img,.breakout > p > picture,.breakout > p > figure,.breakout > p > canvas,.breakout > p > audio {
+      min-width: auto;
+    }
+
+/* Tables are so special :( */
+
+.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > p > table:not(.does-not-exist) {
+      /* .does-not-exist is here to avoid !important below @TODO */
+
+      /* Let them full-bleed */
+      width: -moz-max-content;
+      width: max-content;
+      min-width: auto;
+      max-width: 100vw;
+      padding-inline: 7.5%;
+
+      /* Let them scroll */
+      display: block;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
+    }
+
+/* Max out the width of the element */
+
+.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
+      width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
+    }
+
+.breakout-headings h2:not([class]),.breakout-headings h3:not([class]),.breakout-headings h4:not([class]),.breakout-headings hr {
+    position: relative;
+  }
+
+.breakout-headings h2:not([class])::before {
+      content: "";
+      display: block;
+      position: absolute;
+      background-color: rgba(0, 0, 0, 5%);
+    }
+
+.breakout-headings h3:not([class])::before {
+      content: "";
+      display: block;
+      position: absolute;
+      background-color: rgba(0, 0, 0, 5%);
+    }
+
+.breakout-headings h4:not([class])::before {
+      content: "";
+      display: block;
+      position: absolute;
+      background-color: rgba(0, 0, 0, 5%);
+    }
+
+.breakout-headings hr:not(.does-not-exist)::before {
+      content: "";
+      display: block;
+      position: absolute;
+      background-color: rgba(0, 0, 0, 5%);
+    }
+
+.breakout-headings h2:not([class])::before {
+      width: 10em;
+      right: 100%;
+      margin-right: 1rem;
+      height: 0.3em;
+      top: 50%;
+      transform: translateY(-50%);
+      background: linear-gradient(
+        to left,
+        rgba(0, 0, 0, 10%),
+        rgba(0, 0, 0, 5%) 10%,
+        transparent
+      );
+    }
+
+.breakout-headings h3:not([class])::before {
+      width: 10em;
+      right: 100%;
+      margin-right: 1rem;
+      height: 0.3em;
+      top: 50%;
+      transform: translateY(-50%);
+      background: linear-gradient(
+        to left,
+        rgba(0, 0, 0, 10%),
+        rgba(0, 0, 0, 5%) 10%,
+        transparent
+      );
+    }
+
+.breakout-headings h4:not([class])::before {
+      width: 10em;
+      right: 100%;
+      margin-right: 1rem;
+      height: 0.3em;
+      top: 50%;
+      transform: translateY(-50%);
+      background: linear-gradient(
+        to left,
+        rgba(0, 0, 0, 10%),
+        rgba(0, 0, 0, 5%) 10%,
+        transparent
+      );
+    }
+
+.breakout-headings hr {
+    height: 0.75rem;
+    border: none;
+    overflow: visible;
+  }
+
+.breakout-headings hr::before {
+      width: 100vw;
+      left: 50%;
+      height: 100%;
+      transform: translateX(-50%);
+    }
+
+.breakout-headings hr + h2::before {
+      display: none !important;
+    }
+
+.breakout-headings hr + h3::before {
+      display: none !important;
+    }
+
+.breakout-headings hr + h4::before {
+      display: none !important;
+    }
+
+/* after prose to override it */
+
+/* Prism.js */
+
+.token.treeview-part .entry-line {
+    width: 2.5em !important;
+    opacity: 25%;
+  }
+
+.token.treeview-part .entry-name:last-child {
+    opacity: 50%;
+  }
+
+.token.treeview-part .entry-name:last-child::before {
+      display: none !important;
+    }
+
+/* Utility classes */
+
+.invert ::-webkit-scrollbar {
+    filter: invert(1) !important;
+  }

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@anydigital/bricks",
+  "version": "0.21.0",
+  "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
+  "main": "dist/bricks.css",
+  "style": "dist/bricks.css",
+  "scripts": {
+    "postcss": "postcss bricks/bricks.css -o dist/bricks.css",
+    "build": "npm run postcss -- --no-map",
+    "start": "npm run postcss -- --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anydigital/bricks.git"
+  },
+  "keywords": [
+    "css",
+    "utilities",
+    "helpers",
+    "atomic",
+    "cdn"
+  ],
+  "author": "Anton Staroverov",
+  "license": "MIT",
+  "devDependencies": {
+    "@anydigital/breakout-css": "^0.11.0",
+    "postcss": "^8.4.33",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.1",
+    "postcss-preset-env": "^10.6.0"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,8 @@
+const breakoutConfig = require('./node_modules/@anydigital/breakout-css/postcss.config.js');
+
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    ...breakoutConfig.plugins,
+  }
+}