1.0.20 • Published 9 years ago
essence-core v1.0.20
Essence Core - Essence components
Components:
1. GRID SYSTEM
Option:
- type: default
div
or from the list:span
header
footer
section
ul
li
hr
br
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
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
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
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
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();
}
}
1.0.20
9 years ago
1.0.19
9 years ago
1.0.18
9 years ago
1.0.17
9 years ago
1.0.16
9 years ago
1.0.15
9 years ago
1.0.14
9 years ago
1.0.13
9 years ago
1.0.12
9 years ago
1.0.11
9 years ago
1.0.10
9 years ago
1.0.9
9 years ago
1.0.8
9 years ago
1.0.7
9 years ago
1.0.6
9 years ago
1.0.5
9 years ago
1.0.4
9 years ago
1.0.3
9 years ago
1.0.2
9 years ago
1.0.1
9 years ago
1.0.0
9 years ago
0.0.17
9 years ago
0.0.16
9 years ago
0.0.15
9 years ago
0.0.14
9 years ago
0.0.13
9 years ago
0.0.12
9 years ago
0.0.11
9 years ago
0.0.10
9 years ago
0.0.9
10 years ago
0.0.8
10 years ago
0.0.7
10 years ago
0.0.6
10 years ago
0.0.5
10 years ago
0.0.4
10 years ago
0.0.3
10 years ago
0.0.2
10 years ago
0.0.1
10 years ago