CSS Structure

[gaurav21r]

Default Styling

One of the best things about Polymer Elements is the Out of the Box ready to be used default styled elements. We should have a Material Design or Avaa Design inbuilt <style> within the HTML.

Eg: A <paper-input> or a <paper-drawer-panel> is usable right Out of the Box.

For this we need some Graphic Design help as well.

Clean Styling of Grid Components

For clean styling of the grid from outside, in our templates, we should append all grid components like cell, rows, headers with a specific class like super-grid-cell.

Eg the output HTML (following #4 ) should be something like:

<tr class="super-grid-row">
  <td class="super-grid-column"> This is some </td>
  <td class="super-grid-column"> Data </td>
</tr>

Polymer Elements can't be styled from outside

Polymer uses a mixture of CSS variables and mixins to achieve styling from outside stylesheets etc. Please go through https://www.polymer-project.org/1.0/docs/devguide/styling#xscope-styling and see what we need to do to provide outside styling.

User Defined Classes

Incase the user defines some of their own custom classes like

<super-column class="my-column-class">
  <template>
    <div class="my-data"> {{mydata}} </div>
  </template>
</super-column>

Then the previous example becomes

<tr class="super-grid-row">
  <td class="super-grid-column my-column-class"> 
    <div class="my-data"> This is some </div>
  </td>
  <td class="super-grid-column my-column-class"> 
    <div class="my-data"> Data </div> 
  </td>
</tr>

Notice how td has 2 classes now! One given by the user, one by us! Also note the rendering of the <template> with all HTML & CSS Structure preserved intact.