A lightweight layout library for building great responsive mobile first UIs that work everywhere.
- Intuitive, declarative layout design
- Versatile grid, block, and inline layout options
- Responsive container queries for adaptive components
- Ultra-lightweight at just ~3kb of CSS
<div bp-layout="grid gap:sm cols:12 cols:6@sm cols:3@md">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>1
2
3
4
Installation
To get started install via NPM.
npm install @blueprintui/layoutImport the library into your CSS.
@import '@blueprintui/layout/index.min.css';Alternatively copy and paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="https://unpkg.com/@blueprintui/layout@latest/index.min.css">Layouts
Blueprint is comprised of three primary layouts. Layouts can be controlled with gap spacing and container query breakpoints with grids.
block(vertical)inline(horizontal)grid
<div bp-layout="block gap:sm">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>Block
1
2
3
4
Inline
1
2
3
4
Grid
1
2
3
4