Frontend Garden

UI

Přehled UI komponent pro vložení do článků a stránek na webu Frontend Garden.

Cards

Karty je možné vložit do článku nebo stránky pomocí dynamické nabídky:

Dynamická nabídka editoru

Bookmark

Karta pro vložení výrazného odkazu s daty automaticky načítanými z OpenGraph značek cílové stránky. Preferováno pro odkazy v rámci Frontend Garden.

Frontend Garden
První český online magazín o webovém frontendu
Frontend GardenAdam Kudrna

Button

Tlačítko s výzvou k akci.

Tlačítko – na střed
Tlačítko – vlevo

Callout

Barevný box s volitelnou emoji ikonou. Vhodný pro doplňující informaci, důležité upozornění nebo odkázání na další díly série článků.

👉🏻
Callout box – šedý
👉🏻
Callout box – světlý
👉🏻
Callout box – modrý
👉🏻
Callout box – zelený
👉🏻
Callout box – žlutý
👉🏻
Callout box – červený
👉🏻
Callout box – růžový
👉🏻
Callout box – fialový
👉🏻
Callout box – brand primary

Snippets

⚠️
Vkládání a správa snippetů je vyhrazena týmu Frontend Garden. Díky za pochopení!

Snippety se skládají ze tří částí:

  1. šablona snippetu definovaná v HTML šabloně Frontend Garden (nelze uživatelsky měnit),
  2. data snippetu spravovaná v administraci Ghost na stránce Settings > Code injection,
  3. volání snippetu vkládané do článku nebo stránky pomocí dynamické nabídky.

HTML API – volání

Volání snippetu je HTML kód, který se spáruje s daty a šablonou. Pokud nejsou volaná data nalezena, snippet se nezobrazí.

Parametr Typ* Povinné Popis
data-snippet [ newsletter-signup | post-box-ad | post-breakout-ad ] ✅ Šablona snippetu
data-populate string — ID dat pro snippet – klíč v globálním objektu snippetsData. Nepovinné pouze pro typ newsletter-signup.

* Kromě uvedených typů existuje ještě bottom-ad, který však není možné vkládat do článku ani do stránky – zobrazuje se vždy až za jejich koncem, pokud má definovaná data.

Ukázkové volání:

<aside data-snippet="post-box-ad" data-populate="example-post-box-ad"></aside>

JS API – data

Data snippetů musí být definovaná v globálním objektu snippetsData uvnitř <head>.

Parametr Typ Povinné Popis
ctaLabel string ✅ Text výzvy k akci
ctaUrl string ✅ Cílová URL výzvy k akci
text string ✅ Text snippetu
title string ✅ Nadpis snippetu

Ukázková data:

const snippetsData = {
    'example-post-box-ad': {
        ctaLabel: 'Dynamic CTA label',
        ctaUrl: 'https://frontend.garden',
        text: 'Dynamic <strong>text</strong>',
        title: 'Dynamic title',
    },
 };

Newsletter Signup

Blok pro přihlášení k newsletteru, typicky vkládáný do první třetiny článku.

Post Box Ad

Box pro malou inzerci.

Post Breakout Ad

Box pro velkou inzerci.