# Get Started

A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.

The design system accomplishes this by providing UI components andalong with guidelines on how they are to be used within our software.

Our components are built using css, to bring style and life to the elements and a front-end framework called Vue.js to make them dynamic and reusable.

Currently there is a dependency with Bootstrap v4.1.

This section of the design system is seperated into two categories, foundation and components. The foundation section lays the ground work that the components are then built upon.

# How to use a component

Components refer to the UI elements that support interaction within the user interface. Each component will has a use case, placement, code template and examples manipulating that template with vue components.

Both the vue component and code template are need to get the component to work as desired. The code template is a file containing all of the logic and styles for the vue component to manipulate.

Here is an example of the component code for the Buttons:

<Button-Primary/>

Here is an example of the template code for the Buttons:

<template>
    <button class="btn btn-primary btn-md">
        <slot>

        </slot>
    </button>
</template>

<style scoped lang="scss">
    @import "styles/variables";

    .btn-primary {
        @include btn-color($primary, #FFF);
    }

    .btn-primary:disabled {
        @include btn-color($lightest, $mid);
        box-shadow: none;
        cursor: not-allowed;
        background: $lightest;
        color: $mid;
    }

    .button-icon {
        padding-right: 8px;
    }
</style>