CSS Tricks

• /anydigital/bricks 🆕
• /anydigital/breakout-css 🆕
• /anydigital/float-label-css
• buildexcellentwebsit.es

CSS Bricks #

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.

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

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!