I would like advice on how best to move my company toward using VMWare's Clarity system, or something very much like it. Should we use it as a template? Fork it? Integrate parts of it over time?
By Q4 of 2018 we would like to:
have a decent Design System
develop in Angular 2
use Bootstrap 4
Currently we are here:
No Design System
Bootstrap 3.3.7
AngularJS
Any suggestions will be helpful!
The Clarity Design System is composed of several parts.
There are Design resources - sketch templates for the light and dark themed components as well as documentation and guidelines for using them. In addition, we publish three packages
#clr/icons - an icons library that can be used standalone. The icons are web-components and can be used like any other element in a project after you integrate it into the app
#clr/ui - standalone html/css for clarity themed components. For obvious reasons more advanced components like the datagrid or wizard are not part of this
#clr/angular - Clarity components for Angular applications.
To answer a few of your questions.
Q. Should we use it as a template?
A. No, Clarity (#clr/angular) should be integrated into your Angular application so you can use the components to build up the application with them.
Q. Fork it?
A. you are welcome to fork the code, its open source software (MIT License). If you want to stay up to date with the latest bug fixes and enhancements though I would suggest integrating it into a project and keeping up with the incremental releases. We generally try to release once a week and callout breaking changes at least two versions with deprecations.
Q. Integrate parts of it over time?
A. I (as a Clarity UI Engineer) would recommend adopting it fully from the beginning when you start your next Angular app. If not, you run the risk of competing design systems and conflicting styles and UX patterns.
We do not recommend using Clarity with Bootstrap 4. Even though our grid is based on an earlier beta version of Bootstrap 4. We would like to remove that as a dependency in the future.
Related
I'm starting a new website from scratch and I was wondering if React UI Framework are worth the try for building a website, or it's better to create my own components, grid etc...
I really like projects such as ElementalUI's Take on bootstrap3, MaterialUI forms components, Grommet, but they don't mix well together, some are using SASS, other LESS...
During previous projects, I've used some UI frameworks, but when I needed to do something that was not thinked by the creator of the framework, it was less complicated to create it myself than finding a workaround, and often more elegant.
I'm thinking that building my own React components using SASS and CSS3 could be the best solution.
Thanks!
This is an excellent and complicated to answer question at the same time.
I've been involved in few React projects, with different teams, and most of time, we were composing our components sets with customs style and when we needed a specific thing, the way to go was npm, for instance a custom range date picker.
Full disclosure; I wrote a great deal of ElementalUI.
I recommend researching each of the available UI frameworks and deciding whether they have the components and functionality required for your project. I also recommend looking into the components themselves to see how and why the authors solved a problem the way they did - that's probably the most valuable thing.
Elemental, and most other frameworks, are really helpful for applications where the UI must be consistent throughout. My own experience has been that for websites you're better off building your own components.
In the near future, I have to update a bigger XPage application (development time more than three years) now running on a Domino Server 8.5.3 FP6 to Domino Server 9. In this application I am using IBM OneUIv2.1 but I am unsure if I should use it further. Unfortunately I have no experience with Bootstrap, however in one of the last Extension Library releases an essential part of the update was for Bootstrap:
This release is the sixteenth IBM Notes Domino 9.0.1 version of the
XPages Extension Library (ExtLib) to OpenNTF. This release contains a
significant Bootstrap upgrade to 3.3.6.
So for me it seems to be the XPages CSS Framework of the future?
Am I right?
Thanks in advance for sharing your experience!
I use oneUI at the day job. There are some very good things about it. However, I'm trying to get my company and all my personal work migrated to Bootstrap. OneUI is not really responsive. Even if that's not a big issue for you the biggest reason to avoid oneUI is the lack of documentation and materials for it. There actually is documentation for oneUI But nothing like Bootstrap - the most popular framework going as far as I know. Heck right here on StackOverFlow over 59,000 questions have been asked on Bootstrap. There's tons of resources like bootsnipp.com. In my opinion it's almost a no brainer that Bootstrap should be used over oneUI if at all possible.
As long as IBM won't deliver us the new "Verse" UI (which I'd refer to as OneUI Next) I'd prefer the Bootstrap UI as it is responsive. I wouldn't say that it's IBM's future UI framework as departments seem to develop indepently IMHO. The Ireland guys are proclaiming Bootstrap but the IBM Design team propagate their own styles. As always: not a straight strategy here.
But when it comes to application modernization I'd prefer Bootstrap. The next iteration will include Bootstrap 4, too (the final version).
Anyway, using Bootstrap instead of OneUI will deliver more straight and simplified CSS classes other than the "LotusUI" stuff in OneUI.
Just my 2 cents.
Yes, I agree you are right. IBM is staying in front of the curve in supporting Bootstrap for the future. I don't believe that they are investing any more resources in OneUI at this point in time. (Good news, IMO)
On the surface, your question appears opinion based, but really you need to be concerned with the level of support/investment by the IBM XPages team.
If you haven't view it already, I would recommend the TLCC webinar given this month (Feb 2016) by Brian Gleeson and Martin Donnelly on Responsive Design using Bootstrap with XPages. The team is being extremely proactive in preparing to support Bootstrap 4 which isn't even released yet.
This is the link to the webinar which is very well done: https://youtu.be/0ylbKHyiFyY
a big advantage with Bootstrap in comparison with oneUI is that there are many sites where snippets for controls / layouts / panels are being shared.
if you stick close to the oneUI defintion you are limited in your presentation options.
also Bootstrap is targetted against multiple clients (mobil / desktop / large) which oneUI is not. so if that is a requirement I definitely recommend bootstrap above oneUI.
there is a learning curve with Bootstrap but manageable.
with Bootstrap I hardly use dojo anymore and disable it in xpages whenever possible.
there are also limitations with bootstrap, e.g. motion awareness but you can overcome them with plugins. you would probably experience the same limitations with oneUI.
once you go bootstrap, you can't get back (to oneUI).
I have little experience with other front-end frameworks so I can not advice on that.
I am currently building a small meteor based quoting tool application. I would like to add Google's material design to it and and having a hard time to decide what is the best way to do that.
I would like to hear from someone who has done this, am I in right track and what are the potential issues with solution options below, or is there better existing solution?
Installing polymer to public folder and use bower to build the client packages.
Installing materialize CSS using Atmosphere package https://atmospherejs.com/materialize/materialize
Using momentum https://atmospherejs.com/percolate/momentum to roll my own components https://atmospherejs.com/percolate/momentum
Elements I want to use are paper-elements + Google drive and sheets, plus might need more in the future.
If you go the Polymer route, you will be able to use the paper-styles component. It would require manual application, but it'd give you the most authentic Material Design experience. In addition, you can use the various paper elements directly, swapping out normal input elements for paper-input, for example.
I´m planing to use Cordova v3 to develop a generic application to target mobile devices using HTML/CSS. Which is the best solution in order to reuse most of the html but having the visual style for each mobile platform? Which will be the best css/framework to use in this case (preferably free)?
Thanks in advance.
As you said "but having the visual style for each mobile platform?" I understand you are searching for a native look in the apps. the other answers are good frameworks however unless you want to spend time tweaking css they will not look similar to a native UI (visually).
I have worked with Twitter bootstrap and jQM. So far so good but for a native UI look I will go for the following options which I think are the best.
These are my top choices after spending a considerable time looking for a jQM alternative as I am not really happy with it in specific aspects.
EDIT: I am adding two new options based on my experience and what I have found so far (ionic and onsen ui).
Ionic Framework
http://ionicframework.com/
Intended to develop hybrid app using Angular JS is a really gem.
I have been working with it and it has really helped me to develop faster than when using jQuery.
It also was UI elements that you can use out of the box and they are styled properly for iOS and Android although I think its style is more iOS-lish.
Pros
Angular JS based framework
Speed up the development process because of angular JS powers
Very well documented and a lot of examples and tutorials and recipes.
You could use the CSS without using angular if it is required
Free and open source
theming is done via CSS or SASS
Enough components out of the box to start building and app.
Cons
Maybe reading the ionic documentation and the Angular ties if you want to enjoy all of its powers, but it worth it.
Onsen UI
http://s.onsen.io/
I have not work yet with it but it looks like a really complete UI option for hybrid apps.
Pros
Work with Angular and jQuery was well
Free and Open SourceFree and Open Source
It has a theming tool which make easier to customize the look in case you are afraid of CSS or SASS.
Kendo UI mobile
http://www.kendoui.com/mobile.aspx
Pros
It help you create a native look with already native UI looking elements for Android, iOS, Windows Phone, BB.
Incorporates an MVC framework
Theming machine like jQM theme roller
Looks solid (I am looking forward to use it soon)
jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.
Cons
It is not free for commercial use.
PhoneJS
http://phonejs.devexpress.com
Pros
jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.
Optionally support Knockout.js for MVVM user interface development
Cons
Seems like its community is far less reduced in comparison with kendo, so I am not sure how much people are out there using it and that could help later.
It is not free for commercial use.
Chocolate chip UI
http://chocolatechip-ui.com
Pros
iOS 7, Android Jelly Bean and Windows Phone 8 UI looking
Open Source and the project looks active
jQuery compatible
ChocolateChip-UI uses its own JavaScript library, ChocolateChip, for DOM manipulation, Ajax requests, etc. It is very similar to jQuery. (they claim have better performance than jQuery and Zepto)
Cons
Doesn´t seems that have a wide community out there
Steroids
http://www.appgyver.com/steroids
If you feel like a adventure explorer take a took at steroids, which is cordova compatible and they claim you UI will perform as well as native.
It is quite new, I haven´t give it a try but I seems promising, however as still is not widely used I did not decided to use it as having a lot of people using it is helpful when you face problems.
NOTE: If other have interesting alternatives to experiences with this or other UI frameworks for cordova/phonegap please share!
My suggestion would be jQuery Mobile which supports almost all mobile devices in the market.
For the list of supported devices: http://jquerymobile.com/gbs/
1) It provides a native feel for each device platform.
2) Supports all platform
3) Easy support and 3rd party plugins
It's been said by some that jQuery mobile might be slow.. but you can tweak its settings to make it good.
You could use Onsen UI. It claims to be faster than jQuery and has its own theme roller and is built to be compatible with PhoneGap/Cordova.
try you using twitter bootstrap, http://getbootstrap.com..
might be a solution for you, because twitter bootstrap is framework for html and responsive code for all device,, check resolution web in http://quirktools.com/screenfly.. and you can convert web with phonegap..
It's been a couple of years since I've done any Java work, my last efforts were using Swing. I'm poking around with a cross-platform client app that will interact with a Rails web service. JavaFX is one of the options I'm considering, but I'm concerned at the out-of-the-box aesthetic. Does JavaFX have a native look and feel option for the JavaFX controls (not Swing)?
I'm getting the impression that if I want to build a line of business application in Java, I should probably stick with Swing which is a shame since I like some of the features of JavaFX like binding, a terse syntax, and easy support for REST client programming.
I haven't see that. At best, you can use the extensive support of CSS styling we got with 1.3 to mimic native look and feel, but that's a big job! Not even sure how to deal with various themes we got on modern systems...
I suppose the point of RIAs is to bring their own look or to be flexible enough to allow to do your own shinny look, not to look like a random bland application on your platform... :-)
(Now, if I like skinnable applications, I also appreciate GUI frameworks using native controls or looking as such, like Qt (vs. GTK+ for example), precisely to provide good old "bland" applications not breaking user experience.)
JavaFX 2.0 has only one Look by default that is called "Caspian".
With Java 8 a second one was introduced, called "Modena".
Both are cross-platform Look&Feels.
See announcement of Modena, with screenshots.
At the moment some developers create native Styles for JavaFX as OpenSource projects. You can find an overview here:
http://www.guigarage.com/2013/01/this-is-for-the-native-ones/
If you are interested in the Mac OS L&F (AquaFX) for JavaFX, here are some posts with previews:
http://www.guigarage.com/category/aquafx/
Native look and feel is not supported by Oracle in the default JavaFX 2.x distribution.
A proof of concept on button styles by one of the JavaFX developers demonstrates that JavaFX is flexible enough to generate widgets that look like native widgets.
For OS X, you can try the third party AquaFX style for JavaFX, which makes JavaFX applications look like native OS X applications. AquaFX appears quite complete and comprehensive to me.
There have been other 3rd party projects which partially create native look and feels for other platforms, but their coverage is currently nowhere near comprehensive.
Some third party projects (all of which seem currently experimental and incomplete) are:
JMetro in jfx-styles
javafx-native-themes (JavaFX look and feels for: default swing, iOS, windows 7...)
you could definitely embed some css in your application to make the javafx components look more like the standard swing look. With scene builder its actually really easy to get all your tags setup correctly.
Check this out
http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm
Interesting thing is in javaFx is, you can give the rich look and feel to native application also.You can apply css to the javaFx components. Not only that you can embed the HTML Css and pages in JAVAFX application.Which i can feel great revolution in terms of UI building for Standalone applications.