Anybricks

Framework-agnostic CSS utilities and single-file Nunjucks '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;
}

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:

Links:

Headings:

Tables:

Blockquotes:

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

Usage:

{% extends 'bricks/__html.njk' %}

{% block head %}
  <!-- Additional head elements (optional) -->
{% endblock %}

{% block body %}
  <!-- Your page content -->
{% endblock %}

Required Variables:

A navigation macro that renders a list of navigation links with proper accessibility attributes.

Parameters:

Usage:

{% from "bricks/_nav.njk" import render %}
{{ render(navPages, page.url) }}

Example:

{% set navPages = [
  { url: '/', title: 'Home' },
  { url: '/about', title: 'About' },
  { url: '/contact', title: 'Contact' }
] %}
{% from "bricks/_nav.njk" import render %}
{{ render(navPages, '/about') }}

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

A macro for embedding Google Tag Manager scripts in your pages.

Parameters:

Usage:

In your base template's <head>:

{% import "bricks/_gtm.njk" as gtm %}
{{ gtm.render(site.gtmId) }}

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

{{ gtm.render(site.gtmId, bodyFallback=true) }}

Example:

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