Axs

A build-your-own responsive typography and layout UI toolkit for React

npm i axs

Axs is a React UI component library that serves as a foundation for highly customized UI as well as a utility belt for prototyping.

Usage

<Box
  bgFuschia
  mb2
  p2
  white
>
  <Text
    fontSize={2}
    is="h2"
  >
    Box
  </Text>
</Box>

Box

Responsive Typography and Layout

Axs is an abstraction of the most common responsive typographic and layout styling concerns in the form of two UI component primitives.

From Prototype to UI Library

Axs is intended as a way to quickly prototype new UI, handle one-off styles, and serve as a foundation for creating your own custom UI component libraries.

UI Component Primitives

Use the Box component as a starting point for any visual containers or grid systems in your app. Use the Text component for headings, labels, messages, or any other UI typography.

The Power of CSS in JavaScript

Each Axs component handles CSS-in-JS with the css prop, with support for media queries and pseudoclasses, to allow for any fine-tuned styling needs.

Examples

Some of the examples below use components from the optional axs-ui package.

Grid

Box
Box
Box
Box
<Flex flexWrap="wrap">
  <Box
    bgGray1
    p2
    width={[
      1,
      0.5,
      0.25
    ]}
  >
    Box
  </Box>
  <Box
    bgGray3
    p2
    width={[
      1,
      0.5,
      0.25
    ]}
  >
    Box
  </Box>
  <Box
    bgGray1
    p2
    width={[
      1,
      0.5,
      0.25
    ]}
  >
    Box
  </Box>
  <Box
    bgGray3
    p2
    width={[
      1,
      0.5,
      0.25
    ]}
  >
    Box
  </Box>
</Flex>

Button

<Text
  bgBlue
  bold
  css={{
    ':hover': {
      boxShadow: 'inset 0 0 0 64px rgba(0, 0, 0, .125)'
    },
    WebkitAppearance: 'none',
    appearance: 'none',
    border: '1px solid transparent',
    borderRadius: 3,
    fontFamily: 'inherit',
    fontSize: 'inherit'
  }}
  is="button"
  p1
  white
>
  Button
</Text>

Red Button

<Button
  bgRed
  caps
  fontSize={6}
>
  Red Button
</Button>

Form

<Box>
  <Text
    display="block"
    fontSize={6}
    gray8
    is="label"
  >
    Email
  </Text>
  <Box
    border
    borderGray4
    css={{
      ':focus': {
        outline: 'none'
      },
      backgroundColor: 'transparent',
      color: 'inherit',
      fontFamily: 'inherit',
      fontSize: 'inherit'
    }}
    display="block"
    is="input"
    name="email"
    p1
    rounded
    type="text"
    width={1}
  />
</Box>

Box

Box
<Box
  bgFuschia
  mb2
  p3
  rounded
  white
>
  Box
</Box>

Responsive Box

Responsive Box
<Box
  bgFuschia
  m={[
    0,
    1,
    2,
    3
  ]}
  p={[
    2,
    null,
    3
  ]}
  white
>
  Responsive Box
</Box>

Reponsive Heading

Responsive Heading

<Heading
  fontSize={[
    3,
    2,
    1,
    0
  ]}
>
  Responsive Heading
</Heading>

Media Object

Media Object

Vertically aligned

<Flex alignItems="center">
  <Box mr2>
    <img src="http://placehold.it/128/cc5de8/fff" />
  </Box>
  <Box flexAuto>
    <Text bold>
      Media Object
    </Text>
    <Text>
      Vertically aligned
    </Text>
  </Box>
</Flex>

Bar Chart

25%

75%

<Box white>
  <Box
    bgFuschia
    mb1
    py1
    width={0.25}
  >
    <Text
      bold
      mx2
    >
      25%
    </Text>
  </Box>
  <Box
    bgFuschia8
    py1
    width={0.75}
  >
    <Text
      bold
      mx2
    >
      75%
    </Text>
  </Box>
</Box>

Percentage Bar

37.5%

25%

25%

12.5%

<Flex white>
  <Box
    bgFuschia8
    py1
    width={0.375}
  >
    <Text
      bold
      center
      fontSize={6}
    >
      37.5%
    </Text>
  </Box>
  <Box
    bgFuschia6
    py1
    width={0.25}
  >
    <Text
      bold
      center
      fontSize={6}
    >
      25%
    </Text>
  </Box>
  <Box
    bgFuschia4
    py1
    width={0.25}
  >
    <Text
      bold
      center
      fontSize={6}
    >
      25%
    </Text>
  </Box>
  <Box
    bgFuschia2
    py1
    width={0.125}
  >
    <Text
      bold
      center
      fontSize={6}
    >
      12.5%
    </Text>
  </Box>
</Flex>

Panel

Panel

A panel is great for drawing attention and grouping related content together.

Panel footer

<Box
  border
  borderFuschia
  rounded
>
  <Box
    bgFuschia
    p2
    white
  >
    <Text bold>
      Panel
    </Text>
  </Box>
  <Box p2>
    <Text>
      A panel is great for drawing attention and grouping related content together.
    </Text>
  </Box>
  <Box
    border="top"
    borderFuschia
    fuschia
    p2
  >
    <Text fontSize={6}>
      Panel footer
    </Text>
  </Box>
</Box>

Card

Card

Card

<Box
  border
  borderGray3
  rounded
  width={[
    1,
    0.5,
    0.3333333333333333
  ]}
>
  <Box
    css={{
      display: 'block',
      height: 'auto',
      maxWidth: '100%'
    }}
    height={512}
    is="img"
    src="http://placehold.it/512/cc5de8/fff"
    width={512}
  />
  <Box
    px2
    py1
  >
    <Text
      bold
      fontSize={3}
    >
      Card
    </Text>
    <Text>
      Card
    </Text>
  </Box>
</Box>

Blockquote

“In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years ... ”

—Robert Bringhurst
<Box
  fuschia
  is="blockquote"
  m0
  px2
>
  <Text
    bold
    fontSize={[
      4,
      null,
      2
    ]}
  >
    “In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years ... ”
  </Text>
  <Text
    fontSize={5}
    is="cite"
  >
    —Robert Bringhurst
  </Text>
</Box>

Responsive Embed

<Box
  css={{
    height: 0,
    overflow: 'hidden',
    padding: 0,
    paddingBottom: '56.25%',
    position: 'relative'
  }}
>
  <Box
    css={{
      border: 0,
      bottom: 0,
      height: '100%',
      left: 0,
      position: 'absolute',
      top: 0,
      width: '100%'
    }}
    is="iframe"
    src="https://www.youtube.com/embed/BoEKWtgJQAU"
  />
</Box>

Read the docs and get started

View on GitHub