Package Exports

micro-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (micro-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

micro-grid

Tiny, simple, zero-dependency flexbox grid for React. Outputs real CSS. 2.6kb gzipped.

Features/Goals

Configure widths, gutters, flex alignment, order, and offsets
Configure arbitrary breakpoints and values for all attributes
Outputs real CSS and media queries
Nestable
Relative units for breakpoints and whitespace

Usage

Grid with four items:

import { Flex, Box } from 'micro-grid'

<Flex>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
</Flex>

Grid with four items and a 1em gutter:

<Flex gutter={1}>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
</Flex>

Widths at different breakpoints:

<Flex gutter={1}>
  <Box width={[
    [1/2],
    [768, 1/4]
  ]}>
    50% wide, 25% wide above 768px
  </Box>
  <Box width={[
    1,
    [768, 1/2]
    [1280, 1/4] ]}>
    100% wide, 50% wide above 768px, 25% wide above 1280px
  </Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
</Flex>

Adjust the gutter at different breakpoints:

<Flex gutter={[
  1,
  [768, 2]
]}>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
  <Box width={1/4}>25% wide</Box>
</Flex>

Fixed width columns:

<Flex gutter={1}>
  <Box width={[
    1,
    [768, '200px']
  ]}>1000% wide, 200px wide above 768px</Box>
</Flex>

Flexible width columns, that fill their space:

<Flex gutter={1}>
  <Box width={[
    1,
    [768, '200px']
  ]}>1000% wide, 200px wide above 768px</Box>
  <Box width={[
    1,
    [768, 'auto']
  ]}>1000% wide, fills remainging space above 768px</Box>
</Flex>

Allow boxes to wrap:

<Flex gutter={1} wrap={true}>
  <Box width={[
    1,
    [768, 1/2]
  ]}>100% wide, 50% wide above 768</Box>
  <Box width={[
    1,
    [768, 1/2]
  ]}>100% wide, 50% wide above 768</Box>
</Flex>

Allow boxes to wrap at different breakpoints:

<Flex gutter={1} wrap={[
  [true],
  [768, false]
]}>
  <Box width={[
    1,
    [768, 1/2]
  ]}>100% wide, 50% wide above 768</Box>
  <Box width={[
    1,
    [768, 1/2]
  ]}>100% wide, 50% wide above 768</Box>
</Flex>

Notes

breakpoints are min-width by default, with no way to configure, currently

MIT License