Clarity Design System for Angular 2

#1

Post by qHydra » Wed, Nov 16, 2016, 5:56 AM UTC

Clarity Design System for Angular 2
vmware.github.io

Re: Clarity Design System for Angular 2

#2

Post by jaffoneh » Wed, Nov 16, 2016, 7:15 AM UTC

Hi HN, I lead the Clarity team. Would love to get your opinion and feedback! Clarity is fully open source (we open sourced it this morning). Our repo is here: https://github.com/vmware/clarity. You can also take a look at the Clarity Seed for a quick way to start building Clarity-based applications: https://github.com/vmware/clarity-seed

Re: Clarity Design System for Angular 2

#3

Post by jonoc » Wed, Nov 16, 2016, 7:41 AM UTC

jaffoneh wrote: post #2

Hi HN, I lead the Clarity team. Would love to get your opinion and feedback! Clarity is fully open source (we open sourced it this morning). Our repo is here: https://github.com/vmware/clarity . You can also take a look at the Clarity Seed for a quick way to start building Clarity-based applications: https://github.com/vmware/clarity-seed

Looks very nice. I've hated angular material docs due to the overly complex examples. These are simple and to the point. I'm keen to try this out for my next a2 project :)

Re: Clarity Design System for Angular 2

#4

Post by jaffoneh » Wed, Nov 16, 2016, 7:43 AM UTC

jonoc wrote: post #3

jaffoneh wrote: post #2

Hi HN, I lead the Clarity team. Would love to get your opinion and feedback! Clarity is fully open source (we open sourced it this morning). Our repo is here: https://github.com/vmware/clarity . You can also take a look at the Clarity Seed for a quick way to start building Clarity-based applications: https://github.com/vmware/clarity-seed

Looks very nice. I've hated angular material docs due to the overly complex examples. These are simple and to the point. I'm keen to try this out for my next a2 project :)

Glad you like it! If you go through the docs as you start on your project and have feedback (either on the docs themselves or on the components/design system) please feel free to either reach out or file an issue on GitHub!

Re: Clarity Design System for Angular 2

#5

Post by bertan » Wed, Nov 16, 2016, 8:41 AM UTC

As a system designed for "designers" with guidelines, I expected something like Material Design from Google. However, I am very disappointed, even the website UX is very designer unfriendly IMHO. I cannot see a download link or a direction for it in the home page for the mentioned Sketch file.

Re: Clarity Design System for Angular 2

#6

Post by currywurst » Wed, Nov 16, 2016, 8:45 AM UTC

jaffoneh wrote: post #2

Hi HN, I lead the Clarity team. Would love to get your opinion and feedback! Clarity is fully open source (we open sourced it this morning). Our repo is here: https://github.com/vmware/clarity . You can also take a look at the Clarity Seed for a quick way to start building Clarity-based applications: https://github.com/vmware/clarity-seed

Great work and kudos to the Clarity team!

This seems to be a great option for ng2 projects considering the NG2 Material Design is currently in alpha, whereas this looks more "ready-to-go". To my more Bootstrap familiar mind, I feel like I "get" it much faster than some Material Design examples I've seen.

Do you guys have plans for a Tree component ? Would be great if it was and extension to the DataGrid (something like SlickGrid: http://mleibman.github.io/SlickGrid/examples/example5-collap...)

Re: Clarity Design System for Angular 2

#7

Post by jaffoneh » Wed, Nov 16, 2016, 8:48 AM UTC

bertan wrote: post #5

As a system designed for "designers" with guidelines, I expected something like Material Design from Google. However, I am very disappointed, even the website UX is very designer unfriendly IMHO. I cannot see a download link or a direction for it in the home page for the mentioned Sketch file.

Hi bertan,

First, thanks for the feedback. Really appreciate you taking the time to provide it. We've actually looked at Material and other visual languages/design systems out there as we do this. We learn from those that started this before us and will continue to do so.

One of the things we think is unique about Clarity is our attempt to get an end to end design system built by a single team of UX and UI engineers working side by side. This includes the UX guidelines (both generic patterns as well as design guidelines for each component), as well as the HTML/CSS/Angular2 components. As for downloading the sketch template for example, that is a pretty good point, I created an issue on github for us to track this and take a look [0].

Just in case you're still looking for it, a link to the Sketch template is available from get started and documentation. I am also adding it here to make it easier to find [1]

We're really looking forward to hear more feedback in order to continue improving Clarity.

[0] https://github.com/vmware/clarity/issues/68 [1] https://vmware.github.io/clarity/images/sketchTemplates/Clar...

Re: Clarity Design System for Angular 2

#8

Post by jaffoneh » Wed, Nov 16, 2016, 8:49 AM UTC

currywurst wrote: post #6

jaffoneh wrote: post #2

Hi HN, I lead the Clarity team. Would love to get your opinion and feedback! Clarity is fully open source (we open sourced it this morning). Our repo is here: https://github.com/vmware/clarity . You can also take a look at the Clarity Seed for a quick way to start building Clarity-based applications: https://github.com/vmware/clarity-seed

Great work and kudos to the Clarity team! This seems to be a great option for ng2 projects considering the NG2 Material Design is currently in alpha, whereas this looks more "ready-to-go". To my more Bootstrap familiar mind, I feel like I "get" it much faster than some Material Design examples I've seen. Do you guys have plans for a Tree component ? Would be great if it was and extension to the DataGrid (something li…

A tree component is definitely on the roadmap. If you have specific cases in mind, we'd love to discuss further in the GitHub issue filed [0] but if what you're looking for is a generic tree component, that's coming pretty soon!

I wanted to make sure you saw the Datagrid component [1] we have. We just published it so please feel free to provide us with feedback and/or raise any issues!

[0] https://github.com/vmware/clarity/issues/67 [1] https://vmware.github.io/clarity/documentation/datagrid

Re: Clarity Design System for Angular 2

#9

Post by kimshibal » Wed, Nov 16, 2016, 8:50 AM UTC

bertan wrote: post #5

As a system designed for "designers" with guidelines, I expected something like Material Design from Google. However, I am very disappointed, even the website UX is very designer unfriendly IMHO. I cannot see a download link or a direction for it in the home page for the mentioned Sketch file.

RTFM. https://vmware.github.io/clarity/get-started/

Re: Clarity Design System for Angular 2

#10

Post by merb » Wed, Nov 16, 2016, 9:02 AM UTC

jaffoneh wrote: post #2

Hi HN, I lead the Clarity team. Would love to get your opinion and feedback! Clarity is fully open source (we open sourced it this morning). Our repo is here: https://github.com/vmware/clarity . You can also take a look at the Clarity Seed for a quick way to start building Clarity-based applications: https://github.com/vmware/clarity-seed

Even if you are VMWare with thousands of developers, do you really think that you can keep up with the speed of development from Angular?