geoblink/design-system

Collection of Vue components and Design Tokens used across Geoblink

Getting started

To install this library first you have to add it to your dependencies:

yarn add @geoblink/design-system

npm i -P @geoblink/design-system

After that, you must install it in your Vue instance:

import Vue from 'vue'
import GeoblinkDesignSystem from '@geoblink/design-system'

// ...

Vue.use(GeoblinkDesignSystem)

// ...

Finally you have to import the styles. You can import the built CSS styles or the raw SCSS file (which include the design tokens as variables):

@import '~@geoblink/design-system/dist/system.css';

@import '~@geoblink/design-system/dist/system.utils.scss';

To import only variables, mixins or functions without generated css classes to use on your own SCSS files you can import the tokens SCSS file

@import '~@geoblink/design-system/dist/tokens/system.tokens.scss';

Depending on your bundler settings you can import it in your JavaScript bundle, too:

import '@geoblink/design-system/dist/system.css'

import '@geoblink/design-system/dist/system.utils.scss'

Finally you'll be able use any component from the Design System like they are used in the demos:

<template>
  <geo-primary-button @click="doSomething()">
    Do something!
  </geo-primary-button>
</template>

<script>
export default {
  methods: {
    doSomething () {
      alert('Do something!')
    }
  }
}
</script>

Documentation

Documentation for latest stable version is available at https://design-system.geoblink.com/.