Gratulujeme! Úspěšně jste se přihlásili k odběru novinek Frontend Garden.
Ajaj. Při pokusu o přihlášení k odběru novinek došlo k chybě. Zkuste to prosím znovu.
Frontend Garden
  • Články
  • Slovník nové
  • Instagram
  • GitHub

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.

Nejnovější články

Reportáž — čtení na 4 min.

WebExpo 2022 obrazem

Čtrnáctý ročník vrátil WebExpo do zajetých kolejí. Více než tisíc účastníků, živí přednášející a našlapané party, to vše dalo zapomenout na komplikace uplynulých dvou let.

  • Adam Kudrna
    Adam Kudrna
WebExpo 2022 obrazem
WebExpo — čtení na 4 min.

Co nezmeškat na WebExpo 2022

Začíná čtrnáctá konference WebExpo 2022. Tento rok s nabitým frontendovým programem díky spolupráci s komunitou Frontendisti.cz. Co si rozhodně nesmíte nechat ujít?

  • Adam Kudrna
    Adam Kudrna
Co nezmeškat na WebExpo 2022
Kvalita kódu — čtení na 6 min.

Proč (ne)dělat code review?

Pro některé z nás nedílná součást vývoje, pro jiné marnost, která zpomaluje práci na projektu. Kdy dává smysl zavádět code review a jaké výhody může přinést?

  • Kateřina Dlouhá
    Kateřina Dlouhá
Proč (ne)dělat code review?

Odběr novinek

Zadejte svůj e-mail a nenechte si ujít další nové články!

Odesláním formuláře souhlasíte se .
Zpracování osobních údajů probíhá za účelem zasílání newsletteru. Můžete se spolehnout, že vaše osobní údaje nebudeme s nikým sdílet. Z newsletteru se můžete kdykoli odhlásit. Stejně tak můžete kdykoli požádat o úplné smazání svých osobních údajů z naší databáze.
Zkontrolujte svoji e-mailovou schránku a potvrďte své přihlášení kliknutím na odkaz.

Všechna témata

  • Bootstrap
  • CSS
  • Design
  • Dokumentace
  • ITCSS
  • Kariéra
  • Kvalita kódu
  • Nástroje
  • No-code
  • Přístupnost
  • PWA
  • Reportáž
  • Rozhovor
  • Rychlost
  • Sass
  • Typografie
  • Variable fonts
  • WebExpo
  • ✏️ Napište článek
  • Autoři
  • Cookies
  • Instagram
  • GitHub

Obsah na tomto webu je publikován pod licencí Creative Commons CC BY-NC 4.0.
Frontend Garden vysázel, zastřihuje a okopává (s ♥️) Adam Kudrna.
Založeno v květnu 2019.