Grace: Design System For Vue.js Applications

Grace

Design System For Vue Applications

Built With

📦 Install

npm install --save @trendyol-js/grace

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

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

Download Details:

Author: Trendyol
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/Trendyol/grace
License: Distributed under the MIT License. See LICENSE for more information.

#vue #vuejs #web-development #webdev