universal-footer

A Polymer 1.0 element that can be used as a footer in a webapp.

Installation

You can install this element with the help of bower.

bower install --save universal-footer

Using the footer

As we all know a footer requires a bunch of predefined stuff like copyright text, social links etc. Example

<universal-footer>
  <div copyright-center>2015 Prateek Jadhwani</div>
</universal-footer>

To add a multi-column content, just add a multicol attribute to the universal-footer DOM as shown below

<universal-footer>
  <div multicol>
	  <div col>First Column</div>
		<div col center>Middle Column with center aligned</div>
    <div col right>Last Column Aligned right</div>
  </div>
</universal-footer>

But, you can also combile multicols and copyright.

<universal-footer>
  <div multicol>
    <div col>First Column</div>
    <div col center>Middle Column with center aligned</div>
    <div col right>Last Column Aligned right</div>
  </div>
  <div copyright-center>© 2015 Prateek Jadhwani</div>
</universal-footer>

And each column can have multiple rows with one or more titles.

<universal-footer>
  <div multicol>
    <div col>
      <div row center title>Row Title</div>
      <div row center>stuff</div>
      <div row title center>More Row Title</div>
      <div row center>more stuff</div>
    </div>
    <div col center>Middle Column with center aligned</div>
    <div col right>Last Column Aligned right</div>
  </div>
  <div copyright-center>© 2015 Prateek Jadhwani</div>
</universal-footer>

Styling the footer

To change the background color of the footer:

universal-footer {
  --universal-footer-background-color: #e91e63;
}

To change the default text color in footer:

universal-footer {
  --universal-footer-text-color: #f8bbd0;
}

To change the default footer padding:

universal-footer {
  --universal-footer-padding: 40px;
}

To change the default margin-top or color of a title in a column:

universal-footer {
  --universal-footer-col-title-margin-top: 40px;
  --universal-footer-col-title-color: #C2185B;
}

More Examples

Using universal-footer to build GitHub style footer. See github-footer example.

Using universal-footer to build YouTube style footer. See youtube-footer example.