npm - @anydigital/bricks - Versions diffs - 0.24.1 → 0.25.0 - Mend

@@ -22,7 +22,9 @@ Then import in your CSS:
 @import "@anydigital/bricks";
 ```
-## Features
+<!--section:css-h2-->
+## CSS 'Bricks'
 ### Overflow Control
@@ -188,13 +190,45 @@ Includes [breakout-css](https://github.com/anydigital/breakout-css) utilities fo
 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)
+<!--section:njk-liquid-h2-->
+## Universal Template 'Bricks' <small>(`.njk` & `.liquid`)</small> <sub>from https://github.com/anydigital/bricks</sub>
+The package includes reusable templates in the `bricks/` directory. These are useful for common web development patterns.
+### Installation
+```sh
+npm install @anydigital/bricks
+cd ./src/_includes
+ln -s ../../node_modules/@anydigital/bricks/src/bricks
+```
-The package includes reusable Liquid templates in the `bricks/` directory. These are useful for common web development patterns.
+### Base HTML Template <small>(`__html.*`)</small>
-### Base HTML Template (`__html.liquid`)
+A unified base HTML template `bricks/__html.{njk|liquid}` that provides the essential document structure with built-in support for modern web best practices.
+**Usage:**
-A unified base HTML template that provides the essential document structure with built-in support for modern web best practices.
+```jinja2 {data-caption="in .njk layout:"}
+{% extends 'bricks/__html.njk' %}
+{% block body %}
+  <!-- YOUR page content -->
+{% endblock %}
+```
+Example: https://github.com/anydigital/sveleven/blob/main/src/_theme/__layout.njk
+```liquid {data-caption="in .liquid layout:"}
+{% capture body %}
+  <!-- YOUR page content -->
+{% endcapture %}
+{% include 'bricks/__html' %}
+```
+Example: https://github.com/anydigital/sveleven/blob/main/src/_theme/__layout.liquid
 **Features:**
@@ -207,19 +241,7 @@ A unified base HTML template that provides the essential document structure with
 - 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
-{% capture page_content %}
-  <!-- Your page content -->
-{% endcapture %}
-{% render 'bricks/__html', site: site, title: title, content_for_header: content_for_header, body: page_content %}
-```
-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.
+- Google Tag Manager integration (automatically rendered via `_gtm.{njk|liquid}` template for both `<head>` and `<body>` when `site.prod` and `site.gtm_id` are set)
 **Variables:**
@@ -235,26 +257,20 @@ Note: Google Tag Manager is automatically included in both `<head>` and `<body>`
 - `site.gtm_id` - Google Tag Manager ID (optional)
 - `site.prod` - Boolean flag for production environment (optional)
-### Navigation (`_nav.liquid`)
+### Navigation <small>(`_nav.*`)</small>
-A navigation template that renders a list of navigation links with proper accessibility attributes.
+A navigation template `bricks/_nav.{njk|liquid}` 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:**
+**Usage example with [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually):**
-```liquid
-{% assign navPages = site.pages | where: "nav", true %}
-{% render 'bricks/_nav', nav_pages: navPages, current_url: page.url %}
+```liquid {data-caption="in .liquid:"}
+{% assign nav_pages = collections.all | eleventyNavigation %}
+{% render 'bricks/_nav', nav_pages: nav_pages, current_url: page.url %}
 ```
 **Output:**
@@ -267,11 +283,9 @@ A navigation template that renders a list of navigation links with proper access
 </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 <small>(`_gtm.*`)</small>
-### Google Tag Manager (`_gtm.liquid`)
-A template for embedding Google Tag Manager scripts in your pages.
+A template `bricks/_gtm.{njk|liquid}` for embedding Google Tag Manager scripts in your pages.
 **Parameters:**
@@ -279,38 +293,12 @@ A template for embedding Google Tag Manager scripts in your pages.
 - `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.liquid`. You only need to manually render it if you're not using that base template.
-**Manual Usage:**
-In your base template's `<head>`:
-```liquid
-{% render 'bricks/_gtm', site: site %}
-```
+**Note:** This template is automatically included when using `__html.liquid`. You only need to manually render it if you're not using that base template, see examples:
-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>
-```
+- https://github.com/anydigital/bricks/blob/main/bricks/__html.njk
+- https://github.com/anydigital/bricks/blob/main/bricks/__html.liquid
-**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.
+<!--section-->
 ## License

@@ -1,14 +1,14 @@
 {
   "name": "@anydigital/bricks",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
-  "style": "./bricks/bricks.css",
+  "style": "./src/bricks.css",
   "exports": {
-    ".": "./bricks/bricks.css",
+    ".": "./src/bricks.css",
     "./dist": "./dist/bricks.css"
   },
   "scripts": {
-    "postcss": "postcss bricks/bricks.css -o dist/bricks.css",
+    "postcss": "postcss src/bricks.css -o dist/bricks.css",
     "build": "npm run postcss -- --no-map",
     "start": "npm run postcss -- --watch",
     "prepublishOnly": "npm run build"
@@ -27,11 +27,13 @@
   "author": "Anton Staroverov",
   "license": "MIT",
   "devDependencies": {
-    "@anydigital/breakout-css": "^0.11.1",
     "postcss": "^8.4.33",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.1",
     "postcss-preset-env": "^10.6.0",
     "prettier-plugin-jinja-template": "^2.1.0"
+  },
+  "dependencies": {
+    "@anydigital/breakout-css": "^0.11.1"
   }
 }

@@ -3,7 +3,7 @@
  * Framework-agnostic CSS utility helpers
  */
-@import "./__html";
+@import "./_base";
 @import "./_prose";
 @import "@anydigital/breakout-css"; /* after prose to override it */
 @import "./_prism";

@anydigital/bricks 0.24.1 → 0.25.0