@anydigital/bricks 0.25.0 → 0.26.0-alpha.2

package/README.md

@@ -1,32 +1,36 @@
-# *Any*bricks
+# `bricks[.css]` <sup><sub>by *Any*digital</sub></sup>
 
-Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.
+Framework-agnostic, Tailwind-compatible CSS utilities and single-file `bricks` for modern web development.
 
-## Installation
+<!--section:css-h2-->
+
+## CSS 'Bricks' <br><sub>from https://github.com/anydigital/bricks</sub> <a id="bricks"></a>
 
-### Via CDN
+### Install CSS
+
+Via CDN:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anydigital/bricks@1/dist/bricks.css" />
+<link href="https://cdn.jsdelivr.net/npm/@anydigital/bricks@0/dist/bricks.min.css" rel="stylesheet" />
 ```
 
-### Via npm
+Or import source styles via npm:
 
 ```sh
 npm install @anydigital/bricks
 ```
 
-Then import in your CSS:
-
-```css
+```css {data-caption=.css}
 @import "@anydigital/bricks";
 ```
 
-<!--section:css-h2-->
+<details><summary>
+
+### `_base.css` styles
 
-## CSS 'Bricks'
+</summary>
 
-### Overflow Control
+#### Overflow Control
 
 Prevents horizontal overflow and scrolling on the entire page:
 
@@ -39,7 +43,7 @@ body {
 
 This is automatically applied when you include the stylesheet.
 
-### Full Viewport Height
+#### Full Viewport Height
 
 Ensures the body element takes at least the full height of the viewport using dynamic viewport height for better mobile support:
 
@@ -51,7 +55,26 @@ body {
 
 This is automatically applied when you include the stylesheet.
 
-### Typography Enhancements
+#### 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.
+
+#### Typography Enhancements
 
 Improves text rendering and readability:
 
@@ -69,7 +92,13 @@ body {
 
 This is automatically applied when you include the stylesheet.
 
-### Prose Styling
+</details>
+
+<details><summary>
+
+### `_prose.css` Tailwind Typography enhancements
+
+</summary>
 
 The `.prose` class provides enhanced typography for article content and long-form text with container-like behavior:
 
@@ -112,7 +141,9 @@ The `.prose` class provides enhanced typography for article content and long-for
 
 - 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
+</details>
+
+### `_prism.css` enhancements
 
 Includes specialized styling for Prism.js, specifically focusing on treeview components:
 
@@ -122,7 +153,11 @@ Includes specialized styling for Prism.js, specifically focusing on treeview com
 - Last-child entry names have no `::before` pseudo-element
 - Supports complex file tree visualizations out of the box
 
-### Utilities
+<details><summary>
+
+### `_util.css` helpers
+
+</summary>
 
 #### Scrollbar Inversion
 
@@ -159,26 +194,9 @@ This ensures the icon and the text stay together on the same line. If you need n
 
 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;
-}
-```
+</details>
 
-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
+### `breakout-css` included
 
 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:
 
@@ -192,11 +210,11 @@ The breakout container has `10%` inline padding and a max-width of `calc(10% + 6
 
 <!--section:njk-liquid-h2-->
 
-## Universal Template 'Bricks' <small>(`.njk` & `.liquid`)</small> <sub>from https://github.com/anydigital/bricks</sub>
+## Universal Template 'Bricks' <small>(`.njk` & `.liquid`)</small> <br><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.
+The package includes reusable templates in the `./src/bricks/` directory. These are useful for common web development patterns.
 
-### Installation
+### Install Templates
 
 ```sh
 npm install @anydigital/bricks
@@ -283,8 +301,12 @@ A navigation template `bricks/_nav.{njk|liquid}` that renders a list of navigati
 </nav>
 ```
 
+<details><summary>
+
 ### Google Tag Manager <small>(`_gtm.*`)</small>
 
+</summary>
+
 A template `bricks/_gtm.{njk|liquid}` for embedding Google Tag Manager scripts in your pages.
 
 **Parameters:**
@@ -298,8 +320,4 @@ A template `bricks/_gtm.{njk|liquid}` for embedding Google Tag Manager scripts i
 - https://github.com/anydigital/bricks/blob/main/bricks/__html.njk
 - https://github.com/anydigital/bricks/blob/main/bricks/__html.liquid
 
-<!--section-->
-
-## License
-
-MIT
+</details>

package/_config.yml

@@ -0,0 +1,5 @@
+exclude:
+  - "**/*"
+include:
+  - "assets/**/*"
+  - "*.md"

package/{src/bricks/__html.liquid → _includes/bricks/html.liquid}

@@ -4,32 +4,32 @@
     <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 -}}
+      {%- if title %}{{ title | strip_html | append: ' | ' }}{% endif -%}
       {{- site.title -}}
     </title>
     <link rel="icon" href="/favicon.ico">
 
     {%- for href in site.styles %}
-      <link rel="stylesheet" href="{{ href }}">
+      <link rel="stylesheet" href="{{ href | relative_url }}">
     {%- endfor %}
-    {% # prettier-ignore %}
-    <style>{{ site.inline_styles | join: '\n' }}</style>
-    {% # %}
+    <style>
+      {{ site.inline_styles | join: '\n' }}
+    </style>
 
     {%- for src in site.scripts %}
       <script src="{{ src }}" defer></script>
     {%- endfor %}
-    {% # prettier-ignore %}
-    <script type="module">{{ site.inline_scripts | join: '\n' }}</script>
-    {% # %}
+    <script type="module">
+      {{ site.inline_scripts | join: '\n' }}
+    </script>
 
     {{ content_for_header }}
-    {% render './_gtm', site: site %}
+    {% include bricks/gtm.liquid %}
   </head>
 
   <body>
-    {% render './_gtm', site: site, for_body: true %}
+    {% include bricks/gtm.liquid for_body=true %}
+
     {{ body }}
-    {% # %}
   </body>
 </html>

package/{src/bricks/__html.njk → _includes/bricks/html.njk}

@@ -12,23 +12,23 @@
     {%- for href in site.styles %}
       <link rel="stylesheet" href="{{ href }}" />
     {%- endfor %}
-    {# prettier-ignore-start #}
-    <style>{{ site.inline_styles | d([]) | join('\n') }}</style>
-    {# prettier-ignore-end #}
+    {# prettier-ignore-start #}<style>
+      {{ site.inline_styles | d([]) | join('\n') }}
+    </style>{# prettier-ignore-end #}
 
     {%- for src in site.scripts %}
       <script src="{{ src }}" defer></script>
     {%- endfor %}
-    {# prettier-ignore-start #}
-    <script type="module">{{ site.inline_scripts | d([]) | join('\n') }}</script>
-    {# prettier-ignore-end #}
+    {# prettier-ignore-start #}<script type="module">
+      {{ site.inline_scripts | d([]) | join('\n') }}
+    </script>{# prettier-ignore-end #}
 
     {{ content_for_header }}
-    {% include 'bricks/_gtm.njk' %}
+    {% include 'bricks/gtm.njk' %}
   </head>
 
   <body>
-    {% set for_body = true %}{% include 'bricks/_gtm.njk' %}
+    {% set for_body = true %}{% include 'bricks/gtm.njk' %}
     {% block body %}
     {% endblock %}
   </body>

package/assets/breakout.css

@@ -0,0 +1,150 @@
+/* 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%);
+    }
+
+/*** .does-not-exist is used below to avoid !important-s @TODO ***/
+
+/* Respect inline blocks' min-width */
+
+.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 > 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) {
+      min-width: auto;
+    }
+
+/* Tables are so special :( */
+
+.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > p > table:not(.does-not-exist) {
+      /* 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;
+    }

package/bricks.gemspec

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+Gem::Specification.new do |spec|
+  spec.name          = "bricks"
+  spec.version       = "0.25.0"
+  spec.authors       = ["Anton Staroverov"]
+
+  spec.summary       = "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development."
+  spec.homepage      = "https://github.com/anydigital/bricks"
+  spec.license       = "MIT"
+
+  spec.files = Dir.glob("{_includes,assets}/**/*")
+  # puts "spec.files: #{spec.files.inspect}"
+
+  spec.add_runtime_dependency "jekyll", ">= 3.5", "< 5.0"
+end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/bricks",
-  "version": "0.25.0",
+  "version": "0.26.0-alpha.2",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
   "style": "./src/bricks.css",
   "exports": {
@@ -8,8 +8,8 @@
     "./dist": "./dist/bricks.css"
   },
   "scripts": {
-    "postcss": "postcss src/bricks.css -o dist/bricks.css",
-    "build": "npm run postcss -- --no-map",
+    "postcss": "postcss src/bricks.css -o assets/bricks.css",
+    "build": "npm run postcss -- --no-map && cp ./node_modules/@anydigital/breakout-css/dist/breakout.css ./assets/",
     "start": "npm run postcss -- --watch",
     "prepublishOnly": "npm run build"
   },