logologo
Faceless UI
Docs

#Grid API

#<GridProvider>

This component provides the grid context to your app. It does not have any required props and renders nothing in the DOM. This is where the global settings are defined.

import react from 'react';
import { GridProvider } from '@faceless-ui/css-grid;

export const MyApp = () = (
  <GridProvider
    breakpoints={{
      s: 768,
      m: 1279,
      l: 1679
    }}
    rowGap={{
      s: '1rem',
      m: '1rem',
      l: '4rem',
      xl: '4rem',
    }}
    colGap={{
      s: '10px',
      m: '10px',
      l: '4rem',
      xl: '4rem',
    }}
    cols={{
      s: 8,
      m: 8,
      l: 14,
      xl: 16,
    }}
  >
    ...
  </GridProvider>
);

#<GridProvider> Props

breakpoints
  :  object
  |  optional

An object of breakpoints l, m, and s, equal to the width of the breakpoint in pixels. These breakpoints are used by the <Cell> components to make them responsive. These are also used to make the column and row gaps responsive.

rowGap
  :  string
  |  optional

An object of row-gap values, one for each breakpoint. See the MDN Docs for exact browser specifications.

colGap
  :  string
  |  optional

An object of column-gap values, one for each breakpoint. See the MDN Docs for exact browser specifications.

cols
  :  number
  |  optional

The number of columns available at each breakpoint. Once a row reaches maximum capacity, cells will begin to wrap onto the next row.

classPrefix
  :  string
  |  optional

Prepends onto onto every generated class name, useful for unique name-spacing within complex stylesheets.

#<GridProvider> Context

smallestBreakpointReached
  :  string
  |  optional

The key of the smallest breakpoint reached. See breakpoints.

...settings

All settings are spread into the context.

#<Grid>

This component wraps cells and has no required props. It creates a DOM element with the grid-template-columns CSS property — a dynamic value set based on the [grid settings](#grid settings) and the number of columns currently available. You can also nest grids inside other grids.

import react from 'react';
import { Grid, Cell } from '@faceless-ui/css-grid;

export const MyComponent = () = (
  <Grid>
    <Cell>
      ...
    </Cell>
  </Grid>
);

#<Grid> Props

htmlElement
  :  string
  |  optional

Customize the HTML element that is rendered in the DOM. Defaults to div.

...rest
  :  object
  |  optional

All other props are spread onto the DOM element as HTML attributes.

#<Grid> Context

cols
  :  object

The number of currently available columns, per breakpoint.

#<Cell>

This component will create a DOM element that spans the columns of your grid based on the cols prop, which dynamically sets the grid-column-end CSS property. Cells will display inline to one another and wrap to the next row once that row reaches maximum capacity. To make the cell responsive, redefine the number of columns it spans on each breakpoint, such as colsM.

import react from 'react';
import { Grid, Cell } from '@faceless-ui/css-grid;

export const MyApp = () = (
  <Grid>
    <Cell
      cols={12}
      colsM={6}
    >
      ...
    </Cell>
  </Grid>
);

#<Cell> Props

cols
  :  number
  |  optional

The number of columns for the cell to span.

colsM
  :  number
  |  optional

The number of columns for the cell to span at your m breakpoint.

colsL
  :  number
  |  optional

The number of columns for the cell to span at your l breakpoint.

htmlElement
  :  string
  |  optional

Customize the HTML element that is rendered in the DOM. Defaults to div.

...rest
  :  object
  |  optional

All other props are spread onto the DOM element as HTML attributes.

#<Cell> Context

cols
  :  object

The number of currently available columns, per breakpoint.

#useCell

This is a hook you can use to access the context of any <Cell> component.

import react from 'react';
import { useCell } from '@faceless-ui/css-grid;

export const MyComponent = () => {
  const cell = useCell();
  return (
    ...
  )
};

#useGrid

This is a hook you can use to access the context of any <Grid> component.

import react from 'react';
import { useGrid } from '@faceless-ui/css-grid;

export const MyComponent = () => {
  const grid = useGrid();
  return (
    ...
  )
};

#useSettings

This is a hook you can use to access the global grid settings.

import react from 'react';
import { useSettings } from '@faceless-ui/css-grid;

export const MyComponent = () => {
  const settings = useSettings();
  return (
    ...
  )
};

#TypeScript

All types can be directly imported.

import {
  IGrid,
  GridProps,
  ICell,
  CellProps,
  SettingsProviderProps,
  Settings,
  Breakpoints,
  Gaps,
  Columns
} from '@faceless-ui/css-grid/dist/types';
© 2022 — Faceless UI