@rakuten-rex/core

ReX React UI Component: core

Welcome to ReX Design System

Core Styles from normalize.css

This purpose of this project is to provide the normalize.css styles as Sass mixins divided by HTML tag.

Use Sass mixin only to create your own component.

 

Note

The following list of React components are showed as a reference to verify the core styles.

Don`t use these React components in your project.

How to install

npm install @rakuten-rex/core@3.0.1 --save

yarn add @rakuten-rex/core@3.0.1

Usage

The main purpose of this repository is to provide SASS mixin to create your own components, the React components are just a reference of usage.

Getting started

Storybook Live examples

For a complete guide of properties for React and HTML classes please visit our Storybook page:

https://rakuten-rex.github.io/core/

Storybook features

• Stories by component types
• HTML raw output
• JSX output
• Stories source code
• Knobs with multiple options

How to integrate ReX in your project

JavaScript modules and components

Sass mixins

For your own customization of styles (React, Vue, Angular, etc.) or Static HTML.

Example:

my-styles.scss

@import '@rakuten-rex/core/Text/sass/styles.mixin';

.my-text-component {
  // Normalize.css styles
  @include rex-text();
  // My props
  color: green;
}

Documentation, source code and distribution

	Site	URL
	Github (Source Code)	https://github.com/rakuten-rex
	NPM (Package distribution)	https://www.npmjs.com/org/rakuten-rex
	ZeroHeight (Documentation)	https://zeroheight.com/390c074f3

Project Stack

Front-end
HTML5 CSS3 & Sass JavaScript ES6 React

Tools
webpack Storybook Babel ESLint Prettier

Features

Styles features	JavaScript features
Theme support via CSS variables	React components splitted by type
Static CSS styles available for HTML/VueJS/AngularJS	Universal Module Definition support
Sass mixins for custom builds
Reset CSS styles already bundled by HTML tags
Removed duplicated CSS props
CSS classes prefix rex-

Browser Support

PC	Mobile
Chrome 49+	iOS 9+ (Safari 9.3+, Chrome 78+)
Safari 9.1+	Android 6+ (Chrome 78+, Android Browser 76+)
Firefox 31+
MS Edge 15+
IE 11+