# Project set up
The vite options and critical packages used in retain.
- [Vite](https://vitejs.dev/)
- [vue 3](https://vuejs.org/)
- [prettier](https://prettier.io/)
- [vitest](https://vitest.dev/)
- [cypress](https://www.cypress.io/)
- [typescript](https://www.typescriptlang.org/)
- Critical packages
- [pinia](https://pinia.vuejs.org/): state management
- [scss](https://sass-lang.com/): styles
- [vue-router](): routing
- [axios](https://axios-http.com/): requests

# Style guide for vue components

[Script setup](https://vuejs.org/api/sfc-script-setup.html#basic-syntax) should be used in all new Vue single file components
An empty Vue component set up correctly should look like this 99% of the time. (the order of the three main tags doesn't matter)

<template>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
</style>

# CSS

Use [Css Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) for layout and positioning as much as possible [Flex](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is occasionally acceptable for super simple components. Style and design wise what is chosen isn't super important. In Retain most things are hand made and controlled with a handful of scss variables.

#### Retain's SCSS Variables File

$cb_primary: hsl(256, 30%, 52%);
$cb_secondary: hsl(189, 81%, 30%);
$cb_tertiary: hsl(224, 70%, 46%);

$cb_link: #3A5B98;

$cb_text: hsl(0, 1%, 25%);
$cb_text_background: hsl(0, 1%, 100%);

$cb_neutral: hsl(0, 0%, 95%);

$gap: 1rem;
$shadow: 0 0 3px 1px grey;
$radius: 3px;

#### SCSS variables example

Here is an example of a simple card component using the scss variables

<template>
  <section class="graph_card">
    <article class="top">
      <h1 class="graph_title">{{ title }}</h1>
      <CBButton @click="btnEmit" v-if="button?.exists" variant="primary">{{
        button.text
      }}</CBButton>
    </article>
    <slot></slot>
  </section>
</template>

<script setup lang="ts">
...
</script>

<style lang="scss" scoped>
.graph_card {
  background: $cb_text_background;
  padding: $gap;
  border-radius: $radius;
  box-shadow: $shadow;
  display: grid;
  grid-template-rows: auto 1fr;
  .top {
    display: flex;
    justify-content: space-between;
    .graph_title {
      font-size: 1.8rem;
    }
  }
}
</style>