Proteus

Proteus is a front-end framework. It is an implementation of the Smart Residential design components. Proteus is built on top of Vue v3 and Vuetify v4.

It is based on the following specs.

• Smart Residential Design Guidelines
• Foundational Components
• Core Components

Installation

An easy way to get a Vue project up and running is to use Vite.

npm create vite@latest

Install Vuetify. When prompted, choose the Vite Preview option.

vue add vuetify

Install Proteus.

npm i august-ui-components

At this point, your src/main.js file should look like this.

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'

loadFonts()

createApp(App)
  .use(vuetify)
  .mount('#app')

Now, add Proteus as a plugin and import it's CSS.

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'

import proteus from 'august-ui-components'
import '../public/august-ui-components/css/style.css'

loadFonts()

createApp(App)
  .use(vuetify)
  .use(proteus)
  .mount('#app')

During installation, Proteus creates files and folders in public/august-ui-components.

• css
  • style.css - The CSS created during Proteus' build process.
  • styles.scss - The source SASS file that Proteus uses internally. Import this to use SCSS mixins.
• fonts - The source files for Proxima Nova fonts. These are automatically imported in the css/style.css file. You shouldn't have to import them explicitly.
• logos

Usage

Proteus contains Vue components and lots of CSS variables, classes, and mixins.

Components

Because you imported Proteus as a plugin for Vue, all components are available globally. There is no need to import components in individual component files.

<!-- App.vue -->

<template>
  <a-btn>Click Me!</a-btn>
</template>

CSS

Classes

You should primarily use CSS classes to style your HTML.

<p class="text-primary">Lorem ipsum dolor sit amet</p>

Variables

Proteus uses a number of CSS variables internally to create it's CSS rules. You can use these CSS variables to create your own rules.

/* .css */

p {
  color: var(--text-primary);
}

<!-- .html -->

<p>This text will have the primary color.</p>

Mixins

For every CSS class Proteus has, it also has a SCSS mixin. To use these, you have to import the SCSS file first.

<template>
  <p>This text will have the primary color.</p>
</template>

<style lang="scss">
@use '/public/august-ui-components/css/styles';

p {
  @include styles.text-primary;
}
</style>