❤
npm
Sign UpSign In

evokit-body

3.2.0 • Public • Published

EvoKit - Body

Used for body of the web page and sets the basic styles. Contains two elements <Body> and <Body.Section>

Install

Peer dependencies evokit. More about 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

Edit body-usage

body-display

  • block - shown as blocky
  • none - 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 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
<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 blocky
  • none - 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>

Readme

Keywords

Package Sidebar

Install

npm i evokit-body

Repository

github.com/docccdev/evokit

Homepage

evokit.net/#/packages/evokit-body/

Weekly Downloads

736

Version

3.2.0

License

MIT

Unpacked Size

80.3 kB

Total Files

12

Last publish

Collaborators

  • docccdev
Try on RunKit
Report malware