Proč je to takhle
Co mají návrhy společného a čím se liší. Pořadí odpovídá škále od nejodvážnějšího po nejdecentnější.
Pro všechny návrhy
Každý návrh je jeden soubor CSS (u některých i krátký skript), který se vloží do administrace Shoptetu. Obsah, košík, objednávky i administrace zůstávají beze změny, šablona Step se nemění. Návrh jde kdykoli vrátit odebráním souboru.
Klik na produkt vede na ukázkový detail, na kategorii na ukázkovou kategorii, logo na úvod, košík na košík, obchodní podmínky a kontakty na informační stránku. Návrh tak jde posoudit celý, ne jen úvodní stránka.
Kolem jednoho obsahu jedna linka, žádný box v boxu ani paspartu uvnitř rámu. Každý rámeček má vnitřní odsazení a mezeru od okolí.
Rosita je projekt jednoho člověka: „nabízím, vybírám, popíšu, zabalím“, ne „my“. Platí pro texty v návrzích i v administraci.
Retro edice
Nejodvážnější: plné barevné plochy jako obálky dětských edic ze 70. a 80. let, obří geometrické písmo, plakátová homepage.
Při víc než 8 192 znacích nahrát CSS jako soubor do /user/documents/ a v Záhlaví jen odkázat.
Písmo: jediná rodina Archivo (proměnná šíře a řez, nadpisy široké a tučné, text normální).
Riziko: nejvýraznější a nejméně čitelná. Velké plochy barev unaví, proto text vždy na krémové nebo bílé.
★ Dětský pokoj
Teplá a veselá pro rodiče, kteří hledají dárek: borůvková modrá, meruňková a mátová na papírově krémové, kulaté tvary, obálky jako polaroidy.
Písma: Fraunces (nadpisy, měkký tvar SOFT) a Nunito (text a ovládání).
Riziko: snadno sklouzne k lacinému vzhledu. Proto tři barvy, žádné stíny ani přechody, ikony jednoduché a jednobarevné.
Pravidla, která drží celou variantu pohromadě:
- Rádiusy jen ze škály --d-r-*: velké plochy 28, karty a boxy 18, pole a záložky 10, rámeček polaroidu 6.
- Pilulka (999px) jen pro tlačítka, štítky a množství.
- Výšky ovládání: tlačítko 44, velké tlačítko 52, tlačítko v dlaždici 40, pole formuláře 44.
- Mezery z násobků 8: 8, 16, 24, 32, 48, 64. Okraj stránky 20 px všude, mezera mezi dlaždicemi 16 px.
- Úvod, dlaždice, výhody i newsletter začínají na stejné svislé linii jako logo.
Bibliofil
Elegantní a sběratelská: tmavá knihovní zeleň, zlatá linka, kniha na homepage nasvícená jako exponát ve vitríně muzea.
Při víc než 8 192 znacích nahrát CSS jako soubor do /user/documents/ a v Záhlaví jen odkázat.
Písma: Cormorant Garamond (nadpisy, ceny) a Jost (text a ovládání).
Riziko: tmavé pozadí unaví při dlouhém čtení a obálky s tmavými okraji splývají. Proto obálky na světlejší podložce
a dlouhé texty (popis, obchodní podmínky, košík) na světlé kartě.
Antikvariát
Papírová a tichá: krémový papír, inkoust, vínový akcent, patkové nadpisy, stav knihy jako razítko.
soubor varianta-a-antikvariat.js do Zápatí uvnitř <script>…</script>. Když se CSS nevejde do okna
(limit 8 192 znaků), nahrát ho jako soubor do /user/documents/ a v Záhlaví jen odkázat.
Písma: EB Garamond (nadpisy, ceny) a Source Sans 3 (text a ovládání), obě z Google Fonts.
Většina pravidel má navíc třídu šablony .template-12 (je na <body>), aby přebila šablonu Step bez !important.
Vitrína
Nejdecentnější: minimalistická galerie, hodně bílého prostoru, drobné písmo, obálky bez rámů. Kontrolní vzorek.
Při víc než 8 192 znacích nahrát CSS jako soubor do /user/documents/ a v Záhlaví jen odkázat.
Písmo: jediná rodina Instrument Sans.
Riziko: nejmenší osobitost, obchod může působit jako kterýkoli jiný. Charakter nesou jen obálky a prostor.