Grid

Powerful fluid style layout container.

The Grid component uses dynamic CSS media query to implement responsive layout, It has ultra-high performance and very small size. Of course, it still supports dynamic props and custom breakpoints.

General

Dynamically scale container width while maintaining spacing.

Fluid Layout

Containers for wrapping and scaling.

Responsive Layout

Use different layouts for different screen widths.

Hide Elements

Hide elements when unit size is 0.

Auto Width

Auto fill remaining width.

Custom Breakpoints

Override the default breakpoints of the @bolio-ui/core.

const breakpoints: BolioUIThemesBreakpoints = {
  xs: { min: '0', max: '650px' },
  sm: { min: '650px', max: '900px' },
  md: { min: '900px', max: '1280px' },
  lg: { min: '1280px', max: '1920px' },
  xl: { min: '1920px', max: '10000px' }
}

const App = () => {
  const myTheme = Themes.createFromLight({
    type: 'myTheme',
    breakpoints
  })
  return (
    <BolioProvider themes={[myTheme]} themeType="myTheme">
      <CssBaseline />
      <AppComponent />
    </BolioProvider>
  )
}

APIs

type Justify =
  | 'flex-start'
  | 'center'
  | 'flex-end'
  | 'space-between'
  | 'space-around'
  | 'space-evenly'

type AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'

type AlignContent =
  | 'stretch'
  | 'center'
  | 'flex-start'
  | 'flex-end'
  | 'space-between'
  | 'space-around'

type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse'

type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse'