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">Blueprint layouts use the latest CSS Container Queries and CSS Selector nesting. For browsers that do not support nesting use the index.compat.css stylesheet instead.
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