Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

BlueprintUI Layout

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

  • Easy to use declarative layouts
  • Grid, block, and inline layouts
  • Responsive container queries
  • Only ~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/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">

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
Next: Block Layout