Layout Craft: Opinionated CSS Utility Classes

Layout Craft is a collection of opinionated CSS utility classes designed to accelerate the declaration of your initial layout state. These utilities provide a quick start for your projects, allowing you to achieve a solid foundation with minimal effort.

Installation

NPM

Install Layout Craft using NPM:

npm i layout-craft

Import into Your Project

Add the following import statement to your global stylesheet:

@import 'layout-craft/utilities.css';

CDN

Alternatively, you can use the CDN to include Layout Craft directly in your project:

@import 'https://www.unpkg.com/[email protected]/dist/utilities.css';

Key Features

• Efficiency with Utilities:

  • Get Things Done Quickly:
    • Layout Craft empowers you to accomplish a significant portion of your layout design swiftly with its utility classes.

• Markup-Friendly Approach:

  • Support in the Markup:
    • Layout Craft ensures that utilities seamlessly integrate into your markup, providing support without dominating your HTML structure.

• Where() for a Hassle-Free Experience:

  • Wrapped in :where():
    • Utilities are neatly wrapped in the :where() selector, eliminating the need for unnecessary battles. They simply support your layout goals.

Quick Reference

Grid Layouts

• block:

  • Displays elements as a grid container.

• Alignment:

  • block-start-start, block-start-center, block-start-end, ...
    • Aligns and justifies items within the block-level grid container.

Inline Layouts

• inline:

  • Displays elements as an inline-level grid container with column auto-flow.

• Alignment:

  • inline-start-start, inline-start-center, inline-start-end, ...
    • Aligns and justifies items within the inline-level grid container.

Flexbox

• inline-wrap:
  • Displays elements as a flex container with wrapping.

Spacing

• space-between:

  • Applies justify-content: space-between to create consistent space between items.

• space-between-block:

  • Applies align-content: space-between for space control in block containers.

  Note: Layout Craft exclusively supports justify-content: space-between and align-content: space-between for controlling space. Other values such as start, end, and center are intentionally excluded to maintain consistency.

Gap Sizes

• gap-1, gap-2, gap-3, gap-4:
  • Sets different gap sizes (0.5rem, 1rem, 1.5rem, 2rem) between grid or flex items.

Responsive Content Sizing

• content-1, content-2, content-3, content-4, content-full:
  • Sets responsive inline sizes using min(100%, ...). Adjusts to different viewport sizes.
    • content-1: min(100%, 366px).
    • content-2: min(100%, 692px).
    • content-3: min(100%, 980px).
    • content-4: min(100%, 1600px).
    • content-full: 100%.
• Container:
  • container: Sets responsive inline size with breakpoints.

    :where(.container) {
      --_container: 366px;
      inline-size: min(100%, var(--_container));
      /* --lg-only */
      @media (768px <= width <= 1024px) {
        --_container: 692px;
      }
      /* --lg-n-above */
      @media (width >= 1024px) {
        --_container: 980px;
      }
    }

Example

Explore how these utilities work and how to override them in this demo.

Feedback and Contributions

Your feedback and contributions are highly valued.

Happy crafting!

Arby