Material.io
From the https://material.io/ website (the official Google spec?), I end up here when I follow the path to access "Material Design UI" web components:
https://github.com/material-components/material-components-web/
Polymer Project
From the https://www.polymer-project.org/ website, I end up here when I follow the path to access "Material Web Components":
https://github.com/material-components/material-components-web-components
I don't understand the difference between these sets of components but would like to use the "official" Google web components for a web app I'm creating.
The Polymer Project is led by a team of Google Chrome developers and utilizes custom web components among other things with the goal of providing a platform for developers to build progressive web apps. Material Components for the web is an open source component library also led by Google developers and designers, but it's focus is a bit more specific to providing Material Design UI components for developers.
The Polymer Project predates Material Components for the web (and Material Design Lite, predecessor to Material Components for the web), and Material Components for the web is part of the recommended toolkit for the next evolution of the Polymer Project. In that sense, Material Components for the web is somewhat of a successor to part of the Polymer Project (but it is not a complete replacement).
It sounds like you are looking primarily for Material Design UI components created by Google developers, so Material Components for the web is probably what you are after.
Related
I'm thinking of using ionic for my project but in the beginning I'd like to only have a webapp without going to an app. Like what framework7 allows. But the information I gathered seems to indicate that this is not possible or fully supported by ionic.
Could someone share some experience to say if it's possible and how hard it is?
For ionic2 it is possible:
add codova platform browser
upload files under platforms/browser/www
point it in browser
done
Note: Plugins that depends on device will not work in browser (for instance camera etc..), the rest will work fine, so keep your app usable even without device plugins
It is possible to port your Ionic app as a mobile website.
Its basically an angular app with added benefits of Ionic ecosystem. This ecosystem includes nifty set of directives of mobile first ui components, js library for interactions (pull to refresh / slide etc) and other such things that compliments your app to make it look and feel like using a native app.
It really shines at accessing native components of your device (camera, location, battery info etc) using js apis (cordova.js). But it isn't of any use when you are building a mobile website with ionic. So, you could write platform specific code to support both web and native in conjunction. You could make the most of cordova.js when you start building your native apps. Else, leave it plain vanilla for your mobile site.
I have ported my ionic app as a web app to serve my audience on mobile browsers (also plan to roll out native apps soon) and I have not faced any major challenges so far. It truly has mobile first experience.
If making a single page desktop website is your sole objective, you should probably go for standard angular bootstrap web apps. Ionic isn't meant for it.
I like the idea of reusable web elements in Polymer.js. However I am not convinced that Google's material design is the way to go, especially in desktop environment.
So is there a way of "styling" Polymer or will there be any other "skins" than just material design ?
Polymer is not equal to material design. It's only a library that makes developing web components a lot easier. It won't stop you from creating new components that follow other design guidelines (although currently the paper-elements make most of the UI web components provided by Polymer).
And as for styling, Polymer promotes the up-and-coming CSS Custom Properties (variables and mixins) for theming web components.
I want to create Metro style web pages. I am using JSF v2.2. I am able to include CSS for this purpose, but it only randers buttons. Other awesome graphics that can be achieved by metro is not there.
something similar like here http://metro-webdesign.info/
PrimeFaces provides a Metro theme which is not free. But with such a theme, you will just be able to fake the style of Metro. You won't access to any JavaScript functionality available in the template linked in your question.
Otherwise, JSF is just a producer of HTML code. You can integrate yourself the template you linked in JSF.
I have been browsing the web lately to find a good Web UI kit. I have found some very good ones but they are all in PSD. That is, they are just graphics. I'm not a professional Photoshop user and it seems like the process to get the UI to HTML to work is quite long and painful.
So has anyone done it before? If not, what are the best resources to get me started to slicing a Web UI kit?
jQuery
is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
Dojo saves you time, delivers powerful performance, and scales with your development process. It’s the toolkit experienced developers turn to for building superior desktop and mobile web experiences.
The YUI Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.
In the Pro Android 2 book, the authors refer to 4 generations of UI frameworks (in order):
C-based MS Windows API
C++-based MFC
Java-based Swing
Android UI, JavaFX, Microsoft Silverlight, Mozilla XUL
In that section, the authors say that Swing introduced "design flexibility far beyond that offered by MFC."
What does "design flexibility" mean in this context?
One of the things that Swing introduced was the idea of a pluggable look and feel. This meant that a component such as a label could be placed on the screen, in the place you wanted it to exist. Then you could customise how that component looked by using any number of UI platforms.
Furthermore, Swing gave you access to the paint methods, so you could simply draw the component yourself if you could not find the UI that you wanted to use.
I have found swing to be extremely flexible in building user interfaces from the layout managers, ui component customisation through look and feel, and the ability to override the paint methods, or implement your own UI delegate class. All of these things I think make up design flexibility and pushed the boundaries of what was available before.
You are able to create a UI based on artistic creativity instead of say a grid pattern