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
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.
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 :)
Can you speak about the long term VMware strategy of this project regarding on-going development? Part of my team's decision making process to use open source projects like this (nice work btw) is to get a feel if the primary contributors are in it for the long haul.
What would you say the primary motivation in switching from material2 or ng2-bootstrap to clarity would be? At my work we have an Angular 2 app still in development and have been rather dissatisfied with the available component libraries so far. We're at a point where it wouldn't be unreasonable to switch UI frameworks.
Additionally it looks like you have only implemented some of the material design spec. What was the reason for this / why not go full material?
Hi water42, I think material2 and other frameworks are fine frameworks and are worth your consideration.
We really built Clarity because we were in your position. No framework out there was able to provide us with what we needed to ship high quality, enterprise software but with modern and consumer-like UIs. We needed that framework to care deeply about user experience (not just provide code) and we wanted to make sure that framework is flexible enough that teams across the company (before we open sourced) can have the ability to understand it, build on top of it, etc.
We really looked around and every time we found something it had a part of the puzzle but not really enough of a part that we can depend on it.
Clarity does not depend on material (the design language), we are definitely inspired by material and others but we're building an end to end design system which includes the user experience and visual language aspects. Behind the components and patterns is a ton of research that we've doing throughout the past few months (and sometimes years depending on the data we have) and want to continue to do. One of our goals is to also share that research in case you can reach different conclusions so the community is able to keep us moving in the right direction.
This is a very nice looking set of controls with a lot of functionality. Thank you to the Clarity team for the contribution to the community. I've got a project in the works that has been screaming for something other than vanilla bootstrap :)
Thanks! Please let us know if we can help in anyway and if you have the time, we'd love to listen to feedback on both: the design system itself as well as the tools you used to use it. As a quick note, we've also open sourced Clarity-seed alongside Clarity to make it easier to get apps up and running on Clarity: https://github.com/vmware/clarity-seed so that might be worth a look too!
Great work! I like Material but this looks super slick and it feels like the documentation is more understandable. The design is really clean. I will consider this heavily when we upgrade our current ng1 app. Well done.
Awesome. Glad you like it. Make sure to share feedback with us as you go through that. We'd love to continue to improve the system itself as well as the documentation!
Hi Mokwa, thanks for your feedback. We shied away from recommending angular-cli in the very early stages, but now that it's become more stable, I see that it would be valuable to add that in our documentation. We'll be working on it very soon. I filed an issue for it on Github if you are interested in subscribing to it: https://github.com/vmware/clarity/issues/79.
I would recommend looking at https://ng-bootstrap.github.io/ for some code design of some of these components - as far as I can gather looking at the source code of Clarity, it appears to not be AoT-compliant, a big thing going forward with Angular due to the immense perf benefits it brings, and opens up the gate for also being able to use Web Workers/Service Workers.
Hi Bahamut, welcome! we'd love to chat with you guys (feel free to reach out to me with a DM on twitter). We'd love to share what we learned and learn from what you learned!
As for the slowness of the page, this is GitHub. It is currently down :(
As for AOT, that's definitely a priority for us (we were talking about it as a team yesterday and are working hard to make it a possibility for Clarity so we're definitely on the same page there).
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.
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.
Looks good, but comparing to other systems like this one but for React, it looks it's relying on plain HTML structure to compose layouts vs. using components system to generate and encapsulate HTML. From what I know Angular 2 supports components so I wonder why is this not leveraged here?
I think what might be happening is a small confusion between our deliverables. Some teams we worked with wanted to use as much of Clarity as possible but couldn't switch to Angular in the short term, so we made sure we could deliver "Clarity UI" and "Clarity NG" separately.
Clarity UI is pure CSS: you just include it on your page, use the correct markup and classes and our styles will be applied. Kind of like using Bootstrap without their JS (most of us have done this).
Clarity NG depends on Clarity UI for styling, but provides full-blown Angular 2 components with the correct markup in their templates, two-way binding, ... That's the easiest way to use Clarity, but it forces you to use Angular.
Unfortunately, our documentation doesn't split the two yet, it starts with the pure HTML/CSS version and then showcases the Angular 2 components after that. Probably explains the confusion.
what do you mean by this? you can create a component for any one of their html/css components with custom functionality and "plain html" (it's not really plain since it has two way data binding), then use and reuse that component like any other
Hi choward, you are not blind! :) We're working on a date picker. If you have specific requirements (especially around localization) we'd love to hear it to make sure we consider it but it is in the works1
[+] [-] jaffoneh|9 years ago|reply
[+] [-] wiradikusuma|9 years ago|reply
[+] [-] currywurst|9 years ago|reply
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...)
[+] [-] merb|9 years ago|reply
[+] [-] jonoc|9 years ago|reply
[+] [-] scwoodal|9 years ago|reply
[+] [-] water42|9 years ago|reply
What would you say the primary motivation in switching from material2 or ng2-bootstrap to clarity would be? At my work we have an Angular 2 app still in development and have been rather dissatisfied with the available component libraries so far. We're at a point where it wouldn't be unreasonable to switch UI frameworks.
Additionally it looks like you have only implemented some of the material design spec. What was the reason for this / why not go full material?
[+] [-] jaffoneh|9 years ago|reply
We really built Clarity because we were in your position. No framework out there was able to provide us with what we needed to ship high quality, enterprise software but with modern and consumer-like UIs. We needed that framework to care deeply about user experience (not just provide code) and we wanted to make sure that framework is flexible enough that teams across the company (before we open sourced) can have the ability to understand it, build on top of it, etc.
We really looked around and every time we found something it had a part of the puzzle but not really enough of a part that we can depend on it.
Clarity does not depend on material (the design language), we are definitely inspired by material and others but we're building an end to end design system which includes the user experience and visual language aspects. Behind the components and patterns is a ton of research that we've doing throughout the past few months (and sometimes years depending on the data we have) and want to continue to do. One of our goals is to also share that research in case you can reach different conclusions so the community is able to keep us moving in the right direction.
[+] [-] jbigelow76|9 years ago|reply
[+] [-] jaffoneh|9 years ago|reply
[+] [-] hacktothefuture|9 years ago|reply
[+] [-] jaffoneh|9 years ago|reply
[+] [-] Mokwa|9 years ago|reply
[+] [-] jeeyun|9 years ago|reply
[+] [-] Bahamut|9 years ago|reply
The demo website loads very slow :( .
I would recommend looking at https://ng-bootstrap.github.io/ for some code design of some of these components - as far as I can gather looking at the source code of Clarity, it appears to not be AoT-compliant, a big thing going forward with Angular due to the immense perf benefits it brings, and opens up the gate for also being able to use Web Workers/Service Workers.
[+] [-] jaffoneh|9 years ago|reply
As for the slowness of the page, this is GitHub. It is currently down :(
As for AOT, that's definitely a priority for us (we were talking about it as a team yesterday and are working hard to make it a possibility for Clarity so we're definitely on the same page there).
[+] [-] coderageous|9 years ago|reply
AoT-compliance is something we're looking into. Definitely on the sooner end of our roadmap.
[+] [-] bertan|9 years ago|reply
[+] [-] kimshibal|9 years ago|reply
[+] [-] jaffoneh|9 years ago|reply
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...
[+] [-] methyl|9 years ago|reply
[+] [-] eudes|9 years ago|reply
Clarity UI is pure CSS: you just include it on your page, use the correct markup and classes and our styles will be applied. Kind of like using Bootstrap without their JS (most of us have done this).
Clarity NG depends on Clarity UI for styling, but provides full-blown Angular 2 components with the correct markup in their templates, two-way binding, ... That's the easiest way to use Clarity, but it forces you to use Angular.
Unfortunately, our documentation doesn't split the two yet, it starts with the pure HTML/CSS version and then showcases the Angular 2 components after that. Probably explains the confusion.
I hope this helped!
[+] [-] water42|9 years ago|reply
[+] [-] g_mulholland|9 years ago|reply
[+] [-] choward|9 years ago|reply
[+] [-] jaffoneh|9 years ago|reply
[+] [-] luck_fb|9 years ago|reply