Extensive flexbox/CSS grid layout system
Layout system built with [styled-components] and [styled-system] for React. Features basic box-model components, flexbox components (including a bootstrap-style grid implementation), and CSS grid components.
styled-components v5.1 and styled-system v5.1 are required dependencies.
``sh`
npm install styled-components styled-system
npm install @stnew/layout
It's _highly_ recommended to apply box-sizing: border-box globally to all elements, or at the very least the element wrapping any of the layout components. As of version 1.4.0, this is no longer applied to all [] components as it adds bloat.
`css`
*,
*::before,
*::after {
box-sizing: border-box;
}
You will need to wrap your application in [styled-components] ThemeProvider and pass a theme object with a grid property. For more documentation about how theming works, check out the styled-components documentation.
`javascript
import React from 'react'
import { ThemeProvider } from 'styled-components'
const theme = {
grid: {
columns: 12,
columnGap: '1rem',
maxWidth: '64rem',
margins: '1rem',
},
//...rest
}
function App() {
return (
{/ Your App Here /}
)
}
`
The following properties are required on theme.grid. Responsive props can be an array, and will correspond with [styled-system]'s theme.breakpoints. Learn more about responsive styles.
| Props | Type | Responsive? | Desc |
| --------- | --------------------------------- | ----------- | ----------------------------------- |
| columns | number | No | Number of grid columns |string
| columnGap | CSS unit ( or string[]) | Yes | space between grid columns |string
| maxWidth | CSS unit ( or string[]) | Yes | Max width of [] |string
| margins | CSS unit ( or string[]) | Yes | PaddingX applied to [] |
Basic layout building block. Includes background, border, color, flexbox, grid, layout, position, space, and typography props from [styled-system]. All components render a div by default and have no styling applied.
`javascript
import { Box } from '@stnew/layout'
const ComponentA = () => (
)
const ComponentB = ({ size = '50px' }) => (
background="blue"
borderRadius="50%"
width={size}
height={size}
>
¡Hola mundo!
)
`
Extension of [] with max-width and padding applied. These are set via the theme.grid props. This is used as a page or section wrapper.
`javascript
import { Container, Box } from '@stnew/layout'
const Component = () => (
)
`
Extension of [] with display: grid.
has grid-template-columns and grid-column-gap applied, corresponding the theme.grid props columns and columnGap, respectively. grid-template-columns defaults to repeat(n, 1fr) to fill available space, but this can be overridden using [styled-system]'s grid props.
`javascript
import { Grid, Box } from '@stnew/layout'
const Component = () => (
)
`
Extension of [] with display: flex.
`javascript
import { Flex, Box } from '@stnew/layout'
const ComponentA = () => (
)
const ComponentB = () => (
)
`
Extension of [] with negative margins. Intended to wrap [] components for bootstrap-style flexbox grid. Margins are tied to the theme.grid.columnGap property. flex-direction: row and flex-wrap: wrap are enabled by default.
Extension of []. Child of [], with built in padding and bootstrap-esque flexbox grid props.theme.grid.columns
The number of columns you can span correspond to the property. Spacing between columns is controlled via theme.grid.columnGap.
| Props | Type | Desc |
| ------ | ---------------------- | ---------------------------------------- |
| span | number or number[] | Spans n number of columns |number
| offset | or number[] | Offset column by n number of columns |number
| push | or number[] | Move column left n number of columns* |number
| pull | or number[] | Move column right n number of columns* |number
| order | or number[] | Specify order of columns |
_* Every
is position: relative, to enable the push and pull props._`javascript
import { Flex } from '@stnew/layout'const ComponentA = () => (
|
)
const ComponentB = () => (
|
|
)
`[
]: #box
[]: #container
[]: #grid
[]: #flex
[]: #row
[