My question is rather simple: What is the recommended way to implement the typographic and metric rules of Material Design (http://www.google.com/design/spec/material-design/introduction.html) in a Polymer application? For example, how to implement the units sp and dp in CSS?
Is there an official CSS file I could include? I am also not sure whether the Core and the Paper Elements of Polymer all conform to the general rules of Material Design. It says that the Topeka application bundled with Polymer is an example of Material Design. However, I haven't understood this by reading its source and in particular its style sheets. For example, the profile screen (https://github.com/Polymer/topeka-elements/blob/master/topeka-profile.html) does not follow all the metric rules, does it? (Or am I completely mistaken?)
I couldn't find a canonical stylesheet or sampler for Material Design typography either.
So I put this stylesheet together:
http://brm.io/material-design-type/
I followed the spec here:
http://www.google.com/design/spec/style/typography.html
Feel free to use it, I'm using it in a Polymer app and it looks decent.
EDIT:
The source is now available on github:
https://github.com/liabru/material-design-type
And CodePen:
http://goo.gl/27issq
I found this experimental repository on github:
https://github.com/nevir/paper-theme-experiment
It contains a theme element that also defines the different fonts that you find in the design spec and it also does some of the color theming. However it is far from finished, but it is a good start until the Polymer Team releases a finished version.
Related
I'm using Polymer 1.x and started using the Polymer Kit to build a current app. I know about the App-Elements, and currently I'm trying to achieve something like this:
Full:
Mobile:
So far I have something like this:
Do I need to use media queries to hide the tabs and show the logo?
On a side note, I'm really having a hard time understanding Polymer, because I don't know if the elements come with the predefined styles (as Bootstrap or Foundation would do) or you need to do some heavy-lifting in CSS (which is what I've been seeing). I would really appreciate if someone could show me a good tutorial (I've seen Polycasts and the Github) on how to fit things together!!
You can use iron-media-query to hide the tags.
All the polymer elements have predefined styles and have exposed certain mixins and variables for custom styling.
I would recommend going through polymer's documentation and element's documentation to best understand its usage as each element has its own set of properties and styling. Polycasts cover only a few topics and are good source of knowledge only if you are already familiar with polymer development.
I'm getting started with Polymer web components. We have a product that can be injected into multiple client applications, or could even be a standalone application. This product is a game where the rules for validating correct answers and the general flow are the same throughout all implementations. The only variance is styling so the game looks like it belongs in its surroundings.
I'm tempted to use some of the cool Polymer Paper elements for the UI aspects of the various custom elements, but I do not want to force a particular design aesthetic. So, I think it will be a better choice to simply have each custom Polymer element to return semantic HTML.
So, how can I allow the clients that are consuming the game to apply their own look and feel? In my research on Polymer, I've read about applying styles inside each element. I suppose that might be OK for structural issues. Does anyone have any strategies they've employed for custom CSS implementations for Polymer elements?
Thank you.
Custom CSS Properties is the suggested way of theming Polymer Elements. Here's a video from the polymer summit and another video of Rob Dodson talking about theming your elements using custom css properties.
I've been studying web components, and have gotten Google charts working.
It requires
bower_components/platform/platform.js
bower_components/google-chart/google-chart.html
But I don't see the word Polymer being mentioned.
Is platform.js considered Polymer, or do I need to include some sort of Polymer for cross browser compatibility?
Platform.js has been renamed to Webcomponents.js
Google is trying to separate webcomponent polyfills with Google's polymer elements. (core-*, paper elements, etc.)
Source:
https://blog.polymer-project.org/announcements/2014/10/16/platform-becomes-webcomponents/
Ajay's comment is correct: platform.js is not strictly a part of Polymer.
platform.js contains the polyfills to provide Web Components technology on non-supporting browsers.
But I don't see the word Polymer being mentioned.
It's part of the appeal of Web Components that you do not need to know the underlying technology to use a custom element. Polymer elements import polymer.html internally to provide the necessary code, but you never need to be aware of this if you don't care.
I am going to port our windows-based Customer Management software to Web-based. I find polymer may be a choice.
However, for our usage, we can't find polymer component has table-view, drop-down menu(aka. the "select" element in html), date-picker, tree list.
Will polymer add these components later? Or these components will not be the target?
Thanks,
Barry
Polymer is just primarily a polyfill library that helps enabling HTML 5 Web Components in browsers that don't support them by themselves.
Web Components can be written by any developer, so you might need to develop some controls on your own especially the table view one. I'd guess you'll find most of the others mentioned in your question implemented one way or another. You should check out some of the WebComponents collection pages:
http://customelements.io/
http://component.kitchen/
http://bower.io/search/?q=web-components
For your table view control: I had a similar problem couple of years ago and had to implement my own solution. Maybe you can find a regular HTML library that supports table views and make it a (Polymer) Web Component by yourself.
I am pretty bad with CSS and HTML5 designing/templates. So, I google around and found two frameworks to start with nice looking layouts, necessary js and html5 support. But I don't know which on to use.
I would appreciate your answers on
What is the main different between two except google analytics ?
Which one is more rails friendly ?
Which one fits best to e-commerce sites, i.e. create rich content, integrate with user management frameworks etc?
Combine them and use them both - http://www.initializr.com/
The HTML5 Boilerplate (H5BP) is a starting project template that is designed to be adapted to your needs. Bootstrap is a specialized, modular, HTML/CSS/JS toolkit.
boilerplate provides you with a best practice HTML5 document, some reset CSS and a lot of javascript goodness like modernizer.js; this Twitter toolkit provides you with stylesheets that define a lot more than just a reset.
The Twitter toolkit is better compared to CSS frameworks like blueprintcss and 960 grid system and positions itself somewhere in between those two. Twitter bootstrap comes with its own fixed look and feel so you can concentrate on your content and logic.
checkout this Quora Thread
Based on your question, I gather you misunderstand what these two projects are. "Google analytics" is not the difference.
Expanding on what #thomas has already stated, Boilerplate contains starter HTML templates with best practices built-in and Bootstrap is a library of CSS and JS UI elements. They are not mutually exclusive.
You may want to look at initializer as #Zlatan has already recommended, or Kickstrap, which is an extension framework for Twitter Bootstrap.