Skip to content

Releases: paveltravnicek/sw-design-system

Release list

Release 2.0

Release 2.0 Latest
Latest

Choose a tag to compare

View all tags
@paveltravnicek paveltravnicek released this 21 Jul 09:49
2-0
39f8169

Release 2.0

Návazná verze na v1.0. Obsahuje opravu, která se týká všech sekcí, dvě nové položky v knihovně komponent a doladění ceníku.

Opraveno

  • Sekce už nepřebíjejí font webu. .sw-canvas a .sw-section dřív natvrdo nastavovaly vlastní systémový font (--sw-font), takže každá sekce postavená v design systému ignorovala font zvolený v LiveCanvas/tématu. Od této verze font dědí normálně z webu, stejně jako zbytek stránky. Vizuální dopad: pokud web používá jiný font než systémový výchozí, sekce po aktualizaci změní písmo — to je záměr, ne chyba.
  • Odstraněno zbytečné pravidlo box-sizing: border-box duplikující to, co už globálně nastavuje Bootstrap.
  • Doladěna komponenta Seznam kroků (ikony) — v předchozí verzi jí chyběl styl pro ikonový odznak (.sw-step-icon), zobrazovala se tedy bez kruhového pozadí kolem ikony.
  • Doplněna podpora pro sw-pricing-grid--4 (čtyři sloupce ceníku vedle sebe na velkých obrazovkách) — třída byla v HTML připravená, ale bez odpovídajícího CSS.

Nové

  • Tabulka s cenami (4 sloupce) — nová komponenta v knihovně (component-pricing-4col.html), čtyři plány vedle sebe, se stejným vzhledem jako stávající třísloupcová varianta.
Assets 2
Loading

Release 1.0

Release 1.0

Choose a tag to compare

View all tags
@paveltravnicek paveltravnicek released this 29 May 10:24
1-0
130a272
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

SW Design System — Release 1.0

Konfigurovatelný design systém pro weby Smart Websites. Barvy, atmosféru, tvarosloví, hloubku, pohyb a dark mode nastavíte na jednom místě v administraci — plugin z toho vygeneruje skutečný CSS soubor. Součástí je knihovna hotových komponent a nápověda.

Hlavní funkce

Centrální konfigurace vzhledu

Veškerý vzhled webu řídíte z jedné stránky pod Vzhled → SW Design System (pouze administrátoři). Nastavení je rozdělené do přehledných záložek:

  • Barvy — hlavní a doplňková barva, tři stopy pozadí, barva textu a tlumeného textu.
  • Atmosféra — úhel gradientu pozadí, intenzita barevných „světel", jemná mřížka. Nejsilnější páka pro odlišení webů.
  • Tvarosloví — zaoblení rohů, tvar tlačítek, styl karet (sklo / plné / obrys).
  • Hloubka — síla stínů a intenzita záře.
  • Typografie — velikost a mezery mezi znaky u nadpisů design systému (nezasahuje do globálního písma tématu).
  • Pohyb — animace nájezdu prvků a 3D náklon mockupů, vždy s respektem k systémovému „omezit pohyb".
  • Layout — svislé mezery mezi sekcemi.
  • Dark mode — volitelné barvy pro tmavý režim.

Každé nastavení má u sebe podrobné vysvětlení, co dělá.

Generovaný CSS soubor (žádné inline styly)

Při uložení plugin vygeneruje wp-content/uploads/sw-ds/sw-tokens.css s přepsanými hodnotami. Soubor se načítá za statickým komponentovým CSS a přebíjí výchozí stav. Je cacheovatelný (cache-busting přes čas úpravy souboru), takže funguje s Varnishem i WP Compress. Do <head> se netiskne nic inline.

Presety pro rychlé odlišení webů

22 hotových sad nastavení v pěti náladách — Základní, Luxus a prémiovost, Hravé a netradiční, Přírodní tóny, Uklidňující tóny. Jedním kliknutím dostanete soudržně jiný vzhled, ideální při použití na více webech. Hodnoty lze po aplikaci dál ladit.

Přenos nastavení mezi weby

Kompletní konfiguraci lze exportovat jako JSON a naimportovat na jiném webu — pro identické nastavení nebo jako zálohu.

Knihovna komponent z GitHubu

Hotové sekce (hero, prvky důvěryhodnosti, obsah s obrázky, CTA) jsou k dispozici jako kopírovatelné HTML pro LiveCanvas. Knihovna se načítá přímo z GitHub repozitáře, takže nové komponenty přidáte commitnutím souboru a záznamu do manifestu — bez nutnosti vydávat novou verzi pluginu. Pokud GitHub není dostupný, zobrazí se komponenty vestavěné v pluginu.

Nápověda

Záložka s vysvětlením, jak design systém používat — plátno, editovatelné texty, obrázky, animace a třídy nadpisů.

Instalace

  1. Nahrajte plugin do wp-content/plugins/ a aktivujte.
  2. Otevřete Vzhled → SW Design System a jednou uložte nastavení (vygeneruje se CSS soubor).
  3. Na stránkách použijte obal sw-canvas a komponenty z knihovny.

Technické poznámky

  • Nastavení je dostupné pouze uživatelům s oprávněním manage_options.
  • Knihovna komponent se načítá přes GitHub API (reaguje na změny okamžitě) s fallbackem na raw a na lokální soubory.
  • Samoaktualizace přes plugin-update-checker a hlavičku Update URI (GitHub releases).
  • Odinstalace pluginu odstraní nastavení i vygenerovaný CSS soubor.
Loading