Day 8: Positioning buttons over embedded Google Maps

1

styled-components

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).

#Developer Tools #Design Tools #Javascript UI Libraries 154 social mentions

2

Material 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.).

#Design Tools #Icons #Developer Tools 57 social mentions

3

Font Awesome

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.

#Web Fonts And Design Assets #Vector Icons #Icon Fonts 127 social mentions