elemental-react
Cross-platform React design elements to let you build your own design language.
Last updated a month ago by macintoshhelper .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install elemental-react 
SYNC missed versions from official npm registry.

Elemental React

Build UI components once, render to any platform using react-primitives. This library abstracts away common UI patterns for you.

npm npm

Abstraction for app presentation to speed up cross-platform UI design and development with code using React/Sketch as a design function. This is an underlying cross-platform abstraction wrapper that allows you to build your own design language

Based off styled-system and styled-components. API is similar to rebass, but using React Native style components.

This is an alpha/preview release. Please test comprehensively before using in production.

Supported React Renderers:

  • react - React web
  • react-native - React Native (WIP)
  • react-sketchapp - React Sketch.app
  • more - Post an issue to suggest more! Ideally an API should exist that lets you override the primitives

Getting Started

npm install elemental-react
import React from 'react';
import {
  Box, Text, Button,
} from 'elemental-react';

// ...
return (
  <Box mt={3} bg="dark-blue">
    <Text color="white">
      Hello World
    </Text>
  </Box>
);

Example UI

Quick example of a design created by a coder (me :slightly_smiling_face:), developed with live rendering to react-sketchapp: Example Blog UI

Related Reading

Design Properties

Line

Themed colour (primary)

  • Weight
  • Color
  • Texture
  • Style

Shape

Foundational element.

  • Depth
    • Light, shadow and depth (illusion)

Texture

Physical quality of a surface.

Balance

Equal distribution of visual weight – spacing.

  • Symmetry (each side is the same)
  • Asymmetry – evenly distribute weight
  • Rule of thirds – grid divided into thirds

Color

Properties

  • Hue
  • Saturation
    • Monochromatic
  • Value

Analagous Colour Scheme

Current Tags

  • 0.3.1-beta.4                                ...           beta (a month ago)
  • 0.3.3                                ...           latest (a month ago)

15 Versions

  • 0.3.3                                ...           a month ago
  • 0.3.2                                ...           a month ago
  • 0.3.1                                ...           a month ago
  • 0.3.1-beta.4                                ...           a month ago
  • 0.3.1-beta.3                                ...           a month ago
  • 0.3.1-beta.2                                ...           a month ago
  • 0.3.1-beta.1                                ...           a month ago
  • 0.3.0                                ...           a month ago
  • 0.3.0-beta.2                                ...           a month ago
  • 0.3.0-beta.1                                ...           a month ago
  • 0.3.0-beta.0                                ...           a month ago
  • 0.2.0                                ...           2 months ago
  • 0.1.1                                ...           3 months ago
  • 0.1.0                                ...           3 months ago
  • 0.0.1                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 40
Dependencies (10)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |