@rbccdx/leoui

LeoUI

LeoUI is a Vue.js component library based on framework-library-vue

• Component documentation: https://rbccdx.github.io/leoui
• NPM package: @rbccdx/leoui
• Codebase: @rbccdx/leoui
• Design Kit: Figma

Pre Instalation

This projects assumes you have a working Vue3.js app. This is an add-on Vue 3 RBC based framework
for components. Its has some basic logic but you are free to extend what you need for your project.
Similarly, it has base styles and the ability to extend and tailor the look to your design needs.

Installation

npm install @rbccdx/leoui

• It requires Node@>=18. It may work on older versions of Node, however it was built using Node 18+.

Add styles

Then, register LeoUI minified styles (typically main.js or main.ts):

// LeoUI minified css styles
import '@rbccdx/leoui/styles';

• Fonts are included - Rbc, Roboto and Font Awesome v5
• you need to customize it, don't worry, we've got you covered - Theming

Grid

This package relies on Bootstrap grid. Import it from:

https://cdn.rbcgam.com/assets/css/bootstrap-grid.min.css

Components

// Place all imports from 'LeoUI' in a single import
// statement for optimal bundle sizes
import { RbcAlert, RbcButton } from '@rbccdx/leoui';

Have a look at the component Documentation.

Theming

1. Install sass - https://www.npmjs.com/package/sass
2. Create scss file and use the variables that you would like to override from here

Example: index.scss

$success-color-dark: #1f5901;

@import '@rbccdx/leoui/scss-styles';

• You can follow the original structure, something like:

Example: index.scss

@import 'universal';
@import 'variables/spacer';
@import 'variables/brand';
@import 'variables/typography';
@import 'variables/layout';
@import 'variables/components/index';

@import '@rbccdx/leoui/scss-styles';

3. Don't forget to reference index.scss in (typically main.js or main.ts)
4. This is important! Now you are building the package. You should update fonts path.
5. Ensure the path is correct relative to the final CSS file, not the SCSS file. You can copy/paste fonts from node_modules.

$icon-source: '';
$font-source: '';

5. Congrats! Now you should be able to override all !default scss variables in your project

At this point you should be ready to go!

We are currently working through how to submit requests, support, bugs, support, etc...
While we are working through that please feel free to email to [e-mail]