Can Polymer 1.0 just be used as an external CSS reference

[Jim]

I know "Polymer has an element for it!", but the question is: can Polymer just be used as an external CSS reference?

i.e. Can developers take advantage of Material Design from Polymer, but not use the element/other parts of Polymer?

Think about a HTML5 page with standard HTML5 elements, to be decorated with Material Design from Polymer - is it possible?

Cheers,

Jim

[Eric Bidelman]

We have standalone md styles in the paper-styles classes/layout elements:

https://github.com/PolymerElements/paper-styles

However, some of that still needs to be loaded by Polymer's style shimmer. It uses a future-facing technology

called CSS custom properties and mixins.

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/c19b0052-a362-4247-85ac-336dc02e6376%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jim]

Thanks Eric,

I understand Polymer is using the web component approach, but I think it would be very useful to split out the material design part for people who want to use the W3C HTML approach.

Cheers,

Jim

[Justin Fagnani]

On Tue, Nov 17, 2015 at 6:00 PM, Jim <jian...@gmail.com> wrote:

Thanks Eric,

I understand Polymer is using the web component approach, but I think it would be very useful to split out the material design part for people who want to use the W3C HTML approach.

Polymer is implementing the W3C HTML approach :)

You use the CSS polyfill without other elements. I _think_ it'd be something like this, but Eric might have to correct me:

<link rel="import" href="../paper-styles/paper-styles.html">

<style is="custom-style">

  h1 {

    @apply(--paper-font-title);

  }

</style> 

Cheers,

Jim

On Tuesday, November 17, 2015 at 3:53:46 PM UTC, Eric Bidelman wrote:

We have standalone md styles in the paper-styles classes/layout elements:

https://github.com/PolymerElements/paper-styles

However, some of that still needs to be loaded by Polymer's style shimmer. It uses a future-facing technology

called CSS custom properties and mixins.

On Tue, Nov 17, 2015 at 1:55 AM Jim <jian...@gmail.com> wrote:

I know "Polymer has an element for it!", but the question is: can Polymer just be used as an external CSS reference?

i.e. Can developers take advantage of Material Design from Polymer, but not use the element/other parts of Polymer?

Think about a HTML5 page with standard HTML5 elements, to be decorated with Material Design from Polymer - is it possible?

Cheers,

Jim

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/c19b0052-a362-4247-85ac-336dc02e6376%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

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/87a00d1c-a153-4796-88ca-54866ab53b6d%40googlegroups.com.

[Eric Bidelman]

Yep. That would work for applying a paper-style mixin to your own css. 

If you want to use one of paper-style's material design colors directly, you could use the css custom prop directly:

<link rel="import" href="../paper-styles/color.html">

<style is="custom-style">

  h1 {

    color: var(--paper-orange-5);

  }

</style> 

Under to hood, this still uses Polymer lib to make custom-style work...and shim/polyfill the style, but that's 40KB for a future facing feature :) Super powerful.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAEKsHmAT3-teKKuX_Owy-F%3DKDQM31SVkF1vo96RnzRAdM-Q%2BQQ%40mail.gmail.com.

[Jim]

Great, thanks both!

[Jim]

Hi guys,

I followed the link https://github.com/PolymerElements/paper-styles

and download the package, but can't get it work.

All I try to do is to have a standard HTML button, something like:

<button class='polymer_css_buton'>Flat button</button>

I try to use Polymer to decorate the button to make it "Material" looking.

But I don't want to use <paper-button> element, <paper-button>Flat button</paper-button>

is that possible?

Cheers,
Jim

[Justin Fagnani]

On Nov 18, 2015 9:56 AM, "Jim" <jian...@gmail.com> wrote:
>
> Hi guys,
>
> I followed the link https://github.com/PolymerElements/paper-styles
> and download the package, but can't get it work.
>
> All I try to do is to have a standard HTML button, something like:
> <button class='polymer_css_buton'>Flat button</button>

Styling native elements is difficult to impossible. You need other non-standard properties to disable native rendering, and they don't work reliably.

>
> I try to use Polymer to decorate the button to make it "Material" looking.
>
> But I don't want to use <paper-button> element, <paper-button>Flat button</paper-button>

Why?

>
> is that possible?

You'd have better luck with a <div> styled to look like a button, with a click handler, but that's what paper-button is, so I'd recommended using it.

>
> Cheers,
> Jim

[Eric Bidelman]

Sounds like material design lite would be a good fit for you too. Check it out.

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/CAEKsHmCJfbVd_WHVVVbQuywcV2-H73F3pR9YoEAH%3Dz5_ihpRyA%40mail.gmail.com.

[Jim]

MDL is exactly what I'm looking for - thanks Eric!