BlueprintUI Layout

A lightweight layout library for building great responsive mobile first UIs that work everywhere.

<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>

To get started install via NPM.

npm install @blueprintui/layout

Import 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 is comprised of three primary layouts. Layouts can be controlled with gap spacing and container query breakpoints with grids.

<div bp-layout="block gap:sm">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>