Grace

A Beautiful Design System For Vue.js.

grace-logo

View Demo View Github

? Install

npm install --save @trendyol-js/grace

or

yard add @trendyol-js/grace

? Usage

Import styles manually:
@import "~@trendyol-js/grace/css/root";
@import "~@trendyol-js/grace/css/system";
@import '~vue2-datepicker/index.css'; // for datepicker
Components:
<template>
  <div class="g-p-10">
    <GButton size="medium">Base Button</GButton>
  </div>
</template>

<script>
  import GButton from '@trendyol-js/grace/core/GButton';
  
  export default {
    name: 'Component',
  }
</script>
Plugins:
import GToasterPlugin from '@trendyol-js/grace/plugins/GToaster.plugin';

Vue.use(GToasterPlugin);
Directives:
<template>
  <div v-click-outside="hide()" />
</template>

<script>
  import ClickOutside from '@trendyol-js/grace/directives/ClickOutside';
  
  export default {
    name: 'Component',
  }
</script>

?‍? Local Development

Project setup
npm install
Compiles and hot-reloads for development
npm run storybook:start
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Run your unit tests
npm run test:unit