Themes, how can I use it?

[Артур Файзрахманов]

Hi!

I'm implementing polymer based web application, and I'm very interested in future scaleability of this project.

At the starting point much of my custom polymer elements had inline styles. I've noticed, that I can put link tag within element's main template to point to external stylesheet, and now I'm using this way to style my elements (which also gives me ability to use my favorite CSS framework to do job for me).

I've also noticed that polymer ui elements are themes aware, how can I make my elements use themes? I can't find any documentation or a simple tutorial about how can I achieve that.

Is there some guidelines about the subject?

What do the themes are pretend to be in general? Are them only about coloring or maybe they are robust way to manage elements appearance, positioning and responsive behavior?

[Steve Orvell]

We're actually evolving our support for themes right now. We've been waiting for the implementation of the ^ and ^^ combinators in css, and as of last week, these have landed! These combinators cross ShadowDOM boundaries.

This enables an element to publish (via documentation) a styling api. Then a theme css file can be loaded which targets those elements. Here's an example:

Let's say ui-ratings is an element that can show a series of stars type elements. Each of the stars if given the "star" class.

Then you can write a global rule like this:

.special-theme ^^ ui-ratings,

body ^^ ui-ratings.special-theme {

  background: red;

}

This will make all ui-ratings anywhere on the page have a red background. The first selector targets ui-ratings inside elements matching .special-theme. The second selector matches ui-ratings anywhere on the page if it has the special-theme class.

Likewise to style the stars:

.special-theme ^^ ui-ratings ^ .star ,

body ^^ ui-ratings.special-theme ^ .star {

  border: 1px solid orange;

}

We'll be publishing more documentation on this in the near term.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Артур Файзрахманов]

Great! I'll stay in touch! )

вторник, 5 ноября 2013 г., 5:36:50 UTC+6 пользователь Steve Orvell написал:

[Martin Amm]

It seems that I'm unable to find any information how theming should work.

>We'll be publishing more documentation on this in the near term.

Any update on the documentation or any starting point how theming should work?

Do you have any tips where to find some information about the " ^ and ^^ combinators in css"?

[Rob Dodson]

^ and ^^ have been deprecated in favor of ::shadow and /deep/

I've put together a Shadow DOM CSS cheat sheet which details all of the current selectors/combinators.

At the moment we recommend using ::shadow and /deep/ to theme your elements

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/e6dac6d0-5bef-475e-9d1b-f216428d9e33%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Martin Amm]

I just found a core-style component. Is this the new "official" way to style/theme components?

[Steve Orvell]

We think it'll be one way to theme elements, but `core-style` should be considered experimental at the moment. It's a promising alternative to styling via /deep/. We're working through various theming use cases to make sure it doesn't need to evolve more.

If you'd like to try it out, feedback is welcome.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/03acbb91-8bef-4abb-9bfb-931cea908dcc%40googlegroups.com.

[wessel...@gmail.com]

Hi guys

I am trying to understand how I can create a theme with core-style for all paper elements. For example I would like to set the common colors for all paper elements in my theme. But I don't get how core-style and the CoreStyle.g is actually supposed to create a theme for all paper elements.

This guide gives me headache and doesn't really explain how to do themes: https://www.polymer-project.org/docs/elements/core-elements.html#core-style

Does anybody know how to do themes with core-style?

Cheers

Bernd

[Rob Dodson]

The recommended approach right now is to write up a theme stylesheet using ::shadow and /deep/.

core-style is still in the experimental bucket

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/bf83f6ea-94bb-452b-a7cd-ef058f19a61f%40googlegroups.com.

[ahol...@atlassian.com]

Oops I just cut over my app to core-style as it seemed cleaner to me and gives more control. I'm liking it so far fwiw

[danel...@hotmail.com]

CSS variables could be a good solution for themeing across components.  If so what about making a Polyfill until CSS Variables gets further support.  This was a nice article on core-style, the current method for styling ui frameworks like jquery-ui, kendo-ui, ect. is just to drop a my-light-theme.css on the page, which seems easier to do.

[Claudius Nicolae]

As experimental as you say it it, I see core-style used across most paper-elements.