base-ui-components

base Angewandte Component Library

This is a component library developed by and used for projects of the base Angewandte (opens new window), a collection of applications for the staff and students at the University of Applied Arts Vienna (opens new window).

Installation and Usage

Install via:

npm i base-ui-components

You can either import each component individually:

main.js

import Vue from 'vue';
// import the components you would like
import { BaseAutcompleteInput, BaseCarousel } from 'base-ui-components';
// import the component css
import 'base-ui-components/dist/base-ui-components.css';
import App from './App';

const components = {
  BaseAutcompleteInput,
  BaseCarousel,
};

Object.entries(components)
  .forEach(([name, component]) => {
    Vue.component(name, component);
  });

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

or as complete package:

main.js

import Vue from 'vue';
// import the complete components bundle
import * as BaseUiComponents from 'base-ui-components';
// and the css
import 'base-ui-components/dist/base-ui-components.css';
import App from './App';

Object.entries(BaseUiComponents)
  .forEach(([name, component]) => {
    Vue.component(name, component);
  });

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

After adding the components, they can be used in your app globally, like so:

Component.vue

<template>
    <BaseAutocompleteInput
      label="test"
      ...
    />
    <BaseCarousel
      ...
    />
</template>

<script>
  export default {};
</script>

All available components, their usage and demos can be found in our styleguide (opens new window).

The code base is available at GitHub (opens new window).

Development Instructions

Customization

App color and certain other styles can be customized via css variables. In order to do so you can add the following variables to your main css/scss file:

:root {
  --app-color: #FF9800;
  --font-color: rgb(0, 0, 0);
  --font-color-second: rgb(107, 107, 107);
  --button-header-color: rgb(240, 240, 240);
  --input-field-color: rgb(200, 200, 200);
  --background-color: #f0f0f0;
  --box-color: #ffffff;

  --uploadbar-color: #999999;
  --switch-checked-color: #4d4d4d;
  --switch-svg-checked-color: #ffffff;
  --graytext-color: rgba(16, 16, 16, 0.3);
}

Then in your main.js file import your styles before the base-ui-components file. E.g.:

import './styles/app.scss';

import 'base-ui-components/dist/lib/base-ui-components.css';

License

See LICENSE

Support

This open-source project was developed (and more specifically - cross-browser tested) with the support of:

(opens new window)