Ninja Programmers Mindmeld

    system-classnames

    1.1.0 • Public • Published

    system-classnames

    Styled system props for utility-based functional CSS libraries

    npm i system-classnames
    // example for use with Primer and React
    import createMapper from 'system-classnames'
     
    const map = createMapper({
      breakpoints: [ null, 'sm', 'md', 'lg', 'xl' ],
      props: [
        'm', 'mt', 'mr', 'mb', 'ml', 'mx', 'my',
        'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py',
        'text', 'bg'
      ],
      getter: ({ breakpoint, prop, value }) => breakpoint
        ? [ prop, breakpoint, value ].join('-')
        : [ prop, value ].join('-')
    })
     
    const Box = props =>
      <div {...map(props)} />
    // using the Box component
    <Box
      p={[ 2, 3 ]}
      mb={3}
      text='white'
      bg='blue'
    />

    Library-specific modules

    Mapper modules for Basscss, Tachyons, and Primer are available to use out-of-the box.

    import map from 'system-classnames/basscss'
     
    const Box = props =>
      <div {...map(props)} />
    import map from 'system-classnames/tachyons'
    import map from 'system-classnames/primer'
    import map from 'system-classnames/bootstrap'

    Related


    MIT License

    Keywords

    none

    Install

    npm i system-classnames

    DownloadsWeekly Downloads

    4

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • jxnblk