Skip to content

Collection of Vue components and Design Tokens used across Geoblink


Notifications You must be signed in to change notification settings


Repository files navigation

NPM Build Status Codecov Greenkeeper badge

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'

// ...


// ...

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:

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

export default {
  methods: {
    doSomething () {
      alert('Do something!')

Button example


Documentation for latest stable version is available at