Anybricks

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

Installation

$3

``html

`

$3

`sh
npm install @anydigital/bricks
`

Then import in your CSS:

`css
@import "@anydigital/bricks";
`

Features

$3

Prevents horizontal overflow and scrolling on the entire page:

`css
html,
body {
overflow-x: clip;
}
`

This is automatically applied when you include the stylesheet.

$3

Ensures the body element takes at least the full height of the viewport using dynamic viewport height for better mobile support:

`css
body {
min-height: 100dvh;
}
`

This is automatically applied when you include the stylesheet.

$3

Improves text rendering and readability:

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

$3

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)

$3

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

$3

#### Scrollbar Inversion

The .invert class can be used to invert the scrollbar colors, which is particularly useful for dark themes or specific UI components:

`css
.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:

`html

Stay with me

`

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:

`html


Article Title

Your content here...


`

This is automatically included when you import the stylesheet.

$3

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.

$3

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:

`html



`

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.

$3

A unified base HTML template that provides the essential document structure with built-in support for modern web best practices.

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