Oasis Style

Universal Oasis styling.

Usage

Import oasis.scss into the top-level component. The project must be able to build scss files correctly (using scss-loader in webpack for example)

// src/main.ts
import '@oasislabs/style';

Import variables.scss into style/variables.scss (or vueConfig css.loaderOptions.scss.additionalData)

// src/style/variables.scss

// Override Vuetify
// This is auto loaded https://vuetifyjs.com/en/features/sass-variables/#vue-cli-install
// Explore variables https://vuetifyjs.com/en/features/sass-variables/#variable-api
@import "@oasislabs/style/scss/utilities/variables.scss";

Import and use any component available in styles/vue/components

// src/component.vue
import { Button } from '@oasislabs/style/vue/components';

Development

To help facilitate the development of new components, Storybook has been added.

When developing new components, create a story along with it.

To run storybook,

npm install
npm run storybook

Today, Storybook is set up for Vue, but it can also be added for other frameworks in the future.