CSS Grid Layout a komiks (vysvětluje kocour Barry)

() translation by (you can also view the original English article)

Ukazuje se, že CSS Grid se dá docela dobře využít pro rozvržení online komiksů, zvláště pokud chcete, aby vaše komiksy byly flexibilní. V tomto návodu použijeme kocoura Barryho a ukážeme si, jak vytvořit responsivní komiks.

Kocour Barry

Pro tento návod si vypůjčíme některé kresby z GraphicRiver; Sleepy Fat Cat je ve skutečnosti zobrazení písma, ale v podobě pěkné vektorové kočky – ideální pro naše komiksové demo!

Sleepy Fat Cat on GraphicRiver — Sleepy Fat Cat Typeface na GraphicRiver

Nastavte si prohlížeč

Nezapomeňte, že pro zobrazení CSS Gridu, budete potřebovat nejnovější funkce prohlížeče. Pokud používáte nepodporovaný prohlížeč, přečtěte si CSS Grid Layout: Rychlý průvodce. A tady vidíte, na čem budeme pracovat:

Celou ukázku najdete na CodePen. Je vidět, že reaguje na různé velikosti obrazovky.

1. Značky

Začneme rozložením HTML:

<section class="grid-1">

  <div class="panel panel-title">
    <h1>Barry’s Cushion</h2>
    <p>A tale of lethargy and soft furnishings</p>
  </div>
    <div class="panel panel-1"></div>
    <div class="panel panel-2"></div>
    <div class="panel panel-3">
      <p>“I should probably get up–things to do.”</p>
    </div>
    <div class="panel panel-4"></div>
    <div class="panel panel-5"></div>
    <div class="panel panel-6"></div>
    <div class="panel panel-7">
      <p>“Naaah.”</p>
    </div>
    <div class="panel panel-8"></div>
    <div class="panel panel-9"></div>
    <div class="panel panel-copyright">
      <p>Sleepy Fat Cat by messenj4h<br>&copy; Copyright happily ever after <a href="https://webdesign.tutsplus.com">Envato Tuts+</a>
    </div>
</section>

Element <section> použijeme pro naši mřížku a elementy <div class="panel"> jako položky mřížky.

Několik panelů obsahuje text, ale zbytek využijeme pro naše komiksové obrázky. Máme dvě možnosti: buď obrázky umístíme přímo do panelů, nebo je přidáme pomocí CSS. Já využiji druhou možnost, protože poskytuje snadnější kontrolu nad umístěním a změnou velikosti grafiky, ale dalo by se argumentovat tím, že vložené obrázky budou více přístupnější. Záleží na vás.

2. Základní styly

Nejprve dodáme styly, kterými nadefinujeme typografii a barvy:

/* basics */
body {
  background: #f8f7f2;
  padding: 0 10%;
  font: 100%/1.5 'Kalam', cursive;
}

h1 {
  margin: 0;
  line-height: 1;
  padding: 10px;
  color: #251b19;
}

p {
  margin: 0;
  padding: 10px;
  color: #251b19;
  font-size: 1.2em;

a {
  color: #e56633;
}

a:hover {
  text-decoration: none;
}

Pro text jsem zvolil webové písmo Kalam od Googlu. Je psané rukou a počítám, že se bude skvěle hodit pro náš komiks. Font se připojí v CSS souboru, nebo prostřednictvím odkazu v hlavičce dokumentu:

1	<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet">

3. Naše mřížka

Začneme rozvržením pro mobilní zařízení. Rozvrhneme si prvky do jednoho sloupce s jediným panelem na každém řádku:

.grid-1 {
  display: grid;
  width: 100%;
  max-width: 770px;
  margin: 10% auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto;
  grid-gap: 25px;
}

Při pohledu na náš dřívější tutoriál o Gridu si vzpomenete, že grid-template-columns definuje, kolik budeme mít sloupců a jak budou široké. grid-template-rows dělá totéž pro řádky. V našem příkladu jsem jich nadefinovali jedenáct Řádky s obrázky budou 200px vysoké a řádky s textem budou měnit velikost automaticky podle obsahu. Nakonec grid-gap definuje velikost okraje.

Teď přidáme některé obecné styly pro naše panely:

.panel {
  color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0px 0px 0px 5px #251b19;
}

Vlastnosti background zatím nemají žádný vizuální dopad, ale budou, jakmile přidáme obrázky. box-shadow se chová jako ohraničení. Pokud chcete, můžete použít tradiční border, ale box-shadow je flexibilnější.

Podívejme se, co zatím máme!

4. Obrázky kočky

Pro co jiného byl Internet stvořen, že? Připravil jsem pár SVG obrázků a jeden po druhém je přidám do panelů:

1	.panel-1 {
2	background-image: url(cat-1.svg);
3	}

Vypadá to dobře!

Ale nechci ohraničení kolem všech panelů. Odeberu je (pomocí box-shadow: none;) od těch, které obsahují text. Tedy od prvního a posledního obrázku.

5. Media Queries

Obrázky zatím nefungují úplně dokonale. Chudák starý Barry je špatně oříznut. Je na čase podívat se za hranice mobilních zařízení a změnit naši mřížku pro větší zobrazení. Přidáme media queries, jeden na 400px a jeden na 600px (můžete použít libovolná čísla, pokud chcete):

/* media query 1 */
@media only screen and (min-width: 400px) {
  
}

/* media query 2 */
@media only screen and (min-width: 600px) {
  
}

Pro každou definici pak změníme rozložení mřížky.

/* media query 1 */
@media only screen and (min-width: 400px) {
  
  .grid-1 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 200px auto 200px 200px auto 200px auto;
  }  
  
}

/* media query 2 */
@media only screen and (min-width: 600px) {
  
  .grid-1 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 200px 200px 200px auto;
  }
  
}

Dva sloupce a osm řádků pro větší obrazovky, tři sloupce po pěti řádcích pro ještě větší.

Šířky

Teď, když jsme opustili omezení jednoho sloupce, můžeme být kreativnější. Například bude potřeba, aby nadpis odpovídal šířce celého komiksu. Totéž platí o panelech s textem a prohlášení o autorských právech. Dokonce i některé obrázky by vypadaly lépe v plné šířce panelů. Takže tyhle drobnosti přidáme k prvnímu media query:

  .panel-title,
  .panel-3,
  .panel-6,
  .panel-7,
  .panel-copyright {
    grid-column: span 2;
  }

V některých případech jsem také změnil typografii a tady je výsledek:

Rozložení se dvěma sloupci vypadá skvěle! Nicméně třísloupcový komiks potřebuje opravit.

6. Oprava třísloupcového layotu

Pravidla, která jsme použili při tvorbě vzhledu pro mobilní zařízení, se stále aplikují na větší obrazovky. Musíme tedy zapracovat na našich panelech a obnovit některé styly.

Začněte tím, že .panel-title zahrnuje tři sloupce místo dvou. Dále .panel-3 (s textem) můžeme nastavit zpátky na grid-column: span 1; nebo grid-column: auto;

To samé aplikujeme na .panel-6. S několika dalšími změnami byste měli získat něco takového:

Trošičku Flexboxu

Rád bych, aby první dialog byl vertikálně vycentrován. Takže k tomu použijeme flexbox. Do druhého media query přidejte:

1	.panel-3 {
2	display: flex;
3	align-items: center;
4	}

before flexbox after flexbox — Před flexboxem, po flexboxu

7. Překrytí panelů

CSS Grid nás neomezuje jen na stejně vzdálené bloky, které se zobrazí ze shora dolů. Naštěstí můžeme panely libovolně vrstvit. Chceme, aby náš poslední text byl trochu zajímavější a tak jej přiřadíme na stejnou pozici jako další panel:

  .panel-7 {
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
  }
  
  .panel-8 {
    grid-column: 1 / span 2;
    grid-row: 4;
  }

Oba panely .panel-7 a .panel-8 nastavíme na grid-column: 1; a grid-row: 4;. To znamená, že jsou oba přesně na stejném místě a druhý se vykresluje na prvním.

Za pomoci z-index můžeme změnit pořadí překrývání, takže .panel-7 nastavte na z-index: 1;. Tím se dostane nahoru.

Poznámka: Teď jsme odstranili řádek, takže budete muset zkontrolovat, zda je grid-template-rows v pořádku.

Teď přidáme pár dalších stylů. Opět, položky mřížky nejsou striktně omezeny, můžeme je posunout za pomoci záporného marginu a dokonce je bez problémů transformovat. Přidal jsem některé styly do panelu s odstavcem a tohle je výsledek:

Závěr

Skvěle, tady je náš výsledek!

Tohle bylo zábavné cvičení za pomocí CSS Gridu, během kterého jsme se seznámili s novou koncepcí. Doufám, že se vám líbilo. Teď, pokud to nevadí, si jdu zdřímnout.

Další čtení

Pochopení CSS Grid Layoutu série pro začátečníky
Sleepy Fat Cat Typeface na GraphicRiver
Mechanika komiksu
Pochopení komiksu od Scotta McClouda