0.1.10 • Published 3 years ago

rt-components-library v0.1.10

Weekly downloads
26
License
MIT
Repository
github
Last release
3 years ago

R.T. Components library

Netlify Status

Preview

You can preview the components here https://rt-library.netlify.app .

Purpose

This personal UI kit was build at first to power a self project called RPG Trade. But I made so every body can take those components and make them their own. Maybe it will speed up your process of creating new interfaces in React be simply changing this styling "config" file :

:root {
  /* COLORS */
  --color-primary-100: #ebedf3;
  --color-primary-300: #b1b6d1;
  --color-primary-500: #3b488b;
  --color-primary-700: #232b53;
  --color-secondary-300: #c8cce3;
  --color-secondary-500: #7680ba;
  --color-secondary-700: #474d70;
  --color-accent-500: #9648e3;
  --color-success-300: #c4eac2;
  --color-success-500: #6cca67;
  --color-success-700: #41793e;
  --color-error-300: #eeafb8;
  --color-error-500: #d4364d;
  --color-error-700: #7f202e;
  --color-warning-300: #f6c3aa;
  --color-warning-500: #e8682b;
  --color-warning-700: #8b3e1a;
  --color-white: #fff;
  --color-black: #292a2d;
  --color-grey-100: #f9fafc;
  --color-grey-300: #cfd1d5;
  --color-grey-500: #888c97;
  --color-grey-700: #52545b;

  /* UI SCALE */
  --btn-small-h: 1rem;
  --btn-small-v: 0.25rem;
  --btn-small-radius: 1rem;
  --btn-small-fs: 0.875rem;
  --btn-medium-h: 1.125rem;
  --btn-medium-v: 0.375rem;
  --btn-medium-radius: 1.125rem;
  --btn-medium-fs: 1rem;
  --btn-large-h: 1.25rem;
  --btn-large-v: 0.5rem;
  --btn-large-radius: 1.25rem;
  --btn-large-fs: 1.125rem;

  --textfield-h: 1.25rem;
  --textfield-v: 0.5rem;
  --textfield-radius: 1.25rem;
  --textfield-fs: 1rem;

  --badge-small-h: 1.125rem;
  --badge-small-v: 0.125rem;
  --badge-small-radius: 1rem;
  --badge-small-fs: 0.75rem;
  --badge-medium-h: 1.25rem;
  --badge-medium-v: 0.25rem;
  --badge-medium-radius: 1.125rem;
  --badge-medium-fs: 0.875rem;

  --loader-small: 1rem;
  --loader-medium: 2rem;
  --loader-large: 3rem;

  --toast-radius: 0.5rem;
  --toast-h: 0.875rem;
  --toast-v: 0.875rem;

  --modal-radius: 1rem;
  --modal-h: 2rem;
  --modal-v: 2rem;

  --switch-small: 1.625rem;
  --switch-medium: 2.5rem;

  --check-radio: 1.125rem;

  --card-image-height: 10rem;
  --card-width: 16rem;
  --card-radius: 1rem 1rem 0 0;
}

How to use

npm i rt-components-library
or
yarn add rt-components-library

Then you have to import 'rt-components-library/dist/index.css' in your main app file to have the components styling.

How to dev

To fire the local dev env just yarn dev and go to http://localhost:3000/.

Commit convention

Every commit message you push should be prefix with these annotations :

  • New feature : [+]
  • Refacto, WIP, work on code : [*]
  • Fix : [#]
  • Code or assets deletion : [-]
0.1.10

3 years ago

0.1.9

3 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago