Using the Deposit Vue UI-Kit
Introduction
A known fact for front-end engineers is the draining amount of time it takes to build components that are often required for any full-stack web application. Building a table, dropdown menu or button from scratch is time-consuming, which would be taking away from potential time spent on building features.
In the quest to build UI’s faster and more efficient tools like Tailwind CSS came into the picture as a messiah, accelerating the design to code component of programming. However, Tailwind is limiting to an extent. Yes, it has its own components however they are generalized and as much as they try to be as precise to suit every demand, I feel like they miss out on some vital components that affect the financial technical market.
I’ve recently fallen in love with a component library called Deposits UI Kit. Deposits UI Kit is a Fintech UI Kit that provides pre-built components and assets that minimize the time teams spend on designing and building financial services UI, it provides all the building blocks to build great & scalable Vue & React applications in the fintech space.
The Amazing thing about the Deposits UI Kit is that it includes a set of essential design elements relevant not just to the fintech space but can be used in other sectors. These elements include font, colors, icons, space, and layout principles etc. The Deposits UI Kit assures that all components created with it are tailored with a similar design language giving a uniform look and feel across the application, all built in record time.
Getting started
Before we start there are some prerequisites I’d like to get out of the way. To fully understand some terminologies it is best if you:
You have an understanding of HTML, CSS, and JAVASCRIPT (Vue, React).
You understand stateful & stateless components.
However non-technical readers aren’t left out as I will brush over some technicalities.
For starters, it is best to know that the Javascript frameworks the Deposits UI kit is built for are React & Vue — Although React is currently in production and would be released soon. They are both built of small pieces of code that are usually called components. For a better understanding think of each component as a Lego piece coming together to form an application, with each red, blue, and yellow Lego block reusable when they are needed.
In simple words, stateful components can be defined as a component that acts to handle the state over there. Whereas stateless components is a smaller piece of component that has no states, it just provides props instead of states.
For more information on this please read more on the Deposits UI Kit Docs.
Installation
You should already have a Vue3 application setup before installing the Deposits UI Kit. If not, you can Create a simple vue application.
The next step is to install the DEPOSITS UI Kit using the code snippet below.
`$ npm install @deposits/ui-kit-vue`
In order for the components to be styled properly, the compiled CSS has to be imported to the main.js file (or similar entry point) in your Vue application.
<your-application>/src/main.js
import { createApp } from "vue";
import App from "./App.vue";
++ import "@deposits/ui-kit-vue/dist/style.css"; // This line of code makes the css (styling) of the components available to your app
const app = createApp(App);
app.mount("#app");
For information on how to get started you can check here.
The @deposits/ui-kit-vue package contains essential design elements that other components are built on as mentioned earlier. These fundamental components give the overall uniform feel to your web application.
Basic Usage
The @deposits/ui-kit-vue package contains components for the Vue UI kit that can be imported into your project. To make use of Vue’s “multi-word” component name convention, all UI components are prefixed with a “D.” Example: D-Button, D-Text etc.
<template>
<d-button>Click!</d-button>
</template>
<script setup>
import {
DButton
} from '@deposits/ui-kit-vue'
</script>
To see a complete list of the UI kit you can test it here.
A basic example of how this can be used to build a simple login page.
As seen in the block of code below the styling of the ‘d-box’ can be done in-line as well as the use of classes.
<template>
<d-box
width="100%"
height="100vh"
background="#fafafa"
display="flex"
justify-content="center"
align-items="center"
>
<d-box
display="flex"
flex-direction="column"
align-items="center"
max-width="500px"
>
<d-box
is="img"
alt=""
src="https://assets.deposits.com/img/logo/deposits/svg/logo_main.svg"
height="30px"
margin-bottom="1em"
/>
<d-card>
<d-text font-size="18px" font-weight="600" color="#212934" center
>Login to dashboard</d-text
>
<d-text center scale="subhead" margin-top="1em">
Welcome back, provide your login details below to access your
dashboard.</d-text
>
<d-box margin-top="1em">
<d-textfield
size="xlarge"
label="Email Address"
placeholder="example@gmail.com"
width="100%"
/>
</d-box>
<d-box margin-top="1em">
<d-textfield
size="xlarge"
label="Password"
is-password
placeholder="Enter password"
width="100%"
/>
</d-box>
<d-button
margin-top="1em"
color-scheme="primary"
size="xlarge"
responsive
>Login</d-button
>
<d-text
:is="RouterLink"
to="/reset-password"
class="text-cyan-500"
center
display="block"
margin-top="1em"
>Reset Password</d-text
>
</d-card>
</d-box>
</d-box>
</template>
<script setup>
import { DBox, DCard, DText, DTextfield, DButton } from "@deposits/ui-kit-vue";
import { RouterLink } from "vue-router";
</script>
As you can see the Deposit UI Kit supports inline styling as well as CSS classes, however as a fan of inline due to my experience using tailwind I didn’t make use of CSS classes.
A link to the codepen can be seen here.
Advantages of using Deposits UI Kit
Deposits UI Kit offers a huge amount of high-quality Vue & React components that are incredibly customizable. This makes Deposits Fintech UI Kit truly a joy to work with from a developer’s perspective.
Deposits UI Kit was designed with a couple of core principles in mind:
Style Props — All component styles can easily be overridden and extended to reduce the use of CSS.
Simplicity — Each component has a simple API and the documentation shows key real-world scenarios of using the component. The simplicity and modularity of the Deposits Ui Kit is my favorite feature.
For example, let’s take a look at the DBox component, which wraps around a div element. It’s the most abstract element in the Deposits Ui kit toolset and can be used to compose basically anything.
For example:
<d-box is="button" display="flex" >
Click me!
</d-box>
You can check out more components and play around with them here
3. Layout — The Deposits UI Kit has a pre-fixed layout structure that works well with each and every component within its ecosystem. So far it is made up of Auto Layout, Grid Layout and Responsive Layout.
4. Accessibility — The science of making a digital product accessible to older users, the visually challenged, the colorblind, and others is known as accessibility (including people on low contrast, low-quality displays). The Deposits Ui Kit follows the four principles of the Web Content Accessibility Guidelines (WCAG) making use of Color usage, Hierarchy and structure, Imagery and media and Copywriting.
5. Theming — The Deposits Ui Kit theming engine allows developers to customize the appearance and functionality of their web applications with ease. It offers a wide range of options for theme customization, such as color schemes, fonts, and other visual styles. Developers can select from a variety of color schemes or develop their own custom palettes with a simple interface.
Conclusion
As a software developer, I have used the Deposits Ui Kit to quickly create layouts that don’t just look good, but have great and clean code behind the scenes. Check out the Deposits website to learn more about this awesome component library.
Introduction
For example, let’s take a look at the DBox component, which wraps around a div element. It’s the most abstract element in the Deposits Ui kit toolset and can be used to compose basically anything.
For example:
<d-box is=”button” display=”flex” >
Click me!
</d-box>
You can check out more components and play around with them here
- Layout — The Deposits UI Kit has a pre-fixed layout structure that works well with each and every component within its ecosystem. So far it is made up of Auto Layout, Grid Layout and Responsive Layout.
- Accessibility — The science of making a digital product accessible to older users, the visually challenged, the colorblind, and others is known as accessibility (including people on low contrast, low-quality displays). The Deposits Ui Kit follows the four principles of the Web Content Accessibility Guidelines (WCAG) making use of Color usage, Hierarchy and structure, Imagery and media and Copywriting.
- Theming — The Deposits Ui Kit theming engine allows developers to customize the appearance and functionality of their web applications with ease. It offers a wide range of options for theme customization, such as color schemes, fonts, and other visual styles. Developers can select from a variety of color schemes or develop their own custom palettes with a simple interface.
Conclusion
As a software developer, I have used the Deposits Ui Kit to quickly create layouts that don’t just look good, but have great and clean code behind the scenes. Check out the Deposits website to learn more about this awesome component library.