evokit-body
v3.2.0
Published
Used for body of the web page and sets the basic styles
Downloads
3,451
Maintainers
Readme
EvoKit - Body
Used for body of the web page and sets the basic styles. Contains two elements <Body>
and <Body.Section>
Install
npm install evokit-body --save
Usage
More about usage
import React from 'react';
import { Body } from 'evokit-body';
import 'evokit-body/style.css';
const App = () => (
<Body body-indent='xl'>
<Body.Section>
header
</Body.Section>
<Body.Section>
content
</Body.Section>
<Body.Section>
footer
</Body.Section>
</Body>
);
Props
Also supports other valid props of the React Element. More about use props
<Body />
| Prop name | Default value | Possible value | Description |
|---------------------|---------------|-------------------|-------------|
| body-background | null
| Create theme | Background color |
| body-color | null
| Create theme | Text color |
| body-display | block
| block
none
| Display type |
| body-indent | none
| none
xxs
xs
s
m
l
xl
xxl
3xl
4xl
5xl
| Padding on the side left and right for children <Body.Section />
|
| body-overflow *
| visible
| auto
hidden
scroll
visible
| Overflow type |
| body-overflow-anchor | auto
| auto
none
| Scroll anchoring behavior |
| body-width *
| null
| none
xxs
xs
s
m
l
xl
xxl
3xl
4xl
5xl
| Min and Max width for children <Body.Section />
|
<Body.Section />
| Prop name | Default value | Possible value | Description |
|------------------------|---------------|----------------------------|--------------|
| body-section-display | block
| block
none
| Display type |
| body-section-height | auto
| auto
inherit
1-1
| Set the height |
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-body-media-small only screen and (min-width: 480px);
@custom-media --ek-body-media-medium only screen and (min-width: 768px);
@custom-media --ek-body-media-large only screen and (min-width: 960px);
@custom-media --ek-body-media-wide only screen and (min-width: 1200px);
@custom-media --ek-body-media-huge only screen and (min-width: 1400px);
:root {
/* base */
--ek-body-font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
--ek-body-font-size: 13px;
--ek-body-font-weight: 400;
--ek-body-line-height: 1em;
--ek-body-min-width: 320px;
--ek-body-max-width: 1240px;
/* prop 'body-indent' */
--ek-body-indent-xxs: 5px;
--ek-body-indent-xs: 10px;
--ek-body-indent-s: 15px;
--ek-body-indent-m: 20px;
--ek-body-indent-l: 25px;
--ek-body-indent-xl: 30px;
--ek-body-indent-xxl: 35px;
--ek-body-indent-3xl: 40px;
--ek-body-indent-4xl: 45px;
--ek-body-indent-5xl: 50px;
/* prop 'body-width', 'body-width-min', 'body-width-max' */
--ek-body-width-xxs: 320px;
--ek-body-width-xs: 480px;
--ek-body-width-s: 768px;
--ek-body-width-m: 900px;
--ek-body-width-l: 1024px;
--ek-body-width-xl: 1280px;
--ek-body-width-xxl: 1366px;
--ek-body-width-3xl: 1440px;
--ek-body-width-4xl: 1600px;
--ek-body-width-5xl: 1920px;
}
Live demo
body-display
block
- shown as blockynone
- remove from a document
<Body body-display='none'>
...
</Body>
body-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
body-overflow-x
body-overflow-y
Multi values (set value separated by a space)
body-overflow="{1} {2}"
{1} - overflow-x, {2} - overflow-y
List of values
auto
- Scroll bars are added only when neededhidden
- Only the area inside the element is displayed, the rest will be hiddenscroll
- Scroll bars are always addedvisible
- The entire content of the element is displayed, even beyond the specified height and width
<Body body-overflow='scroll' />
<Body body-overflow='visible scroll' />
<Body body-overflow-x='visible' body-overflow-y='scroll' />
body-overflow-anchor
The property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.
Scroll anchoring behavior is enabled by default in any browser that supports it. Therefore, changing the value of this property is typically only required if you are experiencing problems with scroll anchoring in a document or part of a document and need to turn the behavior off. Read more
auto
- The element becomes a potential anchor when adjusting scroll position.none
- The element won't be selected as a potential anchor.
<Body body-overflow-anchor='none'>
...
</Body>
body-indent
none
- no indent, value:0px
xxs
- css variable--ek-body-indent-xxs
, default value:5px
xs
- css variable--ek-body-indent-xs
, default value:10px
s
- css variable--ek-body-indent-s
, default value:15px
m
- css variable--ek-body-indent-m
, default value:20px
l
- css variable--ek-body-indent-l
, default value:25px
xl
- css variable--ek-body-indent-xl
, default value:30px
xxl
- css variable--ek-body-indent-xxl
, default value:35px
3xl
- css variable--ek-body-indent-3xl
, default value:40px
4xl
- css variable--ek-body-indent-4xl
, default value:45px
5xl
- css variable--ek-body-indent-5xl
, default value:50px
<Body body-indent='m'>
...
</Body>
body-width
This property set the min and max width for children <Body.Section />
Advanced props
body-width-min
body-width-max
Multi values (set value separated by a space)
body-width="{1} {2}"
{1} - width-min, {2} - width-max
List of values
none
- no min/max width, value:0/none
xxs
- css variable--ek-body-width-xxs
, default value:320px
xs
- css variable--ek-body-width-xs
, default value:480px
s
- css variable--ek-body-width-s
, default value:768px
m
- css variable--ek-body-width-m
, default value:900px
l
- css variable--ek-body-width-l
, default value:1024px
xl
- css variable--ek-body-width-xl
, default value:1280px
xxl
- css variable--ek-body-width-xxl
, default value:1366px
3xl
- css variable--ek-body-width-3xl
, default value:1440px
4xl
- css variable--ek-body-width-4xl
, default value:1600px
5xl
- css variable--ek-body-width-5xl
, default value:1920px
<Body body-width='l'>
<Body.Section>
// min-width: 1024px; max-width: 1024px;
</Body.Section>
</Body>
<Body body-width='xxs xl'>
<Body.Section>
// min-width: 320px; max-width: 1280px;
</Body.Section>
</Body>
<Body body-width-min='xxs' body-width-max='xl'>
<Body.Section>
// min-width: 320px; max-width: 1280px;
</Body.Section>
</Body>
body-background
Set the
THEME_NAME
depending on the theming
<Body body-background={THEME_NAME}>
...
</Body>
body-color
Set the
THEME_NAME
depending on the theming
<Body body-color={THEME_NAME}>
...
</Body>
body-section-display
block
- shown as blockynone
- remove from a document
<Body>
<Body.Section body-section-display='none'>
...
</Body.Section>
</Body>
body-section-height
Set the height
auto
- value:auto
inherit
- value:inherit
1-1
- value:100%
<Body>
<Body.Section body-section-height='1-1'>
...
</Body.Section>
</Body>
body-size
!> DEPRECATED prop, please use body-width
xl
- css variable--ek-body-max-width-xl
, default value:1440px
xxl
- css variable--ek-body-max-width-xxl
, default value:1640px
xxxl
- css variable--ek-body-max-width-xxxl
, default value:1840px
<Body body-size='xl'>
...
</Body>