RedsiftUI
RedsiftUI is a user interface library for rapid development of Sifts and other Red Sift applications. The documentation is available at here.
This repository does not contain UI components itself. It contains logic to grab available Red Sift UI components from NPM and to bundle them into packages. Those packages are then served by our CDN as UMD modules. There are multiple bundles which you can use:
core bundle
Contains the Redsift theme in the light and dark flavour, as well as UI logic shared between components.
To use the bundle add the following HTML to your project:
<!-- in the <head> section -->
<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/core/redsift-light.min.css">
<!-- or the dark theme: -->
<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/core/redsift-dark.min.css">
<!-- in the <body> section -->
<script src="//static.redsift.io/ui/latest/js/core/redsift.umd.min.js"></script>sift bundle
This is probably the most important one to start with Sift development. It contains the Redsift theme in the light and dark flavour, together with the rs-hero component.
To use the bundle add the following HTML to your project:
<!-- in the <head> section -->
<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/sift/redsift-light.min.css">
<!-- or the dark theme: -->
<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/sift/redsift-dark.min.css">
<!-- in the <body> section -->
<script src="//static.redsift.io/ui/latest/js/sift/redsift.umd.min.js"></script>full bundle
To get all the functionality provided by RedsiftUI use this bundle. It contains the Redsift theme in the light and dark flavour, together with the following (data visualization) components:
rs-hero: A hero unit for your Sift or apprs-radial-chart: A radial chart for visualizing monthly datars-schedule: A scheduling component
To use the bundle add the following HTML to your project:
<!-- in the <head> section -->
<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/full/redsift-light.min.css">
<!-- or the dark theme: -->
<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/full/redsift-dark.min.css">
<!-- in the <body> section -->
<script src="//static.redsift.io/ui/latest/js/full/redsift.umd.min.js"></script>Development and Customization
The bundles are provided to start quickly with developing your Sifts or applications. To have more control on which parts to include into your project you are encouraged to use the UI components directly. The components are develop in ES2015 for the Javascript and with the Stylus CSS preprocessor. It is easy to integrate and customize these components into your projects. Have a look at the ./bundles folder to get an idea on how to integrate the functionality into your own projects. The following components are available as separate repositories and also als NPM modules:
Development Setup
For development directly within this repository run
> npm run servewithin the repository folder. It will start a web server serving the content of ./samples and supports live-reloading when a source file is changed.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent