Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/munierujp/matter-design
Design system for components
https://github.com/munierujp/matter-design
Last synced: about 1 month ago
JSON representation
Design system for components
- Host: GitHub
- URL: https://github.com/munierujp/matter-design
- Owner: munierujp
- Created: 2019-10-07T05:55:08.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-02T17:32:14.000Z (7 months ago)
- Last Synced: 2024-10-13T10:21:03.002Z (3 months ago)
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Matter Design
Design system for components
## Component types
### Elements
Elements are abstract components like HTML elements. These can contain Elements.
### Matters
Elements are concrete components. These can contain Elements, Matters.
### Pages
Pages are page components. These can contain Elements, Matters.
## Example
### Nuxt.js
```
.
├── components
│ │── elements
│ │ └── AppButton.vue
│ └── matters
│ └── AppLoginButton.vue
├── layouts
│ └── default.vue
└── pages
└── index.vue
```
#### Elements
`components/elements/AppButton.vue`:
```vue
export default {
methods: {
click (e) {
this.$emit('click', e)
}
}
}
```
#### Matters
`components/matters/AppLoginButton.vue`:
```vue
Login
import AppButton from '~/components/elements/AppButton'
export default {
components: {
AppButton
},
methods: {
login () {
// login
}
}
```
#### Pages
`layouts/default.vue`:
```vue
```
`pages/index.vue`:
```vue
Cancel
import AppButton from '~/components/elements/AppButton'
import AppLoginButton from '~/components/matters/AppLoginButton'
export default {
components: {
AppButton,
AppLoginButton
}
}
```
## Badge
You can use the badge to show that your project is using Matter Design.
[](https://github.com/munierujp/matter-design)
Markdown:
```md
[](https://github.com/munierujp/matter-design)
```
HTML:
```html
```