0.1.10 • Published 3 years ago
rt-components-library v0.1.10
R.T. Components library
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
oryarn 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 :
[-]