https://github.com/pabloibanezcom/react-tube-kit

UI kit for React applications - Components, helpers & styles
https://github.com/pabloibanezcom/react-tube-kit

Last synced: 7 days ago
JSON representation

UI kit for React applications - Components, helpers & styles

• Host: GitHub
• URL: https://github.com/pabloibanezcom/react-tube-kit
• Owner: pabloibanezcom
• Created: 2019-09-28T14:09:15.000Z (over 5 years ago)
• Default Branch: production
• Last Pushed: 2022-02-10T19:35:06.000Z (almost 3 years ago)
• Last Synced: 2024-11-18T02:17:29.186Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.69 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# React Tube Kit

A collection of components and utils for React.

This package is bootstraped using [create-react-app](https://github.com/facebook/create-react-app) and is using [Bootstrap](https://getbootstrap.com) as base.

## Demo

[Demo Page](https://react-tube-kit.herokuapp.com/)

## Installation

```bash

npm install react-tube-kit --save

```

## Usage

### Styles - Option A: Loading CSS

Add css import to main css/scss in your application (index.css i.e.)

```

@import "~react-tube-kit/dist/css/main.min.css";

```

### Styles - Option B: Loading SCSS

Add scss import main scss in your application (index.scss i.e.)

```

@import "~react-tube-kit/dist/scss/main.scss";

```

This option allows to override default scss variables:

```

// Fonts

$font-primary: 'Circular Airbnb';

// Colors

$body-color: #484848

$primary-color: #e6c300;

$secondary-color: #002c41;

$alternative-color: #00bcd4;

$primary-alt-color: $secondary-color;

$primary-outline-color: $secondary-color;

$secondary-alt-color: $white-color;

$secondary-outline-color: $secondary-color;

$outline-font-color: $secondary-color;

```

Create a scss file contaning the variables to override and import it just before package main one.

```

@import "./_variables-overrides.scss";

@import "~react-tube-kit/dist/scss/main.scss";

```

### Components

Import desired component from package and instantiate it as usual.

```

import { Button } from 'react-tube-kit';

```