Grace - Design System For Vue Applications

Overview

logo of grace repository

Grace

Design System For Vue Applications

Explore the docs »

View Demo · Report Bug · Request Feature

components of grace repository

Built With

📦 Install

npm install --save @trendyol-js/grace

or

yard add @trendyol-js/grace

🔨 Usage

Import styles manually:
@import "[email protected]/grace/css/root";
@import "[email protected]/grace/css/system";
@import '~vue2-datepicker/index.css'; // for datepicker
Components:
Base Button
">
<template>
  <div class="g-p-10">
    <GButton size="medium">Base ButtonGButton>
  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.

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

License

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

Vue Layout System is a pack of Vue components that solve daily layout problems.

A pack of Vue components that solve daily layout problems

boyin.lee 8 Jul 2, 2021
Vue Layout System is a pack of Vue components that solve daily layout problems.

Vue Layout System is a pack of Vue components that solve daily layout problems.

boyin.lee 6 May 30, 2021
Flexbox based responsive fraction grid system

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js Live Demo and Full Documentation <container> <grid vertical="middle" :rwd

Bartłomiej Kozal 88 May 7, 2021
KFlowUI - Flow UI Design based on Vue Cli

Vue components inspired by Microsoft's Fluent Design System

Ken 14 Jul 5, 2021
Mobile UI Components based on Vue & WeUI

Be Cool with [email protected]^2.3.0 and WeUI. Live Demo >> Sponsors 我们的产品 Requirements 暂未适配 [email protected],请注意。 [email protected]^2.3.0(for .sync modifier) [email protected]^2.0 [email protected]^7.6

Airyland 17.5k Jul 22, 2021
UI Component Library Base on Vue.js(2.x) and Bulma

Attention I'm very sorry about the lack of concern about this library Recently. So busy in doing other things and I have no time to maintain it. I wil

Chenz 1.6k Jul 23, 2021
Starter responsive dashboard layout built with tailwindcss & vue 3 (vitejs)

Starter Responsive Dashboard Layout Starter responsive dashboard layout built with tailwindcss & vue 3 (vitejs) See live Another projects Alpine versi

Ahmed Kamel 12 Jun 9, 2021
Responsive grid system based on Bootstrap for Vue

Vue Grid Responsive Responsive grid system based on Bootstrap for Vue. • • Installation NPM vue 2.0 npm i vue-grid-responsive // OR yarn add vue-grid-

André Lins 17 Jun 20, 2021
A flexbox grid system.

VueFlex A flexbox grid system. demo Try it out! setup npm npm install @seregpie/vueflex Register the components globally. import Vue from 'vue'; impor

Sergej Sintschilin 13 Oct 3, 2020
:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Yev Vlasenko 891 Jul 24, 2021
A pure vue responsive masonry layout without direct dom manipulation and ssr support.

vue-masonry-wall A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending. I created this becaus

Fuxing Loh 117 Jul 22, 2021
Vue smarter layout components. Based on css flexbox. Support responsive design, server side render. 5 KB gzipped.

vue-colrow Smarter layout components. Based on css flexbox. Support responsive design, server side render. 3 KB gzipped. Document. It also has a React

Xinxin 6 Apr 21, 2021
LayoutDesigner(svg editor) 基于 vue3.0 开发的,可以自定义拖入的图形,实现拖拽绘制设备layout

LayoutDesigner(svg editor) 基于 vue3.0 开发的,可以自定义拖入的图形,实现拖拽绘制设备layout

YRK 3 May 17, 2021
Official Vue.js wrapper for fullPage.js http://alvarotrigo.com/vue-fullpage/

Vue-fullpage.js Official Vue.js wrapper for the fullpage.js library. Demo online | Codepen fullpage.js Extensions By @imac2. Thanks to VasiliyGryaznoy

Álvaro 1.6k Jul 23, 2021