So I’m building an android app for my latest project (material design) and wanted to know the experiences of you guys in using the multitudes of packages present. Specifically for materialize.css vs polymer what do you guys recommend.
PS: Any other awesome package I should checkout for this?
Hi,
You may try Framework7 http://www.idangero.us/framework7/#.VdMJBnWlyko as Framework7 has material design theme it gives much native look to app
By using these wrapper packages https://atmospherejs.com/?q=framework7
I hope that Polymer 1.2 will have a fix for the current DOM issues (re-rendering) after which Polymer should work reasonably well.
As @markusgattol pointed out there’s re-rendering issues with Polymer right now. If you know you can avoid these issues by design how you design your site then you will be fine (just a bit of workarounds required at the moment).
In terms of feature completeness/sophistication there is no doubt Polymer or rather the Google elements catalog is far superior than Materialize. Materialize is nice, no doubt but the stuff you can do with those elements (even out of the box) is amazing and supports lots of things that just don’t work in materialize that well.
I’d recommend you to try Polymer/their paper elements. WIth that said, you can throw in materialize immediately. It’s pretty much like using bootstrap. So you can evaluate it yourself easily with a 1 day test run.
@AndreasGalster Good comment! I do think that mid to long-term Polymer will be the way to go.
For now, what meteor package would people recommend in order to bring Polymer into a Meteor project. Just came across https://github.com/loneleeandroo/meteor-polymerize which seems quite up to date and whole?
Sorry, I forgot to mention something. Those issues can be solved by falling back to the old shadow DOM polyfill, which granted is slow in most browsers except for chrome and especially on mobile, but it works. I guess it depends what you need it for.
For my MVP it’s ok to have a “shitty” slow product, but I’m also considering that my target market (Philippines) has 75% Chrome penetration so… I guess it comes down to your audience and use case as well.
I don’t use any package for Polymer. All I do is use bower to import the elements in my public directory. Then in my main.html file I have something like this:
<script src="/bower/webcomponentsjs/webcomponents.min.js"></script>
<script>
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
<link rel="import" href="/my-custom-style.html">
<!--
<script src="/bower/webcomponentsjs/webcomponents-lite.min.js"></script>
-->
<link rel="import" href="/imports.html">
If I don’t want to use shadow DOM I move the webcomponents.min.js and the script into the comment and replace it by the webcomponents-lite to use shady DOM.
Works ok for me.
I am using materialize.css and really struggling with it. It is very inconsistent between browsers/environments. I will recommend against using this library.
I’ll agree with @bschulz, materialize.css has some issues working with meteor. I’ve been trying it out, migrating a project to use materialize. But it’s components will not always work as expected, especially with dynamic content. They still have some work to do for the library to work well with other frameworks, like providing javascript hooks for initialising/updating some of the components when the data changes.
For simple projects it should work fine. But for more complex apps use something else, for now.
I have tried both approaches and were not really satisfied with them. Polymer is IMHO too sophisticated for just having material design.
I agree with the others above that Materialize also has some major glitches, especially if you nest items in a way the developers did not foresee. Plus, their SCSS files are not very well designed, so it is not easy to cherry-pick what you actually need and forget about the rest.
In the end, I’ve returned to Bootstrap which is working much better, and I managed to cherry-pick some of the Materialize elements, like the ‘cards’, and integrate it with Bootstrap.
Just recently, I had a look at Semantic UI http://semantic-ui.com/, which also has a Materialize theme. You definitely should have a look at this framework, as it seems to be very well designed. I especially liked the way they designed their Meteor integration, which is very flexible: https://github.com/Semantic-Org/Semantic-UI-Meteor. I was able to cherry-pick what I wanted without any efforts. So, at the moment, I am actually using a wild mix: Bootstrap, Materialize and Semantic UI. But I plan to switch over to pure Semantic UI if I find the time to do so.
Besides this, Google also has released their own implementation of Material Design, called Material Design Lite: http://www.getmdl.io/ This is meant for all web designers who want to adopt Material Design, but do not need the full power of Polymer.
So maybe either Semantic UI or MDL would be a good option for you.
Wow… Framework7 is actually really nice! Thanks
This framework is specific for Android or iOS mobile apps only
@AndreasGalster and @markusgattol (and everyone else interested in Polymer & Meteor). Please join this discussion: https://gitter.im/emmanuelbuah/MeteorPolymer on Gitter
That discussion looks pretty dead, unfortunately.
I think it would be smarter to move this to the Polymer Slack, perhaps propose to have framework integration related channels.
I’ve been using Semantic-UI pretty heavily. It’s been working really well so far. You should give it a shot! They Material styles built in.
for non-mobile use I am satisfied with https://medium.com/@ShockiTV/how-i-tried-bootstrap-with-material-design-and-autoform-on-meteorjs-32333baad85f
Better control over bootstrap compile process would be nice.
But for default feel it works for me.
Have used Framework7 before. One point for it.