Software Alternatives & Reviews

Day 8: Positioning buttons over embedded Google Maps

Recommended and mentioned products

  1. styled-components is a visual primitive for the component age that also helps the user to use the ES6 and CSS to style apps.

    For implementation, I use Styled Components with “design tokens” and data attribute selectors for making CSS code easy to maintain and for speeding up the browser's rendering of these buttons (at least a little bit).
  2. Google Fonts now supports icons

    So I download the SVG data of these four icons from Google Fonts, import each to Sketch to center-align them over the cloud-shaped button, and export the results as SVG code. (See Day 7 of this blog series for how I've written the HTML code for showing buttons with the exported SVG code.).
  3. Font Awesome makes it easy to add vector icons and social logos to your website. And version 5 is redesigned and built from the ground up!

    There are many icon repositories out there, but Font Awesome and Material Icons are the only ones that have all these four icons. Given that My Ideal Map App embeds Google Maps, Material Icons, designed by Google, is more likely to ensure visual consistency in the user interface.