Yoonit-Labs / vue-yoonit-components

VueJS Atomic Design System framework

Vue Yoonit Components

The Atomic Design System framework

◻ 26 Vue Components to create modern UI's ◻ Grid and Flex layout components ◻ Unit tests with 100% coverage ◻ All components documented with Storybook ◻ Standardized code ◻ Consistency between interfaces ◻ The extended definition of Atomic Design including Bosons and Quarks ◻ SASS with BEM ◻ Fully customizable with themes provided by @yoonit/style

Sponsors

Platinum

Become a sponsor!

Atoms

• YooAnimation
• YooAvatar
• YooButton
• YooCheckButton
• YooDropdown
• YooIcon
• YooSelectDate
• YooStepper
• YooSwitch

Molecules

• YooButtonToggle
• YooCard
• YooFormGroup
• YooHeader
• YooListItem
• YooModal
• YooNotify
• YooPagination
• YooQuizQuestion
• YooSegmentedBar
• YooSelectButton
• YooTableAttribute

Bosons

• YooFlexLayout
• YooGridLayout
• YooScrollView

Quarks

• YooIndicator

Installation

npm i -s @yoonit/vue-components

Usage

VueJS Plugin

To use the components, import the library into your project's main.js file.

main.js

import Vue from 'vue'
import YoonitVueComponents from '@yoonit/vue-components'

Vue.use(YoonitVueComponents)

After that, you can access each component by calling it in the html template. It is not necessary to import manually each component in your template.

StoryBook

To see all the components, run the Storybook available in this project.

npm run storybook

After running the command above, an address will be available for you to access the component library. There you will be able to meet, interact and copy the code ready to put in your project.

To contribute and make it better

Clone the repo, change what you want and send PR. For commit messages we use Conventional Commits.

Contributions are always welcome!

---

Code with ❤ by the Yoonit Team