Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yoonit-labs/vue-yoonit-components

VueJS Atomic Design System framework
https://github.com/yoonit-labs/vue-yoonit-components

atomic-design design-system hacktoberfest vuejs vuejs-components

Last synced: 3 months ago
JSON representation

VueJS Atomic Design System framework

Host: GitHub
URL: https://github.com/yoonit-labs/vue-yoonit-components
Owner: Yoonit-Labs
License: mit
Created: 2020-12-03T18:54:52.000Z (about 4 years ago)
Default Branch: development
Last Pushed: 2024-05-01T16:52:45.000Z (9 months ago)
Last Synced: 2024-05-02T11:40:58.279Z (9 months ago)
Topics: atomic-design, design-system, hacktoberfest, vuejs, vuejs-components
Language: JavaScript
Homepage:
Size: 21.4 MB
Stars: 12
Watchers: 2
Forks: 0
Open Issues: 8
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        
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](#atoms)

* [YooAnimation](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Animation)

* [YooAvatar](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Avatar)

* [YooButton](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Button)

* [YooCheckButton](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/CheckButton)

* [YooDropdown](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/DropDown)

* [YooIcon](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Icon)

* [YooSelectDate](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/SelectDate)

* [YooStepper](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Stepper)

* [YooSwitch](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/atoms/Switch)

### [Molecules](#molecules)

* [YooButtonToggle](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/ButtonToggle)

* [YooCard](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/Card)

* [YooFormGroup](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/FormGroup)

* [YooHeader](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/Header)

* [YooListItem](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/ListItem)

* [YooModal](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/Modal)

* [YooNotify](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/Notify)

* [YooPagination](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/Pagination)

* [YooQuizQuestion](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/QuizQuestion)

* [YooSegmentedBar](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/SegmentedBar)

* [YooSelectButton](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/SelectButton)

* [YooTableAttribute](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/molecules/TableAttribute)

### [Bosons](#bosons)

* [YooFlexLayout](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/bosons/FlexLayout)

* [YooGridLayout](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/bosons/GridLayout)

* [YooScrollView](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/bosons/ScrollView)

### [Quarks](#quarks)

* [YooIndicator](https://github.com/Yoonit-Labs/vue-yoonit-components/tree/development/src/components/quarks/Indicator)

## Installation

```javascript

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`

```javascript

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. 

```javascript

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**](https://yoonit.dev/) Team