CSS Tricks

• /anydigital/bricks 🆕
• /anydigital/breakout-css 🆕
• /anydigital/float-label-css
• buildexcellentwebsit.es
• /2025/lots-of-little-html-pages

CSS 'Bricks'
_{from /anydigital/bricks} #

Install CSS #

Via CDN:

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

Or import source styles via npm:

npm install @anydigital/bricks

@import "@anydigital/bricks";

html,
body {
  overflow-x: clip;
}

body {
  min-height: 100dvh;
}

body {
  display: flex;
  flex-direction: column;
}

body > main {
  flex-grow: 1;
}

body {
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

_prism.css enhancements #

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

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

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

<article class="prose">
  <h1>Article Title</h1>
  <p>Your content here...</p>
</article>

breakout-css included #

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.

breakout-css #

Modern CSS utilities to easily break-out / hang / pop-out / bleed images, tables, iframes, and other figures from their parent container.

Installation #

From CDN #

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

From Source #

@import "@anydigital/breakout-css";

^ This is supported by Tailwind v4!

Usage #

Basic Usage #

<div class="breakout">
  <h1>Article Title</h1>
  <p>Lorem ipsum dolor sit amet...</p>

  <!-- This image will automatically break out -->
  <img src="hero.jpg" alt="Hero image" />

  <p>More content here...</p>
</div>

Supported Elements #

The breakout effect automatically applies to direct children or elements wrapped in <p> tags:

Inline blocks:

• img, picture, figure, canvas, audio

Larger blocks:

• table (responsive with horizontal scroll support), pre
• iframe, object, embed, video

Custom utility classes:

• Elements with .breakout-item or .breakout-item-max class

Headings & Dividers #

For decorative headings and full-width dividers, use the .breakout-headings class. This adds a subtle accent line to the left of headings and makes horizontal rules span the full viewport width:

<div class="breakout-headings">
  <h2>Section Title</h2>
  <p>Some content...</p>

  <hr />

  <h3>Subheading</h3>
  <p>More content...</p>
</div>

The extension applies to the following elements (when they don't have other classes):

• h2, h3, h4 (adds decorative accent line)
• hr (breaks out to full viewport width)

Note: The decorative accent on headings is automatically hidden if the heading immediately follows an <hr> to avoid visual overlap.

Manual Breakout #

For elements that don't automatically break out, use the .breakout-item class:

<div class="breakout">
  <p>Regular content...</p>

  <div class="breakout-item">
    <iframe src="https://example.com/embed"></iframe>
  </div>

  <p>More content...</p>
</div>

Force Maximum Width #

By default, breakout elements use width: fit-content with max-width: 125%, allowing them to size between 100% and 125% width based on their content. To force an element to always use the full 125% breakout width, use .breakout-item-max:

<div class="breakout">
  <p>Regular content...</p>

  <!-- This will always be 125% width, never smaller -->
  <img src="wide-image.jpg" class="breakout-item-max" alt="Wide image" />

  <p>More content...</p>
</div>

Note: .breakout-item-max uses width: 125% !important to override default sizing.

How It Works #

The .breakout container acts as a content wrapper that:

1. Sets a smart max-width: calc(10% + 65ch + 10%) to ensure an optimal reading line length (approx. 65 characters).
2. Applies padding-inline: 10% to create the necessary gutter space for breakout elements to extend into.

The breakout effect on elements is achieved by:

1. Setting width: fit-content with min-width: 100% and max-width: 125% (inline blocks like img, picture, figure, canvas, and audio use min-width: auto instead). Tables are handled specially to be full-bleed (max-width: 100vw) with internal horizontal padding (7.5%) and horizontal scroll support.
2. Using margin-left: 50% to position from the center of the container
3. Using transform: translateX(-50%) to shift it left by half its width

This combination allows elements to extend beyond their parent container (up to 125% width) while remaining visually centered.

The .breakout-headings utility works by:

1. Adding a ::before pseudo-element to headings (h2-h4) positioned to the left.
2. Using a 100vw width and negative translation on hr::before to create a full-width divider.

Markdown Support #

The breakout effect works on direct children of .breakout, or elements wrapped in <p> tags (for Markdown compatibility where images are often wrapped in paragraphs).

Responsive tables without wrapper #

&:is(table):not(.does-not-exist) {
  /* Let them full-bleed */
  width: max-content;
  min-width: auto;
  max-width: 100vw;
  padding-inline: 7.5%;

  /* Let them scroll */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */

  th,
  td {
    padding-inline-start: 0;
  }
}

Soft-increase selector specificity #

&:is(table):not(.does-not-exist) trick (inspired by postcss) is used here to increase specificity against selectors like &:is(table, .table)

Pure-CSS Float Label. Finally. #

Now hosted on CDNJS! • And shipped with Bootstrap Kit!

Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.

• No JS! Pure CSS!
• No hacks with required and :valid!
• ↳ HTML5 validation support!
• Compatible with <select> and <textarea> fields!
• No need to define for="..." attribute on <label>! ^v1.0.1+

Demo #

• No-dependencies demo
• Bootstrap 3 demo
• Bootstrap 4 demo

Usage #

Include float-label.min.css:

<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/float-label-css/v1.0.2/dist/float-label.min.css"/>

Use <label> with .has-float-label class as a wrapper for <input> ^v1.0.1+:

<label class="has-float-label">
  <input type="email" placeholder="email@example.com"/>
  <span>Email</span>
</label>

NOTE:

1. W3C allows this.
2. <span> should go after <input>.

Alternatively wrap <input> and <label> by .has-float-label:

<div class="has-float-label">
  <input id="email" type="email" placeholder="email@example.com"/>
  <label for="email">Email</label>
</div>

NOTE:

1. W3C allows this as well.
2. <label> should go after <input>.
3. for="..." attribute is required on <label>.

Quick use: Bootstrap #

Instead of float-label.min.css just include pre-built bootstrap-float-label.min.css:

<!-- Bootstrap v4 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.0/dist/bootstrap-float-label.min.css"/>

<!-- Bootstrap v3 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v3.0.0/dist/bootstrap-float-label.min.css"/>

Markup is the same. For more details see: /tonystar/bootstrap-float-label.

Credits #

• @mds for the original pattern
• @chriscoyier for the input:focus + label
• @thatemil for the :placeholder-shown

Browser support #

Any browser with :placeholder-shown CSS pseudo-class: /#feat=css-placeholder-shown.

All non-supporting browsers will fall back to the static layout (w/o animation).

=> Can be used in ANY browser as is!