Anybricks

Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.

Installation

Via CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anydigital/bricks@1/dist/bricks.css" />

Via npm

npm install @anydigital/bricks

Then import in your CSS:

@import "@anydigital/bricks";

Features

Overflow Control

Prevents horizontal overflow and scrolling on the entire page:

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:

body {
  min-height: 100dvh;
}

This is automatically applied when you include the stylesheet.

Typography Enhancements

Improves text rendering and readability:

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
• Centered with automatic inline margins

Typography Helpers:

• sub elements: styled for multi-line subtitles with top vertical alignment, 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 sub elements get reduced font size (50%)
• Support for heading anchors via .header-anchor class (displayed on hover to the left of the heading)

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:

.invert {
  ::-webkit-scrollbar {
    filter: invert(1) !important;
  }
}

Link Whitespace Control

The .whitespace-nowrap class can be applied to links to prevent them from wrapping, which is particularly useful when links contain icons that should stay with the text:

<a href="#" class="whitespace-nowrap">
  <i><img src="icon.svg" alt="" /></i>Stay with me
</a>

This ensures the icon and the text stay together on the same line. If you need nested elements to allow wrapping, they are automatically reset to white-space: normal.

Usage:

<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:

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 utilities for breaking out images and figures beyond their container width. Use the .breakout class to allow elements to extend beyond their parent container:

<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:

{% 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:

{% render 'bricks/_nav', nav_pages: navPages, current_url: page.url %}

Example:

{% assign navPages = site.pages | where: "nav", true %}
{% render 'bricks/_nav', nav_pages: navPages, current_url: page.url %}

Output:

<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.

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>:

{% render 'bricks/_gtm', site: site %}

In your base template's <body> (right after the opening tag):

{% render 'bricks/_gtm', site: site, for_body: true %}

Example (Manual Integration):

<!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