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/layout-craft@1.0.1/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

mobalti/layout-craft