Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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'

// ...

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>

Button example

Documentation

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

About

Collection of Vue components and Design Tokens used across Geoblink

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published