Nested Public Modules

    @stnew/layout
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    @stnew/layout

    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.

    Setup

    styled-components v5.1 and styled-system v5.1 are required dependencies.

    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 <Box> components as it adds bloat.

    *,
    *::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.

    import React from 'react'
    import { ThemeProvider } from 'styled-components'
    
    const theme = {
      grid: {
        columns: 12,
        columnGap: '1rem',
        maxWidth: '64rem',
        margins: '1rem',
      },
      //...rest
    }
    
    function App() {
      return (
        <ThemeProvider theme={theme}>
          {/* Your App Here */}
        </ThemeProvider>
      )
    }

    theme.grid Spec

    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
    columnGap CSS unit (string or string[]) Yes space between grid columns
    maxWidth CSS unit (string or string[]) Yes Max width of <Container>
    margins CSS unit (string or string[]) Yes PaddingX applied to <Container>

    Box

    Basic layout building block. Includes background, border, color, flexbox, grid, layout, position, space, and typography props from styled-system. All <Box> components render a div by default and have no styling applied.

    import { Box } from '@stnew/layout'
    
    const ComponentA = () => (
      <Box>Hello world!</Box>
    )
    
    const ComponentB = ({ size = '50px' }) => (
      <Box
        as="section"
        background="blue"
        borderRadius="50%"
        width={size}
        height={size}
      >
        ¡Hola mundo!
      </Box>
    )

    Container

    Extension of <Box> with max-width and padding applied. These are set via the theme.grid props. This is used as a page or section wrapper.

    import { Container, Box } from '@stnew/layout'
    
    const Component = () => (
      <Container>
        <Box>Hello world!<Box>
      </Container>
    )

    Grid

    Extension of <Box> with display: grid.

    <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.

    import { Grid, Box } from '@stnew/layout'
    
    const Component = () => (
      <Grid>
        <Box gridColumn="span 6">Hello world!</Grid.Item>
        <Box gridColumn="span 6">Hello world!</Grid.Item>
        <Box gridColumn="2 / 12" gridRow="2" >Hello world!</Grid.Item>
      </Grid>
    )

    Flex

    Extension of <Box> with display: flex.

    import { Flex, Box } from '@stnew/layout'
    
    const ComponentA = () => (
      <Flex height="100vh" justifyContent="center" alignItems="center">
        <Box>Hello world!</Box>
      </Flex>
    )
    
    const ComponentB = () => (
      <Flex flexDirection={['column', 'row']}>
        <Box>Hello world!</Box>
        <Box flex="1">⁄¡Hola mundo!</Box>
      </Flex>
    )

    Row

    Extension of <Flex> with negative margins. Intended to wrap <Col> 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.

    Col

    Extension of <Box>. Child of <Row>, with built in padding and bootstrap-esque flexbox grid props. The number of columns you can span correspond to the theme.grid.columns property. Spacing between columns is controlled via theme.grid.columnGap.

    Props Type Desc
    span number or number[] Spans n number of columns
    offset number or number[] Offset column by n number of columns
    push number or number[] Move column left n number of columns*
    pull number or number[] Move column right n number of columns*
    order number or number[] Specify order of columns

    * Every <Col> is position: relative, to enable the push and pull props.

    import { Flex } from '@stnew/layout'
    
    const ComponentA = () => (
      <Container>
        <Row>
          <Col span={[6, 4]}>Hello world!</Col>
          <Col span={[6, 4]}>Hello world!</Col>
          <Col span={[12, 2]} offset={[0, 2]}>Hello world!</Col>
        </Row>
      </Container>
    )
    
    const ComponentB = () => (
      <Container>
        <Row>
          <Col span={6}>Hello world!</Col>
          <Col span={6}>
            <Row>
              <Col>Nested columns</Col>
              <Col>Nested columns</Col>
            </Row>
          </Col>
        </Row>
      </Container>
    )

    Keywords

    none

    Install

    npm i @stnew/layout

    DownloadsWeekly Downloads

    27

    Version

    3.0.0

    License

    ISC

    Unpacked Size

    39.9 kB

    Total Files

    39

    Last publish

    Collaborators

    • artofrawr
    • ryanhefner
    • cabe
    • returningsam