Skip to content
Collection of Vue components and Design Tokens used across Geoblink
JavaScript Vue CSS Other
Branch: master
Clone or download
riboher Merge pull request #20 from geoblink/feature/CORE-7965-Geo-input-fixe…
…d-width-dropdown

Feature/core 7965 geo input fixed width dropdown
1
Latest commit d373907 Jan 21, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
.vscode
.vuepress
_templates
build
config
docs
src
test/unit
.babelrc
.eslintignore
.eslintrc
.gitignore
.hygen.js
.npmignore
.postcssrc.js
.theo.setup.js
.travis.yml
CHANGELOG.md
LICENSE
README.md
package.json
tsconfig.json
vue-shims.d.ts
yarn.lock

README.md

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';

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/.

You can’t perform that action at this time.