Grace

Design System For Vue Applications

Explore the docs »

View Demo · Report Bug · Request Feature

Built With

📦 Install

npm install --save @trendyol-js/grace

yarn add @trendyol-js/grace

🔨 Usage

Font installation:

Grace uses Google’s Rubik font. Add to style file

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');

or your main index.html file.

<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

If you want to use another font, follow the instructions above for the font you will use and add the following code to your style file

:root {
    --font-family-base: 'Your Font Name';
}

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

License

Distributed under the MIT License. See LICENSE for more information.

fishuke/grace