flokit v1.0.0-alpha.1

Getting Started

Install

With npm.

npm install --save flokit

Or with yarn.

yarn add flokit

Usage

Import components directly from flokit to build and/or compose your UI or design system.

import { Flex } from 'flokit'

<Flex
  width={1}
  height={1}
  alignItems='center'
  justifyContent='center'
>
  I'm a flexbox
</Flex>

Props

Flokit is built with styled-system for theamable and responsive style props. So go check their docs if you are not familiar with it yet.

Strings

Strings values are parsed to raw CSS values, you can use it to set non numerical property values, or to use custom units for numerical values, as rem or em. You can also use strings for setting values defined in the theme object, as for color values.

// picks the value defined in `theme.colors['blue']`
<Box color='blue' />

// picks up a nested color value using dot notation
// `theme.colors['gray'][0]`
<Box color='gray.0' />

// raw CSS color value
<Box color='#f00' />

// width `'2em'`
<Box width='2em' />

// sets margin `'auto'`
<Box m='auto' />

// sets margin `'16rem'`
<Box m='16rem' />

Numbers

You can use numbers as props in several ways to define property values.

• For scale props as const spaces = [0, 4, 8, 16, 32] for defining margin and padding, you can use numbers from 0 to the length of the scale.

// sets margin value of `theme.space[1]`
<Box m={1} />

// sets a margin value of `16px` since it's greater than `theme.space.length`
<Box m={16} />

• For percentange values as width and height you can use numbers between 0-1. Numbers greater than 1 are transformed into raw pixel values.

// width `33.3%`
<Box width={1/3} />

// width `50%`
<Box width={1/2} />

// width `100%`
<Box width={1} />

// width `256px`
<Box width={256} />

Arrays

You can use a shorthand array syntax to define responsive width, height, margin, padding, font-size and a lot of other properties.

<Box width={[1, 1/2, 1/4]} />

This will map your array of values into mobile-first media queries, giving you the following:

.Box {
  width: 100%;
}

@media screen and (min-width: 40em) {
  .Box {
    width: 50%;
  }
}

@media screen and (min-width: 52em) {
  .Box {
    width: 25%;
  }
}

Components

Box

Primitive box-model component. Used as the base for all other components.

import { Box } from 'flokit'

<Box>
  I'm a box
</Box>

Props

Flex

Primitive flexbox component. Extends Box.

import { Flex } from 'flokit'

<Flex alignItems='center'>
  I'm a flexbox
</Flex>

Props

Text

Primitive text component. Extends Box.

import { Text } from 'flokit'

<Text alignItems='center'>
  I'm a text
</Text>

Props

Heading

Primitive text component for headings. Extends Text.

import { Heading } from 'flokit'

<Heading alignItems='center'>
  I'm a heading
</Heading>

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT License © Iago Dahlem