https://github.com/iagodahlem/flokit
:ship: Toolkit for easily and smoothly building UIs with React.
https://github.com/iagodahlem/flokit
component-library components designsystem react reactjs styled-components toolkit ui ui-components
Last synced: about 1 year ago
JSON representation
:ship: Toolkit for easily and smoothly building UIs with React.
- Host: GitHub
- URL: https://github.com/iagodahlem/flokit
- Owner: iagodahlem
- Created: 2018-11-21T21:42:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:49:48.000Z (over 3 years ago)
- Last Synced: 2025-01-20T09:47:31.139Z (over 1 year ago)
- Topics: component-library, components, designsystem, react, reactjs, styled-components, toolkit, ui, ui-components
- Language: JavaScript
- Homepage: https://flokit.iagodahlem.com/
- Size: 1.94 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Toolkit for easily and smoothly building UIs with React. As smooth as Floki build ships.
## Getting Started
### Install
With npm.
```sh
npm install --save flokit
```
Or with yarn.
```sh
yarn add flokit
```
### Usage
Import components directly from `flokit` to build and/or compose your UI or design system.
```js
import { Flex } from 'flokit'
I'm a flexbox
```
## Props
Flokit is built with [styled-system](https://styled-system.com) 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.
```js
// picks the value defined in `theme.colors['blue']`
// picks up a nested color value using dot notation
// `theme.colors['gray'][0]`
// raw CSS color value
// width `'2em'`
// sets margin `'auto'`
// sets margin `'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.
```js
// sets margin value of `theme.space[1]`
// sets a margin value of `16px` since it's greater than `theme.space.length`
```
* For percentange values as `width` and `height` you can use numbers between 0-1. Numbers greater than 1 are transformed into raw pixel values.
```js
// width `33.3%`
// width `50%`
// width `100%`
// width `256px`
```
### Arrays
You can use a shorthand array syntax to define responsive width, height, margin, padding, font-size and a lot of [other properties](https://styled-system.com/responsive-styles/).
```js
```
This will map your array of values into mobile-first media queries, giving you the following:
```css
.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.
```js
import { Box } from 'flokit'
I'm a box
```
#### Props
| Prop | CSS Property | Type | Theme |
| :--- | :--- | :--- | :--- |
| `position` | `position` | `string`\|`array` | none |
| `zIndex` | `z-index` | `string`\|`array` | `zIndices` |
| `top` | `top` | `string`\|`array` | none |
| `right` | `right` | `string`\|`array` | none |
| `bottom` | `bottom` | `string`\|`array` | none |
| `left` | `left` | `string`\|`array` | none |
| `display` | `display` | `string`\|`array` | none |
| `width` | `width` | `string`\|`number`\|`array` | `sizes` |
| `height` | `height` | `string`\|`number`\|`array` | `sizes` |
| `minWidth` | `min-width` | `string`\|`number`\|`array` | `sizes` |
| `maxWidth` | `max-width` | `string`\|`number`\|`array` | `sizes` |
| `minHeight` | `min-height` | `string`\|`number`\|`array` | `sizes` |
| `maxHeight` | `max-height` | `string`\|`number`\|`array` | `sizes` |
| `size` | `width` & `height` | `string`\|`number`\|`array` | `sizes` |
| `verticalAlign` | `vertical-align` | `string`\|`array` | none |
| `overflow` | `overflow` | `string`\|`array` | none |
| `m`\|`margin` | `margin` | `string`\|`number`\|`array` | `space` |
| `mt`\|`marginTop` | `margin-top` | `string`\|`number`\|`array` | `space` |
| `mr`\|`marginRight` | `margin-right` | `string`\|`number`\|`array` | `space` |
| `mb`\|`marginBottom` | `margin-bottom` | `string`\|`number`\|`array` | `space` |
| `ml`\|`marginLeft` | `margin-left` | `string`\|`number`\|`array` | `space` |
| `mx`\|`marginX` | `margin-left` & `margin-right` | `string`\|`number`\|`array` | `space` |
| `my`\|`marginY` | `margin-top` & `margin-bottom` | `string`\|`number`\|`array` | `space` |
| `p`\|`padding` | `padding` | `string`\|`number`\|`array` | `space` |
| `pt`\|`paddingTop` | `padding-top` | `string`\|`number`\|`array` | `space` |
| `pr`\|`paddingRight` | `padding-right` | `string`\|`number`\|`array` | `space` |
| `pb`\|`paddingBottom` | `padding-bottom` | `string`\|`number`\|`array` | `space` |
| `pl`\|`paddingLeft` | `padding-left` | `string`\|`number`\|`array` | `space` |
| `px` | `padding-left` & `padding-right` | `string`\|`number`\|`array` | `space` |
| `py` | `padding-top` & `padding-bottom` | `string`\|`number`\|`array` | `space` |
| `background` | `background` | `string`\|`array` | none |
| `backgroundImage` | `background-image` | `string`\|`array` | none |
| `backgroundSize` | `background-size` | `string`\|`array` | none |
| `backgroundPosition` | `background-position` | `string`\|`array` | none |
| `backgroundRepeat` | `background-repeat` | `string`\|`array` | none |
| `border` | `border` | `string`\|`array` | `borders` |
| `borderWidth` | `border-width` | `string`\|`array` | `borderWidths` |
| `borderStyle` | `border-style` | `string`\|`array` | `borderStyles` |
| `borderColor` | `border-color` | `string`\|`array` | `colors` |
| `borderRadius` | `border-radius` | `string`\|`number`\|`array` | `radii` |
| `borderTop` | `border-top` | `string`\|`array` | `borders` |
| `borderRight` | `border-right` | `string`\|`array` | `borders` |
| `borderBottom` | `border-bottom` | `string`\|`array` | `borders` |
| `borderLeft` | `border-left` | `string`\|`array` | `borders` |
| `textShadow` | `text-shadow` | `string`\|`array` | `shadows` |
| `boxShadow` | `box-shadow` | `string`\|`array` | `shadows` |
| `color` | `color` | `string`\|`array` | `colors` |
| `bg`\|`backgroundColor` | `background-color` | `string`\|`array` | `colors` |
| `opacity` | `opacity` | `string`\|`array` | none |
| `flex` | `flex` | `string`\|`array` | none |
| `flex-grow` | `flex-grow` | `string`\|`array` | none |
| `flex-shrink` | `flex-shrink` | `string`\|`array` | none |
| `flex-basis` | `flex-basis` | `string`\|`array` | none |
| `justifySelf` | `justify-self` | `string`\|`array` | none |
| `alignSelf` | `align-self` | `string`\|`array` | none |
| `order` | `order` | `string`\|`array` | none |
### Flex
Primitive flexbox component. Extends `Box`.
```js
import { Flex } from 'flokit'
I'm a flexbox
```
#### Props
| Prop | CSS Property | Type | Theme |
| :--- | :--- | :--- | :--- |
| `alignItems` | `align-items` | `string`\|`array` | none |
| `alignContent` | `align-content` | `string`\|`array` | none |
| `justifyItems` | `justify-items` | `string`\|`array` | none |
| `justifyContent` | `justify-content` | `string`\|`array` | none |
| `flexWrap` | `flex-wrap` | `string`\|`array` | none |
| `flexDirection` | `flex-direction` | `string`\|`array` | none |
### Text
Primitive text component. Extends `Box`.
```js
import { Text } from 'flokit'
I'm a text
```
#### Props
| Prop | CSS Property | Type | Theme |
| :--- | :--- | :--- | :--- |
| `fontFamily` | `font-family` | `string`\|`number`\|`array` | `fonts` |
| `fontSize` | `font-size` | `string`\|`number`\|`array` | `fontSizes` |
| `fontWeight` | `font-weight` | `string`\|`number`\|`array` | `fontWeights` |
| `lineHeight` | `line-height` | `string`\|`number`\|`array` | `lineHeights` |
| `letterSpacing` | `letter-spacing` | `string`\|`number`\|`array` | `letterSpacings` |
| `fontStyle` | `font-style` | `string`\|`number`\|`array` | none |
| `textAlign` | `text-align` | `string`\|`number`\|`array` | none |
| `textTransform` | `text-transform` | `string`\|`number`\|`array` | none |
### Heading
Primitive text component for headings. Extends `Text`.
```js
import { Heading } from 'flokit'
I'm a 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](http://iagodahlem.mit-license.org/) © Iago Dahlem