@anydigital/bricks 1.0.0-alpha.10

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,258 @@
+# *Any*bricks
+
+Framework-agnostic CSS utilities and single-file Nunjucks '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
+
+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
+
+**Links:**
+- Custom underline offset (`0.1em`) and thickness (`1px` default, `2px` on hover)
+- Anchor links (starting with `#`) have no text decoration
+- Special handling for `small`, `sup`, or `sub` elements: lighter weight (`300`) and displayed as `inline-block` to prevent underline decoration
+
+**Headings:**
+- `h1` with `small`, `sup`, or `sub` elements get reduced font size (`0.5em`) and lighter weight (`300`)
+- `h2` headings (without classes) get a full-width decorative bar above them (`0.4em` height, positioned `1em` above, with `2em` top margin)
+- `h3` headings (without classes) get a decorative gradient bar to the left (`10em` width, `0.3em` height, fading from 10% to 5% to transparent opacity)
+- `h4` headings (without classes) get a similar decorative gradient bar but thinner (`0.2em` height)
+
+**Tables:**
+- Tables are displayed as blocks with horizontal scrolling
+- On mobile (max-width: 767px), tables get `1.5em` horizontal padding
+- Table cells have `1em` vertical padding (top and bottom)
+- Workaround for widening columns using hidden `hr` elements (minimum width: `25ch`)
+- Support for headings in Markdown tables using `big` elements (styled as bold italic)
+
+**Blockquotes:**
+- Lighter font weight (`300`)
+- Adjacent `figcaption` elements are styled with italic text, right alignment, lighter weight (`300`), negative top margin (`-1em`), and an em dash prefix
+
+**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 utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. This is automatically included when you import the stylesheet.
+
+## Bricks (Template Components)
+
+The package includes reusable Nunjucks template macros in the `bricks/` directory. These are useful for common web development patterns.
+
+### Base HTML Template (`__html.njk`)
+
+A base HTML template that provides the essential document structure with built-in support for modern web best practices.
+
+**Features:**
+- HTML5 DOCTYPE with language attribute
+- UTF-8 charset and comprehensive viewport meta tag with `viewport-fit=cover` for notched devices
+- Dynamic title generation with site title suffix
+- Favicon link
+- Google Tag Manager integration (conditional on production environment)
+- Head and body content blocks for template extension
+
+**Usage:**
+
+```njk
+{% extends 'bricks/__html.njk' %}
+
+{% block head %}
+  <!-- Additional head elements (optional) -->
+{% endblock %}
+
+{% block body %}
+  <!-- Your page content -->
+{% endblock %}
+```
+
+**Required Variables:**
+- `title` - Page title (optional, will be stripped of HTML tags)
+- `site.title` - Site title for the title suffix
+- `site.gtmId` - Google Tag Manager ID (optional)
+- `site.isProd` - Boolean flag for production environment (optional)
+- `fromBricks` - Path to the bricks directory (optional, defaults to `'bricks/'`)
+
+### Navigation (`_nav.njk`)
+
+A navigation macro that renders a list of navigation links with proper accessibility attributes.
+
+**Parameters:**
+- `navPages` - Array of navigation page objects with `url` and `title` properties
+- `curPageUrl` - The URL of the current page (used to set `aria-current="page"`)
+
+**Usage:**
+
+```njk
+{% from "bricks/_nav.njk" import render %}
+{{ render(navPages, page.url) }}
+```
+
+**Example:**
+
+```njk
+{% set navPages = [
+  { url: '/', title: 'Home' },
+  { url: '/about', title: 'About' },
+  { url: '/contact', title: 'Contact' }
+] %}
+{% from "bricks/_nav.njk" import render %}
+{{ render(navPages, '/about') }}
+```
+
+**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.njk`)
+
+A macro for embedding Google Tag Manager scripts in your pages.
+
+**Parameters:**
+- `gtmId` - Your Google Tag Manager container ID (e.g., `GTM-XXXXXXX`)
+- `bodyFallback` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
+
+**Usage:**
+
+In your base template's `<head>`:
+
+```njk
+{% import "bricks/_gtm.njk" as gtm %}
+{{ gtm.render(site.gtmId) }}
+```
+
+In your base template's `<body>` (right after the opening tag):
+
+```njk
+{{ gtm.render(site.gtmId, bodyFallback=true) }}
+```
+
+**Example:**
+
+```njk
+<!DOCTYPE html>
+<html>
+<head>
+  {% import "bricks/_gtm.njk" as gtm %}
+  {{ gtm.render('GTM-XXXXXXX') }}
+</head>
+<body>
+  {{ gtm.render('GTM-XXXXXXX', bodyFallback=true) }}
+  <!-- Your content -->
+</body>
+</html>
+```
+
+## License
+
+MIT
+

package/bricks/__html.css

@@ -0,0 +1,21 @@
+/* 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;
+  }
+}

package/bricks/__html.njk

@@ -0,0 +1,17 @@
+{%- set fromBricks = fromBricks | default('bricks/') -%}
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
+  <title>{{ title | striptags ~ ' | ' if title }}{{ site.title }}</title>
+  <link rel="icon" href="/favicon.ico">
+  {% block head %}{% endblock %}
+  {% import fromBricks ~ '_gtm.njk' as gtm %}
+  {{ gtm.render(site.gtmId) if site.gtmId and site.isProd }}
+</head>
+<body>
+  {{ gtm.render(site.gtmId, bodyFallback=true) if site.gtmId and site.isProd }}
+  {% block body %}{% endblock %}
+</body>
+</html>

package/bricks/_gtm.njk

@@ -0,0 +1,18 @@
+{% macro render(gtmId, bodyFallback=false) %}
+
+{% if not bodyFallback %}
+<!-- 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','{{ gtmId }}');</script>
+<!-- End Google Tag Manager -->
+{% else %}
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ gtmId }}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
+{% endif %}
+
+{% endmacro %}

package/bricks/_nav.njk

@@ -0,0 +1,10 @@
+{% macro render(navPages, curPageUrl) %}
+<nav>
+  {%- for entry in navPages %}
+  <a href="{{ entry.url }}" {{ 'aria-current="page"' | safe if entry.url == curPageUrl }}>
+    {{- entry.title -}}
+  </a>
+  {%- endfor %}
+</nav>
+{% endmacro %}
+{# Compatible with https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually #}

package/bricks/_prose.css

@@ -0,0 +1,111 @@
+.prose {
+  /* Container-like behavior with padding and auto margins */
+  width: 100%;
+  padding: 1rem;
+  margin-inline: auto;
+
+  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;
+    }
+
+    small, sup, sub {
+      font-weight: 300;
+      /* Workaround to prevent underline */
+      display: inline-block;
+    }
+  }
+
+  h1 {
+    small, sup, sub {
+      font-size: 0.5em;
+      font-weight: 300;
+    }
+  }
+
+  h2:not([class]),
+  h3:not([class]),
+  h4:not([class]) {
+    position: relative;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      background-color: rgba(0,0,0,5%);
+    }
+  }
+  h2:not([class]) {
+    margin-top: 2em;
+
+    &::before {
+      width: 100vw;
+        left: 50%;
+      height: 0.4em;
+        top: -1em;
+        transform: translateX(-50%);
+    }
+  }
+  h3:not([class]),
+  h4:not([class]) {
+    &::before {
+      width: 10em;
+        right: 100%;
+        margin-right: 0.5em;
+      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);
+    }
+  }
+  h4:not([class]) {
+    &::before {
+      height: 0.2em;
+    }
+  }
+
+  table {
+    display: block;
+    overflow-x: auto;
+    @media (max-width: 767px) {
+      padding-inline: 1.5em;
+    }
+  }
+  th, td {
+    padding-top: 1em;
+    padding-bottom: 1em;
+    /* Workaround to widen particular columns */
+    hr {
+      min-width: 25ch;
+      margin: 0;
+      visibility: hidden;
+    }
+    /* Workaround for headings in Markdown tables */
+    big {
+      font-weight: bold;
+      font-style: italic;
+    }
+  }
+
+  blockquote {
+    font-weight: 300;
+
+    + figcaption {
+      margin-top: -1em;
+      text-align: right;
+      font-style: italic;
+      font-weight: 300;
+
+      &::before {
+        content: '—';
+        margin-right: 0.25em;
+      }
+    }
+  }  
+}

package/bricks/bricks.css

@@ -0,0 +1,8 @@
+/**
+ * @anydigital/bricks
+ * Framework-agnostic CSS utility helpers
+ */
+
+@import "__html";
+@import "_prose";
+@import "@anydigital/breakout-css";

package/dist/bricks.css

@@ -0,0 +1,199 @@
+/**
+ * @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;
+  }
+
+.prose {
+  /* Container-like behavior with padding and auto margins */
+  width: 100%;
+  padding: 1rem;
+  margin-inline: auto;  
+}
+
+.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;
+    }
+
+.prose a small,.prose a sup,.prose a sub {
+      font-weight: 300;
+      /* Workaround to prevent underline */
+      display: inline-block;
+    }
+
+.prose h1 small,.prose h1 sup,.prose h1 sub {
+      font-size: 0.5em;
+      font-weight: 300;
+    }
+
+.prose h2:not([class]),.prose h3:not([class]),.prose h4:not([class]) {
+    position: relative;
+  }
+
+.prose h2:not([class])::before {
+      content: '';
+      display: block;
+      position: absolute;
+      background-color: rgba(0,0,0,5%);
+    }
+
+.prose h3:not([class])::before {
+      content: '';
+      display: block;
+      position: absolute;
+      background-color: rgba(0,0,0,5%);
+    }
+
+.prose h4:not([class])::before {
+      content: '';
+      display: block;
+      position: absolute;
+      background-color: rgba(0,0,0,5%);
+    }
+
+.prose h2:not([class]) {
+    margin-top: 2em;
+  }
+
+.prose h2:not([class])::before {
+      width: 100vw;
+        left: 50%;
+      height: 0.4em;
+        top: -1em;
+        transform: translateX(-50%);
+    }
+
+.prose h3:not([class])::before {
+      width: 10em;
+        right: 100%;
+        margin-right: 0.5em;
+      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);
+    }
+
+.prose h4:not([class])::before {
+      width: 10em;
+        right: 100%;
+        margin-right: 0.5em;
+      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);
+    }
+
+.prose h4:not([class])::before {
+      height: 0.2em;
+    }
+
+.prose table {
+    display: block;
+    overflow-x: auto;
+  }
+
+@media (max-width: 767px) {
+
+.prose table {
+      padding-inline: 1.5em;
+  }
+    }
+
+.prose th,.prose td {
+    padding-top: 1em;
+    padding-bottom: 1em;
+    /* Workaround to widen particular columns */
+  }
+
+.prose th hr,.prose td hr {
+      min-width: 25ch;
+      margin: 0;
+      visibility: hidden;
+    }
+
+/* Workaround for headings in Markdown tables */
+
+.prose th big,.prose td big {
+      font-weight: bold;
+      font-style: italic;
+    }
+
+.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;
+      }
+
+/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
+
+.breakout {
+  padding-inline: 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;
+    }
+
+/* Max out the width of the element */
+
+.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
+      width: 125% !important; /* @TODO: !important for cases like figure.breakout-item-max */
+    }
+
+/* @TODO: Allow non-direct children. */

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@anydigital/bricks",
+  "version": "1.0.0-alpha.10",
+  "description": "Framework-agnostic CSS utilities and single-file Nunjucks 'bricks' for modern web development.",
+  "main": "dist/bricks.css",
+  "style": "dist/bricks.css",
+  "files": [
+    "dist",
+    "bricks"
+  ],
+  "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": "^1.0.0-alpha.7",
+    "postcss": "^8.4.33",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.1",
+    "postcss-preset-env": "^10.6.0"
+  },
+  "jsdelivr": "dist/bricks.css",
+  "unpkg": "dist/bricks.css"
+}