Custom SVGs for Core-Icons in Polymer

After last night, I have a nicely animated <x-pizza> Polymer element:

The animation and elements come courtesy of Paper and Core elements from the Polymer project. I think they work together well to be bold & graphics as well as providing motion with meaning (core tenants of Material Design).

Perhaps the most exciting aspect of all of this is that I used no code. The <x-pizza> element still has code logic for building pizzas, but the tabs and motion of the pages movings comes entirely from Polymer elements:

    <paper-tabs selected="0" id="tabs">
      <paper-tab id="first_half_tab">
        <p>First Half Toppings</p>
      </paper-tab>
      <paper-tab id="second_half_tab">
        <p>Second Half Toppings</p>
      </paper-tab>
      <paper-tab id="whole_tab">
        <p>Whole Pizza Toppings</p>
      </paper-tab>
    </paper-tabs>
    <core-animated-pages selected="{{$.tabs.selected}}" transitions="slide-from-right">
      <x-pizza-toppings id="firstHalfToppings"
                        name="First Half Toppings"
                        ingredients="{{ingredients}}"></x-pizza-toppings>
      <x-pizza-toppings id="secondHalfToppings"
                        name="Second Half Toppings"
                        ingredients="{{ingredients}}"></x-pizza-toppings>
      <x-pizza-toppings id="wholeToppings"
                        name="Whole Toppings"
                        ingredients="{{ingredients}}"></x-pizza-toppings>
    </core-animated-pages>

As cool as that is, I think it might only be a start. There may be more appropriate material metaphors that fit what I am trying to accomplish with the pizza toppings. Toward that end, I would like to start with a “chip” and page approach similar to the music example in the core-animated-page demos.

Chips, in Material, are small items that represent a more complex entity. In this case, I might represent the relatively complex pizza toppings chooser with a simple chip. I will worry about expanding the chip tomorrow, for now I shamelessly copy the HTML from the demo into my <x-pizza> element, making a few hand edits. This leaves me with:

      <section>
        <div class="chip-container">
          <div class="chip">
            <div class="chip-top" style="background:#f4db33;">
              <div class="chip-icon">
                <core-icon src="/assets/first_half.svg"></core-icon>
              </div>
            </div>
            <div class="chip-bottom">
              <div class="chip-title">Add First Half Toppings</div>
            </div>
          </div>
          <!-- Other topping chips here ... -->
        </div>
      </section>

I also pull in the chip CSS from the demo page, again making a few hand-edits for my chip-icon and chip-title CSS classes. All of this copying and pasting of HTML and CSS feels like the early days of the internet all over. It might be nice to have a chip Polymer element at some point, but this will work for tonight.

With that, I create a couple of SVGs. There are no icons in the default iconset from Polymer that look like pizza halves, so I have to create my own. Fortunately, I am a pro at doing this in Inkscape by now. Armed with whole.svg, first_half.svg, and second_half.svg, my <core-icon> element can now pull from the proper src location and... voilà!



Of course, I still need to hook those up to actual pages, but hopefully that will not be too hard (I will find out tomorrow). I am not 100% sold on the look of these elements. It begins to look a little too much like Google property. Still, I have to admit that it is better than the tabs (which also looked a bit Googlish). If everyone adopts this style, then the web will wind up a very boring place. Then again, I suppose Boostrap is doing that already (to an extent) and this has the advantage of baking in “motion with meaning,” which I will explore tomorrow.

And if I am very lucky, I will finally figure out what a “hero” transition is...


Day #151

‹prev | My Chain | next›