@anydigital/bricks 0.25.0 → 0.26.0-alpha

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,4 @@
+exclude:
+  - "**/*"
+include:
+  - "*.md"

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

@@ -4,7 +4,7 @@
     <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">
@@ -12,24 +12,24 @@
     {%- for href in site.styles %}
       <link rel="stylesheet" href="{{ href }}">
     {%- 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/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}/**/*")
+  # 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",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
   "style": "./src/bricks.css",
   "exports": {