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.
Related
In one of the projects i'm working on, the team decided to use angular/flex-layout.
I was wondering, what are the reasons to use it at all ?
I could only find reasons against.
For example this code:
<div fxLayout="row" fxLayoutAlign="space-between">
</div>
The first "best practice"/"separation of concerns" regarding html & CSS we are all familiar with, is the separation of content and style; with flex-layout we totally lose it.
it looks like an inline style, which is a really bad practice.
the only good thing I can think about is using variables directly to flex-layout directives, but we can achieve that using ngStyle directive as well.
I'm really interested in your opinions, What do you think about it ?
As the name suggests [Angular Flex-Layout] is a library for laying out your components on your web page. The library does not provide a means for styling, fonts, or colours, as those tasks are delegated to traditional styling in your application. Angular Flex-Layout deals with component positioning and works well with or without Angular Material. It is also built by the Angular team and supported by the community.
Some of the main advantages for using Angular Flex-Layout are:
The library is a pure Typescript Layout engine.
Uses HTML markup to specify layout configurations.
Independent of Angular Material.
A responsive API can specify different layouts, sizing, visibilities, viewport sizes, and display devices.
Includes CSS Grid.
Requires no external stylesheets.
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.
There are a lot of presentation frameworks out there for html + js. What would be a good way to accomplish a similar presentation in polymer? Is there any polymer elements that would be candidates to present a new slide and friendly with polymers transitions? I'm doing more with polymer and prefer that to using the existing frameworks.
The core-pages and core-animated-pages can probably be used to make a deck.
Here's an example that Addy Osmani put together
There are also a few projects, here and here.
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.
My question is about migration from Flex3 to HTML5. I want do migrate myself not application actually. The question is, what direction is the best and most similar to flex knowledge. Maybe I will reimplement some custom components I already have in my flex library. I think that some of useful flex components I will have to implement myself in HTML5 - e.g. AdvancedDataGrid or Tree.
Now I can see 2 possibilities:
assume page (or big DIV) as application master class, and implement
other components based on extending DIV functionality - and placing
DIV in DIV in DIV - like AS3 uses UIComponent. It gives me supported
by browser environment event handling or DIV movement and redrawing
etc.
assume one CANVAS component as application master class. Build own
classes tree with owner drawing control etc. I think i will need to
implement event handling & dispatching for my internal visual
components. Also all UI actions (like moving, redrawing) I need to
implement myself.
I assume, that I will start to build my own class/component library for long-term future use. Question is what is better for knowledge and work investing?
It will be good to know wide opinion on this problem.
Can you give yours here?
From experience, we can say that writing a DataGrid component is a VERY large undertaking. We've been working on our DataGrid components for 3 years now, and we're STILL adding features. Instead of writing your own ADG like component, you should consider JS frameworks. Below are some:
DOJO (Excellent framework for RIA Enterprise App Development, and
Free!)
Sencha (Pretty good, but commercial)
JQuery (Very popular, but highly fragmented).
Each of these come with their own grid component. Senchas grid is pretty good, but so are some jquery grids. See this for example: Best dynamic JavaScript/JQuery Grid
Bottom line, dont reinvent the wheel. There are many excellent paid and free versions out there, pick one that works for you and run with it.
Disclaimer: I am author of Web Atoms JS
Web Atoms JS was built to bring all concepts of Flex, Silverlight and XUL. And each of these technologies used more of XML markup for very high level UI controls. Screens become complex and visualizing them becomes painful when it keeps on changing.
With Web Atoms you will write for less code then any of other frameworks. Web Atoms comes with all basic flex Components & more are coming.
This is a Sample of what all things are possible in Web Atoms JS.
Here is link to documentation.
http://webatomsjs.neurospeech.com/docs