layout-craft
Advanced tools
Comparing version
@@ -5,3 +5,3 @@ { | ||
"license": "MIT", | ||
"version": "0.1.1", | ||
"version": "1.0.0", | ||
"type": "module", | ||
@@ -8,0 +8,0 @@ "repository": { |
@@ -94,8 +94,25 @@ # Layout Craft: Opinionated CSS Utility Classes | ||
- **`content-1`, `content-2`, `content-3`, `content-4`:** | ||
- **`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%, 370px)`. | ||
- `content-2`: `min(100%, 620px)`. | ||
- `content-3`: `min(100%, 1230px)`. | ||
- `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; | ||
} | ||
} | ||
``` | ||
@@ -102,0 +119,0 @@ ## Example |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
9281
3.64%1
-50%129
15.18%