Skip to content
Menu
CDhistory
CDhistory

Komplexní průvodce mřížkou 8pt

Posted on 3 srpna, 2021 by admin

Rozložení

Od té doby, co kóduji část projektů, na kterých pracuji, používám standardní mřížku Bootstrap 12 s drobnou úpravou. Jsem zastáncem práce s rozšířenými nástroji – proč? Inu, existuje důvod, proč jsou tak rozšířené. Fungují a jsou efektivní. Místo abych znovu vynalézal kolo, raději upravím to, které mám. Je to úsporné, rychlé a předvídatelné.

Přizpůsobení mřížky Bootstrap je nativně podporováno a velmi snadno proveditelné; pokud jste trochu gramotní v CSS, zde je návod, jak přesně na to.

Horizontální rytmus

Standardní mřížka Bootstrap má rozložení 12 sloupců s 15px okrajem na každé straně sloupce; výsledkem je 30px žlábek mezi sloupci plus 15px vlevo a vpravo od mřížky. Jedná se o výchozí nastavení, které si nakonfiguji podle svých představ nebo o konfiguraci požádám vývojáře.

Celá mřížka se nazývá Container. Kontejner může mít buď plynulou, nebo responzivní velikost. Fluidní kontejner vždy zabere celou šířku, která je k dispozici.

Dva typy kontejneru Bootstrap a šířka sloupce s jeho 15px okraji. Výňatek z mého kurzu UI/UX.

Pro každý rozsah obrazovky existuje šířka kontejneru, která je optimalizovaná pro tento rozsah obrazovky. Zpočátku se doporučuje používat výchozí rozměry, nicméně je docela fajn si je přizpůsobit, když jste dál v králičí noře 8pt.

Rozložení tabulky z Bootstrapu. Zde vidíte velikosti kontejnerů pro jednotlivé rozsahy rozlišení.

Při zobrazení našich webových stránek založených na Bootstrapu na libovolném zařízení prohlížeč zkontroluje, kolik místa je k dispozici pro zobrazení doma, a podle tohoto místa nastaví rozložení. Pokud máme iPhone široký 414px, jsme v kategorii Extra small a náš kontejner zabere 100 % dostupné šířky. Když se přepne na širší zařízení, řekněme tablet (šířka 768px), změní se naše kategorie zařízení na Střední a šířka kontejneru bude 720px.

Jestliže jste jako já, rádi byste si tato nastavení přizpůsobili. Začneme tím, že vytáhneme naše kalkulačky 🧮.

Při návrhu pro stolní počítače bych chtěl mít každý sloupec široký 72px a žlábek 24px nebo 32px. Gutter 24px bude mít za následek 12px na každé straně kontejneru a gutter 32px bude mít za následek 16px na každé straně. Obvykle volím žlábek 24px.

(12 sloupců × 72) + (12* žlábků × 24) = 1152px

*Technicky je 11 žlábků plus dvě poloviny na každé straně kontejneru.

(12 × 72) + (12 × 24) = 1152

Návrh pro mobilní zařízení představuje několik nových výzev. Za prvé, ne všechny rozměry šířky mobilních zařízení jsou dělitelné číslem 8. V tomto případě je důležité spolehnout se na vlastní instinkt designéra a najít střední cestu. Za druhé, 12 sloupců není při návrhu pro úzké obrazovky příliš praktických. Sám volím na mobilních zařízeních rozvržení do 6 sloupců, i když když jsem experimentoval s rozvržením do 2 sloupců, konečné výsledky nebyly o nic horší.

Toto je na vás, abyste se rozhodli sami.

Pro obrazovku širokou 375pt použijte tato nastavení:

Ačkoli to není dokonalá osmička, je to nejlepší střední cesta, kterou jsem našel.

Zachování šířky žlábků je důležitější než zachování šířky sloupců, protože žlábky fungují jako bílé místo mezi prvky – a to vlastně určuje rytmus; zatímco sloupce diktují šířku prvku.

Pokud se vám více líbí dvousloupcová škola pro mobilní zařízení, toto je přívětivější nastavení rozložení pro 8

.

Napsat komentář Zrušit odpověď na komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Nejnovější příspěvky

  • Acela je zpět:
  • OMIM záznam – # 608363 – CHROMOSOM 22q11.2 DUPLICATION SYNDROME
  • Rodiče Kate Albrechtové – více o jejím otci Chrisu Albrechtovi a matce Annie Albrechtové
  • Temple Fork Outfitters
  • Burr (román)

Archivy

  • Únor 2022
  • Leden 2022
  • Prosinec 2021
  • Listopad 2021
  • Říjen 2021
  • Září 2021
  • Srpen 2021
  • Červenec 2021
  • Červen 2021
  • Květen 2021
  • Duben 2021
  • DeutschDeutsch
  • NederlandsNederlands
  • SvenskaSvenska
  • DanskDansk
  • EspañolEspañol
  • FrançaisFrançais
  • PortuguêsPortuguês
  • ItalianoItaliano
  • RomânăRomână
  • PolskiPolski
  • ČeštinaČeština
  • MagyarMagyar
  • SuomiSuomi
  • 日本語日本語
©2022 CDhistory | Powered by WordPress & Superb Themes
Menu
CDhistory