I am very curious to know whether anyone has tried to use both angular material (for angular 1.x) and kendo ui components in the same project, and if so, then:
what were the conflicts, if any, they experienced with respect to css and/or javascript, and
because both libraries have a certain amount of cross-over in terms of similar components, what was your thought process when determining which library to use for a component?
While kendo-ui does have a few "material" based themes, I don't see them following the google material design spec nearly as close as angular-material does.
I am also using both, Kendo und Material Design, in my desktop client project.
I use Material Design for the general website structure
toolbar
sidebar,
navigation, etc.
and Kendo UI components
buttons,
forms, etc.
for everything else. I imported CSS declarations from both.
The only component I use from Material Design is the Snackbar as I think it works better with the common workflow of desktop applications.
So far i have not experienced any conflicts.
Related
Are there big vendors like Telerik, Infragistics, Devexpress offering widgets (Grid, Chart, Combo-box, etc..) written in ReactJS (not wrapping their existing jQuery widgets) ?
Best Regards
You could use some open source projects like Material-UI, React-Toolbox, Essence, Belle, Grommet,Ant Design of React and Elemental-UI
and React-Bootstap
References:
http://getessence.io/
http://www.material-ui.com/#/
http://react-toolbox.com/#/
https://react-bootstrap.github.io/
http://beta.ant.design/docs/react/introduce
https://grommet.github.io/
http://elemental-ui.com/
http://nikgraf.github.io/belle/
Is there any website that is similar to bootsnipp.com (for Bootstrap) But of course dedicated for angular-material?
You have CodePen and Their orginal site (which you may already know of).
If you search for ideas to new design possibilities I would also recommend Google MDL (Material Design Lite). They relay more on more CSS, but got almost the same rules for design.
Is there a UI framework or library that is as comprehensive as Twitter Bootstrap, uses Material Design, and is a good fit with AngularJS?
I have used Twitter Bootstrap for a few years. Recently I have started developing in AngularJS and have been trialing Angular Material.
I really like the overall look and feel of Angular Material and the way it uses flexbox. My design skills are limited though, so I really need a comprehensive solution and I find that Angular is just not comprehensive enough (yet).
By way of example, the kinds of things that are available in Bootstrap but not Angular Material include:
Typography: Definition lists, address formatting, inline forms
Components: Jumbotron, page header, panels
I realize that Angular Material has similar things in some areas, but they seem to be quite specialized. For example, you could say that Angular Material cards are akin to Bootstrap Panels, but as far as I can see there's no real point in having a card that doesn't have an image header.
Should I be looking at Polymer? Or something else? Bootstrap 4 looks promising, but I need something now.
Bootstrap has been already 'angularized': https://angular-ui.github.io/bootstrap/ . You can now use the framework you are comfortable with together with angular.
Splitting your requirements: "UI framework or library that is as comprehensive as Twitter Bootstrap, uses Material Design, and is a good fit with AngularJS"
UI framework or library that is as comprehensive as Twitter Bootstrap:
Twitter Bootstrap.
Uses Material Design:
Twitter Bootstrap + Bootstrap material design theme.
Is a good fit with AngularJS:
Twitter Bootstrap + Bootstrap material design theme + Angular Bootstrap Material
Disclaimer: I wrote the last component, Angular Bootstrap Material
Please help me understand the following quotes from the Angular Material github and home page:
This project is in early pre-release. Angular Material is both a reference implementation of Material Design and a complementary effort to the Polymer project's Paper Elements collection.
The Angular Material Design project is a reference implementation effort similar to that provided in the Polymer project's Paper elements collection. This project provides a set of AngularJS UI elements that implement the material design system.
I understand that Polymer is a framework for web components, and that one piece of the project is the collection of paper elements. I do not understand how the two are related, or why Google is developing two strikingly similar, yet different projects.
Is angular material simply a port of Paper Elements to angular?
Are web developers to use Angular Material right alongside Paper Elements in their web apps?
Are the two eventually going to effectively become equivalent? (Angular Material being used by AngularJS developers & Paper Elements used by others?)
I think you should consider the fact that web components, polymer, material design, paper elements and angular are 5 distinct 'things'.
Web components is a group of 4 standards.
Polymer is a sugar syntax api on top of web components + some nice additional features.
Material Design is the latest style and interaction guide Google has announced and they are
replicating more consistently across all their interfaces..web/mobile/etc.
Paper Elements are just an implementation of material design using Polymer. At the ChromeDev Summit Polymer team commented they plan to move paper elements into its own domain to avoid the confusion. Same things about the polyfills, these have been moved to webcomponents.org.
Angular is a library with a much wider scope than polymer.
Angular Material is just another implementation of material design using Angular.
My point being...material design will be reimplemented in as many flavors Google has to generate interfaces.
Google has a history of competing projects. But Angular's team has announced they will be using web components as well in their 2.0 version which is on the works right now. Will they use polymer to create directives? who knows? maybe..
From the recent ng-conf 2015 announcements it's clear that Angular 2.0 will have a new syntax and implementation to write Web Components spec based Custom Components (Directives).
Also, Angular-Material team has announced that post 1.0, they'll be porting it to Angular 2.0.
Hence, integration of Angular-Material and Polymer isn't in sight...Though, the good thing is that coz they're both based on Web Component Spec, they play well together, meaning that either can be used in an Angular App...
I've been developing a mobile app with AngularJS and zeptoJS but the combination of those two is not providing any UI widgets
I've seen this topic: Is there a UI library for angularjs for use in a phonegap app?
but I'm looking for more answers ( really, LungoJS is the only answer? and I'm not going to use jQueryMobile. ). Are there any other light libraries ?
IonicFramework is a framework designed for exactly this purpose. Its fairly modern though. As such it doesn't have much in the way of backwards compatibility.
Angular Material (currently for 1.x only)
Material Design components for Angular 2
OnsenUI - "The answer to PhoneGap UI Developement"
React Native
NativeScript Angular
Mobile Angular UI lets you use Bootstrap 3 css stripped out of desktop related media queries and Angular.js to develop mobile apps fast.
Its purpose is to achieve the same of Jquery Mobile but using Bootstrap 3 for the UI and AngularJs in place of Jquery.
It provides also other essential mobile components that are not included in Bootstrap 3 like sidebars, scrollable areas, absolute positioned top and bottom navbars that don't bounce on scroll and more.
I also like TopCoat which is a CSS mobile/desktop framework that works well with Angular. See it in action with angular here: http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/ and the library at http://www.topcoat.io
Check my answer here where I resumed other options for UI frameworks as well as Pros and Cons.
Including kendo UI, phone.js, chocolate chip, steroids.
Custom CSS for Mobile development using Phonegap/Cordova
Top coat and bootstrap also nice ones as already mentioned.
Maybe reconsider jQueryMobile.
Quite a few months ago we started a new project and considered all of the options listed above for a client side framework. We were looking for a large set of mobile-optimized UI widgets. A widget catalog was more important to us than whether the framework provided an MV* architecture, so tools like AngularJS, MeteorJS and EmberJS were secondary. We found jQueryMobile as the best option for us. Bootstrap, Ionic, Kendo, Sensa, etc. didn't seem to have as many and varied out-of-the-box widgets specifically for mobile. The space of mobile tools is in transition, but so far I think we made the best decision for our use case.