Jak využít nové frameworky, AI asistenty a edge computing v produkčním prostředí.
Ranked
Číslovaný výpis s velkým serifovým pořadovým číslem. Pro top články, žebříčky, nejčtenější.
Top 5
.ranked--green (primární zelená – výchozí styl)
.ranked--grey (neutrální šedá – méně výrazný žebříček)
Tile
Dlaždice s ikonou — auto-fill grid. Pro kategorie, služby, sekce navigace.
Kategorie služeb
🌐
Webové stránky
PHP, Nette
📱
Mobilní aplikace
React Native
⚙️
Správa systémů
Audit, konzultace
🔧
Testování
CI/CD, QA
🛡️
Bezpečnost
GDPR, audit
📊
Analytika
GA4, dashboardy
Line
Řádkový výpis s ikonkou nebo avatarem vlevo. Varianty: .line--clean (bez oddělovačů), .line--hoverable (klikatelné řádky se stavem active).
Základní – ikony (kontakty)
E-mail podpora
info@vytvorweb.cz — odpovídáme do 24 h
Telefonická podpora
+420 777 123 456 — po–pá 9–17
Adresa
Sadská 289 12, Středočeský kraj
S avatarem + hodnotou napravo
Jan Novák
jan@example.cz
Jana Horáková
jana@example.cz
Petr Novák Top
petr@example.cz
1 500 Kč/h
.line--clean (bez oddělovačů)
Vývoj na míru
Vlastní CMS
Technická podpora
Hostingové řešení
.line--hoverable (klikatelné řádky, .list-item--active)
Přehled
Statistiky a souhrn
Produkty
Správa produktů
Uživatelé
Správa účtů
Nastavení
Link
Navigační seznam — <ul> s <li><a>. Při hoveru se text posune doprava.
Rows
Obrázek vlevo (zoom on hover), body vpravo — meta, titulek, perex, tagy. Pro články, produkty, inzeráty.
Výpis článků
Přístup ke tvorbě komponentové knihovny bez zbytečné komplexnosti.
Box
Grid karet s obrázkem nahoře. Badge-wrap s autorem a tagy překrývá obrázek. auto-fill minmax(240px, 1fr).
Grid karet
Lukáš OreškaPHP
Popis projektu a technologií.
Jan Novák
Přehled novinek v PHP 8.3.
Tipy pro rychlejší SQL dotazy.
Cards
Bootstrap card struktura — card-header s obrázkem, card-body s obsahem, card-footer s CTA. Text CTA vlevo, šipka vpravo (výška 100 % patičky).
Grid s CTA v patičce
Lukáš OreškaPHP
Popis projektu a technologií použitých při vývoji portálu.
Jan Novák
Přehled nejdůležitějších novinek v PHP 8.3.
Tipy pro rychlejší SQL a efektivní práci s ORM.
Compact
Kompaktní grid — menší obrázky (4/3), minimalistický titulek, CTA v patičce. Pro boční panel nebo „doporučené" sekce.
Horizontal compact
Horizontálně posuvný řádek kompaktních karet. Flex s overflow-x: auto, scrollbar stylovaný.
Img (gradient overlay)
Obrázky přes celý list-item, text v gradient overlay dole. --list-img-cols určuje počet sloupců. Hover přiblíží obrázek.
Vertical img
Vertikálně posuvný seznam s thumbnaily vlevo a textem vpravo. Stylovaný scrollbar. --list-vimg-rows určuje počet viditelných položek.
Jak jsme postavili inzertní systém pro 50 000 uživatelů
Nové trendy v PHP ekosystému pro rok 2025
Optimalizace databázových dotazů v Doctrine
Správa serverů pomocí Dockeru
Automatizace testování v CI/CD pipeline
Carousel
Horizontální karusel — --carousel-cols počet viditelných položek (zde 3), --carousel-step krok posunu (výchozí = cols). Track .carousel-track se posouvá transformem, klipuje sám .list--carousel. Šipky .carousel-arrow--prev/--next stojí absolutně u levého a pravého okraje, tečky .carousel-dots pod výpisem — generuje si je JS, proto je element prázdný. Pro nekonečnou smyčku si JS klonuje cols položek na oba konce (.carousel-clone). Vyžaduje produkční assets/js/app.js.
--carousel-cols: 3
Ukázkový perex článku — dvě věty, aby bylo vidět, jak se text chová pod titulkem.
Ukázkový perex článku — dvě věty, aby bylo vidět, jak se text chová pod titulkem.
Ukázkový perex článku — dvě věty, aby bylo vidět, jak se text chová pod titulkem.
Ukázkový perex článku — dvě věty, aby bylo vidět, jak se text chová pod titulkem.
Ukázkový perex článku — dvě věty, aby bylo vidět, jak se text chová pod titulkem.
Carousel hero
Vodorovné dvojče svislého karuselu: fotka přes celou plochu, text v přechodu --list-overlay-gradient, který na hover vyjede nahoru (--list-overlay-peek). Vidět je vždy jen jedna položka, výšku drží --carousel-row-height (stejný token jako u svislého). Šipky .carousel-arrow--prev/--next stojí svisle na střed u levého a pravého okraje, tečky .carousel-dots dole na střed. Není to vlastní mechanika — je to .list--carousel s jedním viditelným sloupcem (--carousel-cols: 1), proto element nese obě třídy; produkční assets/js/app.js inicializuje výhradně .list--carousel. Tokeny --list-overlay-* a --list-carousel-*.
--carousel-cols: 1
Ukázkový perex — u hero karuselu leží text v přechodu přes fotku.
Ukázkový perex — u hero karuselu leží text v přechodu přes fotku.
Ukázkový perex — u hero karuselu leží text v přechodu přes fotku.
Bar (tichá lišta)
Jednořádková pilulka: štítek s hlavičkou výpisu, kulatá miniatura, titulek + krátký text, datum, počítadlo a dvě kulaté šipky. Vidět je vždy jen jedna položka, šipky ji přepínají. Není to vlastní mechanika — je to .list--carousel s jedním viditelným sloupcem (--carousel-cols: 1), proto element nese obě třídy; produkční assets/js/app.js inicializuje výhradně .list--carousel. Klipuje .list-bar__window, ne sám .list — track se posouvá transformem, takže kdyby ořezával přímo on, posunul by se s obsahem i jeho rámeček. Počítadlo je uvnitř každé položky (JS ho neaktualizuje a položky si pro nekonečnou smyčku klonuje). Tokeny --list-bar-*.
Statický náhled (bez JS je vidět první položka)
Hydratační esence a krém pro citlivou pleť.
Objednávky do pátku 12:00 dorazí do neděle.
Prodejna má 1. ledna zavřeno, e-shop běží dál.
Editorial
Magazínový layout — jeden velký .list-item--featured přes celou šířku (obrázek jako pozadí, gradient overlay, text absolutně dole), pod ním grid malých položek .list-item--small.
Carousel vertical
Vertikální karusel — položky se posouvají svisle přes translateY. CSS proměnná --carousel-rows určuje počet viditelných řádků. Šipky .carousel-arrow--up/down, tečky vertikálně. Vyžaduje produkční assets/js/app.js.
--carousel-rows: 1
Jak jsme postavili inzertní systém pro 50 000 uživatelů
Popis projektu a technologií použitých při vývoji rozsáhlého portálu s důrazem na výkon a škálovatelnost.
Nové trendy v PHP ekosystému pro rok 2025
Přehled nejdůležitějších novinek v PHP 8.3 a moderních frameworcích pro webový vývoj.
Optimalizace databázových dotazů v Doctrine ORM
Tipy pro rychlejší SQL dotazy a efektivní práci s Doctrine ORM v projektech.
Comments
Výpis komentářů s avatarem, jménem a datem. Vnořené odpovědi přes .list-item__replies. Avatar jako obrázek nebo inicíály (.list-item__avatar--initials).
Komentáře s odpovědí
Table
Tabulkový výpis. Sloupce: thumbnail, název s perexem a meta (tagy, počet zobrazení, autor), kategorie, datum, akce.
| Název | Kategorie | Publikováno | ||
|---|---|---|---|---|
 |
Popis projektu a technologií použitých při vývoji rozsáhlého portálu. |
Technologie | ||
 |
Přehled nejdůležitějších novinek v PHP 8.3 a moderních frameworcích. |
PHP | ||
 |
Tipy pro rychlejší SQL dotazy a efektivní práci s Doctrine ORM. |
Databáze |
Horizontal cards
Horizontálně orientované karty. .list-item.card je CSS gridem (140px 1fr auto): .card-header s obrázkem vlevo, .card-body s obsahem, .card-footer s CTA vpravo.
Výpis článků – horizontální karty
Lukáš Oreška
PHP
Jak jsme postavili inzertní systém pro 50 000 uživatelů
Popis projektu a technologií použitých při vývoji rozsáhlého portálu s důrazem na výkon.
Jan Novák
Laravel
Nové trendy v PHP ekosystému pro rok 2025
Přehled nejdůležitějších novinek v PHP 8.3 a moderních frameworcích pro webový vývoj.
Optimalizace databázových dotazů v Doctrine ORM
Tipy pro rychlejší SQL dotazy a efektivní práci s Doctrine ORM v projektech.
Collapsible
Rozbalitelný seznam — každá položka má klikatelný .list-item__toggle
s ikonkou, nadpisem a chevronem. Obsah (.list-item__content) se skryje/zobrazí
přidáním třídy .is-open na .list-item.
Vhodné pro FAQ, sekce nastavení, hierarchické nabídky nebo rozbalitelné filtry.
FAQ – nejčastější dotazy
Doba vývoje závisí na rozsahu projektu. Jednoduchá firemní prezentace trvá 2–4 týdny,
komplexní e-shop nebo portál 2–6 měsíců. Po analýze a schválení wireframů poskytujeme
závazný harmonogram.
Ceny se odvíjí od rozsahu a složitosti. Firemní web začíná od 30 000 Kč,
e-shop od 80 000 Kč. Každý projekt nacenujeme individuálně po bezplatné konzultaci.
Ano, nabízíme komplexní správu webů včetně hostingu, pravidelných aktualizací,
zálohování a technické podpory. K dispozici jsou měsíční plány dle rozsahu webu.
Primárně pracujeme s PHP (Nette Framework), MySQL a vlastním CMS systémem.
Na frontendu používáme SCSS, moderní vanilla JS nebo React dle potřeb projektu.
Přehled kategorií – s checkboxem a cenou
Skvělá práce, projekt byl dodán včas a přesně dle zadání. Rozhodně doporučuji!
Děkuji za zpětnou vazbu!
Profesionální přístup, výsledek předčil očekávání. Systém funguje bez problémů.