**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 effor
npm install layout-craftbash
npm i layout-craft
`
$3
Add the following import statement to your global stylesheet:
`css
@import 'layout-craft/utilities.css';
`
$3
Alternatively, you can use the CDN to include Layout Craft directly in your project:
`css
@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
$3
- 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.
$3
- 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.
$3
- inline-wrap:
- Displays elements as a flex container with wrapping.
$3
- 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._
$3
- gap-1, gap-2, gap-3, gap-4:
- Sets different gap sizes (0.5rem, 1rem, 1.5rem, 2rem) between grid or flex items.
$3
- 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.
`css
: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;
}
}
``