@blueprintui/layout
Advanced tools
Comparing version 1.10.5 to 1.10.6
{ | ||
"name": "@blueprintui/layout", | ||
"version": "1.10.5", | ||
"version": "1.10.6", | ||
"main": "index.css", | ||
@@ -5,0 +5,0 @@ "type": "module", |
@@ -5,6 +5,15 @@ # BlueprintUI Layout | ||
### [Documentation](https://layout.blueprintui.dev/) | ||
### [Documentation](https://blueprintui.dev/docs/layout) | ||
Blueprint Layout is a lightweight CSS library for building responsive UIs that work everywhere. Declaratively create layouts that automatically respond to their container size for true encapsulated component layout. | ||
Blueprint Layout offers a streamlined CSS library, specifically designed to effortlessly construct responsive UI. Utilize its declarative approach to create adaptive layouts that dynamically respond to varying container sizes, providing truly encapsulated component arrangements. | ||
## Key Features: | ||
- Intuitive, declarative layout design | ||
- Versatile grid, block, and inline layout options | ||
- Responsive container queries for adaptive components | ||
- Ultra-lightweight at just ~3kb of CSS | ||
### Grid | ||
```html | ||
@@ -20,8 +29,28 @@ <!-- responsive 12 column grid using container queries --> | ||
 | ||
### Block | ||
```html | ||
<div bp-layout="block gap:sm"> | ||
<div>1</div> | ||
<div>2</div> | ||
<div>3</div> | ||
<div>4</div> | ||
</div> | ||
``` | ||
### Inline | ||
```html | ||
<div bp-layout="inline gap:sm"> | ||
<div>1</div> | ||
<div>2</div> | ||
<div>3</div> | ||
<div>4</div> | ||
</div> | ||
``` | ||
### Versions | ||
v4 (latest) https://layout.blueprintui.dev | ||
Latest https://blueprintui.dev/docs/layout | ||
v3 https://blueprintcss.dev | ||
Legacy v3 https://blueprintcss.dev |
149619
54