Article Title
Your content here...
Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.
npm install @anydigital/bricksFramework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.
``html`
`sh`
npm install @anydigital/bricks
Then import in your CSS:
`css`
@import "@anydigital/bricks";
Prevents horizontal overflow and scrolling on the entire page:
`css`
html,
body {
overflow-x: clip;
}
This is automatically applied when you include the stylesheet.
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.
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.
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 decorationi
- Icon helper: 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 marginh1 sub
- elements get reduced font size (50%).header-anchor
- Support for heading anchors via class (displayed on hover to the left of the heading)
Tables:
- Tables within .breakout containers are automatically styled for full-bleed display and horizontal scrollingth
- Table cells ( and td) have padding of 1rem 2rem 1rem 0 (extra space on the right for better horizontal scroll on mobile) and top vertical alignmentth
- Table headers () have bottom vertical alignmenthr
- Workaround for widening columns using hidden elements (width: 12ch, with zero margin and hidden visibility)big
- Support for headings in Markdown tables using elements (styled as bold)1em
- Images in table cells have no top margin and bottom margin
Blockquotes:
- Lighter font weight (300)figcaption
- Adjacent 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)
Includes specialized styling for Prism.js, specifically focusing on treeview components:
- Custom styling for .token.treeview-part2.5em
- Reduced opacity for entry lines (25%) and names (50%) to create a hierarchical visual effect
- Entry lines have a fixed width of ::before
- Last-child entry names have no pseudo-element
- Supports complex file tree visualizations out of the box
#### 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:
` Your content here...html`
Article Title
This is automatically included when you import the stylesheet.
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.
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.
The package includes reusable Liquid templates in the bricks/ directory. These are useful for common web development patterns.
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)viewport-fit=cover
- UTF-8 charset and comprehensive viewport meta tag with for notched devices|
- Dynamic title generation with site title suffix (title is stripped of HTML tags and separated with )/favicon.ico
- Favicon link (to )site.styles
- Automatic stylesheet linking from arraysite.inline_styles
- Inline styles from array (joined with newlines in a