Matthias Kretschmann
299084de93
* basic astro setup, kick out all gatsby configs * move content folder * src/pages setup * more file reorg * more config updates * more reorgs * refactor * refactor * bump astro * refactor * svg icon build system, theme switch * remark plugin for lead paragraph, more refactor * make images work * post meta * custom Picture component * Pagination, More component, 404 fixes * linking fixes * add table of contents * post actions fixes * tag fixes * content changes * content changes: move media files to their posts * more content moving, remove media folder * refactor remark-lead-paragraph * link css file when defined in post frontmatter * move content up again * kbd post update * allow js * downloads solution * add astro check * redirect_from solution * githubLink solution * reorg * exif solution as prebuild step * exif solution on each post during build * isolate lead paragraph extraction to articles * restore Exif components * deploy script update * fix redirects * xml & json feeds * build fix * fix exif readout in production * head and seo tweaks, add feeds * tweak image display * archive pages with single layout * restore tags archive * sitemap setup * restore thanks page functionality * reorg * cleanup * parallel scripts during prebuild * restore jest setup * remove jest, switch to vitest as test runner * adapt CI * test refactor * typescript tweaks * avatar fixes * typings * restore search functionality * theme switch with nanostores * fixes * test fixes * restore changelog functionality * umami script * border color tweak * related posts with fuse.js * plawright e2e testing setup * search tweaks * simplify typekit loading * photo fix * e2e tests * related posts fix * fix tags archive * tweaks * tweaks * linux snapshots * fix header test * new symlink tactic * fix dev server in codespaces * fix yaml * ci fixes * changelog loading tweaks * e2e against dev server on ci * changelog tweaks * ci tweaks * ci tweaks * ci tweaks * docs updates * ci tweaks * refactor photo creation script * package updates * refactor search * ci tweak * ci tweaks * test tweaks, more unit tests * more unit tests * post creation script tweaks * refactor new scripts, test them for real life * more tests * refactor * codeclimate-action update * uses update * limit ci runs * fix theme toggle, test it * more tests * favicon files cleanup * icon components location change * type checking through ci * command fixes * ci fix * search tweaks * ci tweaks * revised favicons, write post draft about it * drafts filtering fix * lint fix, favicon fixes * copy changes * fix related search images * content updates * new codeblock styles, copy tweaks, fixes * package updates * typing fixes * lint fix * content updates * restore link posts * faster theme switching * split up astro utils * related posts fixes * fix * refactor * fixes * copy tweaks * fixes * picture tweaks * image fixes * feed fixes, adapt for json feed v1.1 * e2e test updates * layout tweaks * update snaphots * migrate to createMarkdownProcessor * ci cache tweaks * activate more browsers for e2e testing * switch to macos-13 images * build caching tweaks * markdown fix * set image quality * remove avif generation * picture tweaks * head fixes * add og:image:alt * create-icons test * new post: Favicon Generation with Astro
3.4 KiB
| title | image | author | date | tags | ||||
|---|---|---|---|---|---|---|---|---|
| CSS App Store Badges | ./teaser-appstorebadges.png | Matthias Kretschmann | 2015-09-13 18:55:18.418548000 +02:00 |
|
The badges provided by all app store providers just don't play well together with their varying typography and different sizing. So let's make them all visually unified, infinitely scalable, with pure text for easier localization and some web interaction styles. And while we’re at it: different sizes with the same markup by using some modifier classes.
Styling
Let’s be honest, Google, Amazon & Microsoft created just slight variations of the badge style established by Apple’s App Store badge. So it’s only natural to unify all badges by leaning more to Apple’s style in terms of typography. Apple uses Myriad Pro in their original badge which isn’t available for free web usage.
So all buttons are just set in Apple’s San Francisco UI font with this funky font stack:
.badge {
font-family:
system,
-apple-system,
'.SFNSDisplay-Regular',
'San Francisco',
'Helvetica Neue',
'Helvetica',
'Arial',
sans-serif;
}
The first three values are grabbing the system installed version on OS X & iOS, the San Franciso value shamelessly references the @font-face imported files from Apple’s S3 account and if all that fails, the badges fall back to either Helvetica or Arial.
Because of varying copy resulting in different badge widths, the only way to make them unified when they are stacked on top of each other, like in a mobile layout, was to make all of them the width of the widest one. This is defined as a variable in the Stylus source and set as min-height so the badges can grow, like with bigger font sizes or because of localization.
Usage
Install with npm:
npm i appstorebadges --save
Or just directly link to the css file in the GitHub repo:
<link
rel="stylesheet"
href="https://rawgit.com/kremalicious/appstorebadges/master/dist/appstorebadges.min.css"
/>
HTML Markup
This is the basic markup for all badges:
<a class="badge" href="#">
<svg class="badge__icon">[…]</svg>
<span class="badge__text">Download on the</span>
<span class="badge__storename">App Store</span>
</a>
Only the icon and the copy change for each badge. To be able to style modify all colors, including the icon color easily with one variable change, using the SVG assets as background-image within :before or :after content wasn't feasible. So inline SVG it is, which allows easy styling via CSS.
For maximum browser compatibility and simplicity, I just inlined the icon assets in all markup blocks. In a production environment you should create a sprite from them, reference them with the SVG use element and polyfill with svg4everybody.
Size Variations
Just drop those modifier classes on the badge base element:
badge--smallbadge--tiny