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 evokit-box@3.4.0 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>

evokit-box

EvoKit - Box

Install

Usage

Props

`<Box />`

Customize

`box-display`

`box-align`

`box-margin`

`box-padding`

`box-round`

`box-width`

`box-height`

`box-position`

`box-place`

`box-zindex`

`box-overflow`

`box-border`

`box-border-width`

`box-border-color`

`box-border-style`

`box-background`

`box-opacity`

`box-empty`

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

evokit-box

EvoKit - Box

Install

Usage

Props

<Box />

Customize

box-display

box-align

box-margin

box-padding

box-round

box-width

box-height

box-position

box-place

box-zindex

box-overflow

box-border

box-border-width

box-border-color

box-border-style

box-background

box-opacity

box-empty

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`<Box />`

`box-display`

`box-align`

`box-margin`

`box-padding`

`box-round`

`box-width`

`box-height`

`box-position`

`box-place`

`box-zindex`

`box-overflow`

`box-border`

`box-border-width`

`box-border-color`

`box-border-style`

`box-background`

`box-opacity`

`box-empty`

Weekly Downloads