# essence-core

> Essence Core - Essence components

Latest version **1.0.20** (published 2016-06-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install essence-core
pnpm add essence-core
yarn add essence-core
bun add essence-core
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.20 |
| Published | 2016-06-14 |
| First published | 2016-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 412 |
| Author | Hetmann W. Iohan |
| Maintainers | blogtools, essence_md, pearlventures |
| Keywords | color palette, component, essence, google material, grid lists, javascript, less css, less, lesscss, material components, material design framework, material design, material, module, react component, react components, react native, react, react-component, template, templates, tile, tiles, UI component, UI kit, UI kits, UI, widget, gris system, divider, ripple ink, typography, text, utility, utilities, position, color, screen size, document size, timer, backgroundcolor, clickposition, client |

## Links

- npm: https://www.npmjs.com/package/essence-core
- Repository: https://github.com/Evo-Forge/Essence
- Homepage: http://getessence.io/
- Issues: https://github.com/Evo-Forge/Essence/issues
- npm.io page: https://npm.io/package/essence-core

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.x
- [react-addons-transition-group](https://npm.io/package/react-addons-transition-group.md) ^0.14.x
- [react-addons-css-transition-group](https://npm.io/package/react-addons-css-transition-group.md) ^0.14.x

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.20 (latest) — 2016-06-14
- 1.0.19 — 2016-04-20
- 1.0.18 — 2016-04-14
- 1.0.17 — 2016-04-12
- 1.0.16 — 2016-04-12
- 1.0.15 — 2016-04-12
- 1.0.14 — 2016-04-07
- 1.0.13 — 2016-04-07
- 1.0.12 — 2016-03-25
- 1.0.11 — 2016-03-16
- 1.0.10 — 2016-03-15
- 1.0.9 — 2016-03-11
- 1.0.8 — 2016-03-04
- 1.0.7 — 2016-03-04
- 1.0.6 — 2016-03-03
- … 22 more at https://npm.io/package/essence-core/versions

## README

# Essence Core - Essence components

#### Components:
##### 1. GRID SYSTEM

###### Option:
- **type**: default `div` or from the list: `span` `header` `footer` `section` `ul` `li` `hr` `br`

```js
import {Block} from 'essence-core';

<Block classes={'brick brick-12'}>brick-12</Block>

<Block classes={'brick brick-6'}>brick-6</Block>
<Block classes={'brick brick-6'}>brick-6</Block>

<Block classes={'brick brick-4'}>brick-4</Block>
<Block classes={'brick brick-4'}>brick-4</Block>
<Block classes={'brick brick-4'}>brick-4</Block>

<Block classes={'brick brick-3'}>brick-3</Block>
<Block classes={'brick brick-3'}>brick-3</Block>
<Block classes={'brick brick-3'}>brick-3</Block>
<Block classes={'brick brick-3'}>brick-3</Block>
```

##### 2. DIVIDER

###### Option:
- **classes**: className from the list: `thinnest` `thin` `regular` `thick` `thickest` `short` `medium` `long`

```js
import {Divider} from 'essence-core';

<Divider classes={'thick short e-background-indigo-400'} />
<Divider classes={'thick long e-background-indigo-400'} />
<Divider classes={'thick short e-background-indigo-400'} />
<Divider classes={'thin long e-background-indigo-400'} />
<Divider classes={'thick e-background-indigo-400'} />
<Divider classes={'thin e-background-indigo-400'} />
```

##### 3. RIPPLE INK

###### Options:
- **position**: object with `x` for **left** position in px & `y` for **top** position in px
- **color**: for `backgroundColor`

```js
import {Utils, RippleInk} from 'essence-core';

let boundingClient = this.currentButton.getBoundingClientRect();
let color = Utils.BackgroundColor(event);
let position = Utils.ClickPosition(event, boundingClient);

<RippleInk color={color} position={position}/>
```

##### 4. TEXT TYPOGRAPHY

###### Requirements:
Import **Roboto** & **Roboto Condensed** from Google Fonts:

```
Roboto: Light, Italic & Bold
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,300italic,300,500,500italic,100italic,100,400italic' rel='stylesheet' type='text/css'>
```

```
Roboto Condensed
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,700italic,300italic,400italic' rel='stylesheet' type='text/css'>
```

###### Options:
- **type**: string from the list explained below
- **badge**: for `data-badge` option with a maximum lenght of 3 chars

```js
import {Text} from 'essence-core';

{/* type: a, p, label, strong, small, caption, h1, h2, h3, h4, h5, h6, sup, sub, em */}
<Text type={a} href={'http://getessence.io'} target={'_blank'}> Discover Essence <Text/>

{/* position: e-text-left, e-text-right, e-text-center, e-text-justify, e-text-uppercase, e-text-capitalize, e-text-lowercase */}
<Text type={'span'} classes={'e-text-right e-headline'}>Text Typography Example</Text>

{/* typography classes: e-display-4, e-display-3, e-display-2, e-display-1, e-headline, e-title, e-subhead, e-body2, e-body1, e-caption, e-button */}
<Text type={'span'} classes={'e-text-center e-headline'}>Text Typography Example</Text>

{/* text data-badge */}
<Text badge={'3'}>Text with Badge</Text>
```

##### 5. UTILITIES
&nbsp;
```js
import {Utils} from 'essence-core';

let boundingClient = this.refs.yourElement.getBoundingClientRect();
let position = Utils.ClickPosition(event, boundingClient);
let color = Utils.BackgroundColor(event);
let isMobile = Utils.Client.isMobile();
let screenSize = Utils.Client.screenSize();
let documentSize = Utils.Client.documentSize();

this.timer = new Utils.Timer(
  function() {
   // your callback function
  },
  2000 // miliseconds
);

pauseTimer() {
 if (this.timer) {
  this.timer.pause();
 }
}

resumeTimer() {
 if (this.timer) {
  this.timer.resume();
 }
}
```

---
_Source: https://npm.io/package/essence-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._