arielsalminen / vue-design-system

An open source tool for building UI Design Systems with Vue.js
https://vueds.com
MIT License
2.17k stars 224 forks source link

Is it possible to add another level such as a molecules? #31

Closed ingvoo closed 5 years ago

ingvoo commented 6 years ago

Or rename the structure hierarchy. Example: rename /templates to /pages?

arielsalminen commented 6 years ago

@ingvijonasson It is definitely possible to add yourself, but compared to Atomic Design, this setup doesn’t include molecule level at all. It’s omitted to help reduce the complexity of the system for its end-users.

This comes from my personal experience working on different systems projects, where I’ve noticed that it just adds unnecessary overhead and slows down decision making in larger teams. With just elements, patterns and templates this process is much faster since you only need to answer a few questions to determine what type of a component it is.

So for example: If you wonder whether you should create an Element or a Pattern, ask yourself: “can this be broken down into smaller pieces?” If the answer is yes, there’s a high chance that it should be a Pattern instead of an Element.

In addition, I don’t think “pages” as a name make as much sense as “templates” since they exist to document the layout and structure of a section or the entirety of an interface. So they could be something else than pages too, and hence the name could be misleading.

I will be working on the documentation more soon and also blogging about the usage, but in the mean time this might be helpful:

structure

ingvoo commented 6 years ago

Thank you for the detailed answer @viljamis. I have already read through all the nice documentation and really understand the choices that have been made in the system for making it simple. I am not necessary trying to follow atomic design but just trying to figure out if it is possible to change the naming or add another layer or section when needed.

I found out in the meantime that you can simply add another section in styleguide.config.js for the styleguide and import them in system.js.

arielsalminen commented 6 years ago

@ingvijonasson yes, naming is something you can definitely tweak to suit your or your team’s workflow. Currently it might require some tweaks to the styleguide styles as well tho, but I will simplify the logic there as soon as I find time. In the meantime, maybe this is worth some documentation, do you think? At least giving guidelines on how to change the naming of things (if wanted/needed)?

ingvoo commented 6 years ago

I think it is well worth in the documentation. What is missing is simply that:

I can help out with this.

arielsalminen commented 5 years ago

@ingvijonasson Still willing to help out with the documentation? :-)

arielsalminen commented 5 years ago

I’ll close this one for now since it isn’t really an issue, but more of a documentation question! Let me know if you want to re-open.