EvoKit - Box

The content block allows to apply indents, position and more. Contains one element <Box>

Install

Peer dependencies evokit. More about install

npm install evokit-box --save

Usage

More about usage

import React from 'react';
import { Box } from 'evokit-box';
import 'evokit-box/style.css';

const App = () => (
    <Box box-margin='xs xl'>
        ...
    </Box>
);

Props

Also supports other valid props of the React Element. More about use props

<Box />

| Prop name | Default value | Possible value | Description | |------------------------|---------------|----------------|-------------| | box-align | none | none left center right | Horizontal alignment | | box-background | null | Create theme | Background color | | box-border * | null | Create theme | Border color, width and style | | box-border-color * | null | Create theme | Border color | | box-border-width * | none | none xxs xs s m l xl xxl 3xl 4xl 5xl | Border width | | box-border-style * | solid | solid dotted dashed | Border style | | box-display | block | block inline-block inline none none:empty | Display type | | box-height | auto | auto 1-1 | Set the height | | box-margin * | none | none xxs xs s m l xl xxl 3xl 4xl 5xl auto | Indent around block | | box-opacity | null | 0 10 20 30 40 50 60 70 80 90 100 | Set the opacity in % | | box-overflow * | visible | auto hidden scroll visible | Display overflow block content | | box-padding * | none | none xxs xs s m l xl xxl 3xl 4xl 5xl | Indent around an block content | | box-place | null | none top top-left top-right center center-left center-right bottom bottom-left bottom-right | Position place, depending box-position | | box-position * | static | static relative absolute fixed sticky | Positioning method | | box-round * | none | none full xxs xs s m l xl xxl 3xl 4xl 5xl | Corner rounding | | box-width | auto | auto 1-1 *-2 *-3 *-4 *-5 *-6 *-7 *-8 *-9 *-10 | Set the width | | box-zindex | null | none xxs xs s m l xl xxl 3xl 4xl 5xl | Position z-index, depending box-position |

* — prop has advanced params

Customize

This set of css variables is default, if you want to override one or more value, please use the rules css-variable-usage, define them below the css import.

@custom-media --ek-box-media-small only screen and (min-width: 480px);
@custom-media --ek-box-media-medium only screen and (min-width: 768px);
@custom-media --ek-box-media-large only screen and (min-width: 960px);
@custom-media --ek-box-media-wide only screen and (min-width: 1200px);
@custom-media --ek-box-media-huge only screen and (min-width: 1400px);

:root {
    /* prop 'box-padding', 'box-margin' */
    --ek-box-indent-xxs: 5px;
    --ek-box-indent-xs: 10px;
    --ek-box-indent-s: 15px;
    --ek-box-indent-m: 20px;
    --ek-box-indent-l: 25px;
    --ek-box-indent-xl: 30px;
    --ek-box-indent-xxl: 35px;
    --ek-box-indent-3xl: 40px;
    --ek-box-indent-4xl: 45px;
    --ek-box-indent-5xl: 50px;
    /* prop 'box-round' */
    --ek-box-round-xxs: 2px;
    --ek-box-round-xs: 4px;
    --ek-box-round-s: 6px;
    --ek-box-round-m: 8px;
    --ek-box-round-l: 10px;
    --ek-box-round-xl: 12px;
    --ek-box-round-xxl: 14px;
    --ek-box-round-3xl: 16px;
    --ek-box-round-4xl: 18px;
    --ek-box-round-5xl: 20px;
    /* prop 'box-border-width' */
    --ek-box-border-width-xxs: 1px;
    --ek-box-border-width-xs: 2px;
    --ek-box-border-width-s: 3px;
    --ek-box-border-width-m: 4px;
    --ek-box-border-width-l: 5px;
    --ek-box-border-width-xl: 6px;
    --ek-box-border-width-xxl: 7px;
    --ek-box-border-width-3xl: 8px;
    --ek-box-border-width-4xl: 9px;
    --ek-box-border-width-5xl: 10px;
    /* prop 'box-zindex' */
    --ek-box-zindex-xxs: 5;
    --ek-box-zindex-xs: 10;
    --ek-box-zindex-s: 15;
    --ek-box-zindex-m: 20;
    --ek-box-zindex-l: 25;
    --ek-box-zindex-xl: 30;
    --ek-box-zindex-xxl: 35;
    --ek-box-zindex-3xl: 40;
    --ek-box-zindex-4xl: 45;
    --ek-box-zindex-5xl: 50;
}

box-display

• block - shown as blocky
• block-inline - block element that is wrapped around by other elements
• inline - displayed as inline
• none - remove from a document
• none:empty - Hide if contain either nothing or only an HTML comment

<Box box-display='none'>
    ...
</Box>

box-align

• none - No alignment
• left - Align to the left
• center - Center alignment
• right - Align to the right

<Box box-align='center'>
    ...
</Box>

box-margin

The property allows you to set the indentation value for all sides of an element at once or to determine it only for specified sides.

!> DEPRECATED props box-margin-lr and box-margin-tb, please use multi values

Advanced props

• box-margin-top {1}
• box-margin-right {2}
• box-margin-bottom {3}
• box-margin-left {4}

Multi values (set value separated by a space)

• box-margin="{1,3} {2,4}"
• box-margin="{1} {2,4} {3}"
• box-margin="{1} {2} {3} {4}"

List of values

| Value | CSS var | CSS value | |--------|-----------------------|-----------| | none | --- | 0px | | auto | --- | auto | | xxs | --ek-box-indent-xxs | 5px | | xs | --ek-box-indent-xs | 10px | | s | --ek-box-indent-s | 15px | | m | --ek-box-indent-m | 20px | | l | --ek-box-indent-l | 25px | | xl | --ek-box-indent-xl | 30px | | xxl | --ek-box-indent-xxl | 35px | | 3xl | --ek-box-indent-3xl | 40px | | 4xl | --ek-box-indent-4xl | 45px | | 5xl | --ek-box-indent-5xl | 50px |

<Box box-margin='s' />
<Box box-margin='s m' />
<Box box-margin='s m l' />
<Box box-margin='s m l xl' />
<Box
    box-margin-top='s'
    box-margin-right='m'
    box-margin-bottom='l'
    box-margin-left='xl'
/>

box-padding

The property allows you to set the indentation value for all sides of an element at once or to determine it only for specified sides.

!> DEPRECATED props box-padding-lr and box-padding-tb, please use multi values

Advanced props

• box-padding-top {1}
• box-padding-right {2}
• box-padding-bottom {3}
• box-padding-left {4}

Multi values (set value separated by a space)

• box-padding="{1,3} {2,4}"
• box-padding="{1} {2,4} {3}"
• box-padding="{1} {2} {3} {4}"

List of values

| Value | CSS var | CSS value | |--------|-----------------------|-----------| | none | --- | 0px | | xxs | --ek-box-indent-xxs | 5px | | xs | --ek-box-indent-xs | 10px | | s | --ek-box-indent-s | 15px | | m | --ek-box-indent-m | 20px | | l | --ek-box-indent-l | 25px | | xl | --ek-box-indent-xl | 30px | | xxl | --ek-box-indent-xxl | 35px | | 3xl | --ek-box-indent-3xl | 40px | | 4xl | --ek-box-indent-4xl | 45px | | 5xl | --ek-box-indent-5xl | 50px |

<Box box-padding='s' />
<Box box-padding='s m' />
<Box box-padding='s m l' />
<Box box-padding='s m l xl' />
<Box
    box-padding-top='s'
    box-padding-right='m'
    box-padding-bottom='l'
    box-padding-left='xl'
/>

box-round

The property allows you to set the fillet value for all corners of the element at the same time or to determine it only for the specified angle.

!> DEPRECATED props box-round-top, box-round-right, box-round-bottom and box-round-left, please use multi values

Advanced props

• box-round-top-left {1}
• box-round-top-right {2}
• box-round-bottom-right {3}
• box-round-bottom-left {4}

Multi values (set value separated by a space)

• box-round="{1,3} {2,4}"
• box-round="{1} {2,4} {3}"
• box-round="{1} {2} {3} {4}"

List of values

| Value | CSS var | CSS value | |--------|-----------------------|-----------| | none | --- | 0px | | full | --- | 50% | | xxs | --ek-box-round-xxs | 2px | | xs | --ek-box-round-xs | 4px | | s | --ek-box-round-s | 6px | | m | --ek-box-round-m | 8px | | l | --ek-box-round-l | 10px | | xl | --ek-box-round-xl | 12px | | xxl | --ek-box-round-xxl | 14px | | 3xl | --ek-box-round-3xl | 16px | | 4xl | --ek-box-round-4xl | 18px | | 5xl | --ek-box-round-5xl | 20px |

<Box box-round='s' />
<Box box-round='s m' />
<Box box-round='s m l' />
<Box box-round='s m l xl' />
<Box
    box-round-top-left='s'
    box-round-top-right='m'
    box-round-bottom-right='l'
    box-round-bottom-left='xl'
/>

box-width

• auto - value: auto
• See table, for example: 3-4 = 75%

| |1|2|3|4|5|6|7|8|9|10| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |1|100%|50%|33.33%|25%|20%|16.66%|14.28%|12.5%|11.11%|10%| |2|---|100%|66.66%|50%|40%|33.33%|28.57%|25%|22.22%|20%| |3|---|---|100%|75%|60%|50%|42.85%|37.5%|33.33%|30%| |4|---|---|---|100%|80%|66.66%|57.14%|50%|44.44%|40%| |5|---|---|---|---|100%|83.33%|71.42%|62.5%|55.55%|50%| |6|---|---|---|---|---|100%|85.71%|75%|66.66%|60%| |7|---|---|---|---|---|---|100%|87.5%|77.77%|70%| |8|---|---|---|---|---|---|---|100%|88.88%|80%| |9|---|---|---|---|---|---|---|---|100%|90%| |10|---|---|---|---|---|---|---|---|---|100%|

<Box box-width='3-4'>
    ...
</Box>

box-height

• auto - value: auto
• 1-1 - value: 100%

<Box box-height='1-1'>
    ...
</Box>

box-position

The property allows you to set the type of positioning, location place on all sides and z-index

Advanced props

• box-position {1}
• box-place {2}
• box-zindex {3}

Multi values (set value separated by a space)

• box-position="{1}"
• box-position="{1} {2}"
• box-position="{1} {2} {3}"

<Box box-position='absolute' />
<Box box-position='absolute center' />
<Box box-position='absolute center xs' />

box-place

Use with prop box-position

List of values

| Value | Description | |-----------------|--------------------------| | none | Reset placement | | top | Center top placement | | top-left | Left top placement | | top-right | Right top placement | | center | Center placement | | center-left | Left center placement | | center-right | Right center placement | | bottom | Center bottom placement | | bottom-left | Left bottom placement | | bottom-right | Right bottom placement |

<Box box-position='absolute' box-place='center'>
    ...
</Box>

box-zindex

Use with prop box-position

List of values

| Value | CSS var | CSS value | |--------|-----------------------|-----------| | none | --- | 0 | | xxs | --ek-box-zindex-xxs | 5 | | xs | --ek-box-zindex-xs | 10 | | s | --ek-box-zindex-s | 15 | | m | --ek-box-zindex-m | 20 | | l | --ek-box-zindex-l | 25 | | xl | --ek-box-zindex-xl | 30 | | xxl | --ek-box-zindex-xxl | 35 | | 3xl | --ek-box-zindex-3xl | 40 | | 4xl | --ek-box-zindex-4xl | 45 | | 5xl | --ek-box-zindex-5xl | 50 |

<Box box-position='absolute' box-zindex='xs'>
    ...
</Box>

box-overflow

The property allows you to set the value for all axes at the same time or to determine it only for the specified axis

Advanced props

• box-overflow-x {1}
• box-overflow-y {2}

Multi values (set value separated by a space)

• box-overflow="{1} {2}"

List of values

• auto - Scroll bars are added only when needed
• hidden - Only the area inside the element is displayed, the rest will be hidden
• scroll - Scroll bars are always added
• visible - The entire content of the element is displayed, even beyond the specified height and width

<Box box-overflow='scroll' />
<Box box-overflow='visible scroll' />
<Box box-overflow-x='visible' box-overflow-y='scroll' />

box-border

!> DEPRECATED props box-border-lr and box-border-tb, please use the separately box-border-left and box-border-right or box-border-top and box-border-bottom

Advanced props

• box-border-top
• box-border-right
• box-border-bottom
• box-border-left

Multi values (set value separated by a space)

• box-border="{1}"
• box-border="{1} {2}"
• box-border="{1} {2} {3}"

{1} - color, {2} - width, {3} - style

<Box box-border="{THEME_NAME}" />
<Box box-border="{THEME_NAME} xs" />
<Box box-border="{THEME_NAME} xs dotted" />

<Box box-border-top="{THEME_NAME}" />
<Box box-border-top="{THEME_NAME} xs" />
<Box box-border-top="{THEME_NAME} xs dotted" />

Set the THEME_NAME depending on the theming

box-border-width

The property allows you to set the border width for all sides of an element at once or to determine it only for specified sides.

Advanced props

• box-border-width-top {1}
• box-border-width-right {2}
• box-border-width-bottom {3}
• box-border-width-left {4}

Multi values (set value separated by a space)

• box-border-width="{1,3} {2,4}"
• box-border-width="{1} {2,4} {3}"
• box-border-width="{1} {2} {3} {4}"

List of values

| Value | CSS var | CSS value | |--------|------------------------------|-----------| | none | --- | 0px | | xxs | --ek-box-border-width-xxs | 1px | | xs | --ek-box-border-width-xs | 2px | | s | --ek-box-border-width-s | 3px | | m | --ek-box-border-width-m | 4px | | l | --ek-box-border-width-l | 5px | | xl | --ek-box-border-width-xl | 6px | | xxl | --ek-box-border-width-xxl | 7px | | 3xl | --ek-box-border-width-3xl | 8px | | 4xl | --ek-box-border-width-4xl | 9px | | 5xl | --ek-box-border-width-5xl | 10px |

<Box box-border-width='s' />
<Box box-border-width='s m' />
<Box box-border-width='s m l' />
<Box box-border-width='s m l xl' />
<Box
    box-border-width-top='s'
    box-border-width-right='m'
    box-border-width-bottom='l'
    box-border-width-left='xl'
/>

box-border-color

The property allows you to set the border color for all sides of an element at once or to determine it only for specified sides.

Advanced props

• box-border-color-top {1}
• box-border-color-right {2}
• box-border-color-bottom {3}
• box-border-color-left {4}

Multi values (set value separated by a space)

• box-border-color="{1,3} {2,4}"
• box-border-color="{1} {2,4} {3}"
• box-border-color="{1} {2} {3} {4}"

<Box box-border-color='{THEME_NAME}' />
<Box box-border-color='{THEME_NAME} {THEME_NAME}' />
<Box box-border-color='{THEME_NAME} {THEME_NAME} {THEME_NAME}' />
<Box box-border-color='{THEME_NAME} {THEME_NAME} {THEME_NAME} {THEME_NAME}' />
<Box
    box-border-color-top='{THEME_NAME}'
    box-border-color-right='{THEME_NAME}'
    box-border-color-bottom='{THEME_NAME}'
    box-border-color-left='{THEME_NAME}'
/>

Set the THEME_NAME depending on the theming

box-border-style

The property allows you to set the border style for all sides of an element at once or to determine it only for specified sides.

Advanced props

• box-border-style-top {1}
• box-border-style-right {2}
• box-border-style-bottom {3}
• box-border-style-left {4}

Multi values (set value separated by a space)

• box-border-style="{1,3} {2,4}"
• box-border-style="{1} {2,4} {3}"
• box-border-style="{1} {2} {3} {4}"

Values

• solid - solid style (default)
• dotted - dotted style
• dashed - dashed style

<Box box-border-style='solid' />
<Box box-border-style='solid dotted' />
<Box box-border-style='solid dotted dashed' />
<Box box-border-style='solid dotted dashed solid' />
<Box
    box-border-style-top='solid'
    box-border-style-right='dotted'
    box-border-style-bottom='dashed'
    box-border-style-left='solid'
/>

box-background

<Box box-background='{THEME_NAME}'>
    ...
</Box>

Set the THEME_NAME depending on the theming

box-opacity

• 0 - value: 0
• 10 - value: 0.1
• 20 - value: 0.2
• 30 - value: 0.3
• 40 - value: 0.4
• 50 - value: 0.5
• 60 - value: 0.6
• 70 - value: 0.7
• 80 - value: 0.8
• 90 - value: 0.9
• 100 - value: 1

<Box box-opacity='50'>
    ...
</Box>

box-empty

!> In version [email protected] DEPRECATED prop box-empty='hidden', please use box-display='none:empty'

The <Box> will be hidden display: none that contain either nothing or only an HTML comment.

<Box box-empty='hidden'>
    {null}
</Box>