04.01 Rozcestníky – Obecný

Zdrojové CSS: /src/css/molecules/crossroad/_std.scss

Ukázka výpisu s šířkou na 100%

Tyto výpisy se používají při výpisu boxových molekul, které by měly být seznamem - nejsou samostatně stojící boxy. Např. výpis novinek, vyjáření klientů, aktualit, článků, události apod.

Pro výpis slouží obal div.crossroad-std – ten se stará o odsazení ze spodu a odsazení mezi řádky, pro které se využívá atom grid, pomocí něj lze udělat sloupce dle potřeby pro jednotlivé breakpointy. Grid také není řešen pomocí elementů div, ale sémantičtěji pomocí elementů ul a li, které definují položky jako seznam.

Nezapomínejte na modifikátory .size--*--*-*, pro menší rozlišení - viz. dokumentace atomu grid

  • 100%
  • 100%

Ukázka výpisu s šířkou na 50%

Ukázka použití gridu - hlavní popis najdete na prvním příkladu.

  • 50%
  • 50%
  • 50%
  • 50%

Ukázka výpisu s šířkou na 33.33%

Ukázka použití gridu - hlavní popis najdete na prvním příkladu.

  • 33.3333%
  • 33.3333%
  • 33.3333%
  • 33.3333%
  • 33.3333%
  • 33.3333%

Ukázka výpisu s šířkou na 25%

Ukázka použití gridu - hlavní popis najdete na prvním příkladu.

  • 25%
  • 25%
  • 25%
  • 25%
  • 25%
  • 25%
  • 25%
  • 25%

Ukázka kombinovaného výpisu

Ukázka použití gridu - hlavní popis najdete na prvním příkladu.

  • 1/2 grid
  • 1/4 grid
  • 1/4 grid
  • 1/3 grid
  • 1/3 grid
  • 1/3 grid

Reálná ukázka výpisu článků

Ukázka použití gridu s reálným obsahem molekul boxů článků. Pokud je nad výpisem použit nadpis h2, pak by měly být uvnitř nadpisy třetí úrovně (h3) - podrobněji je popsáno u typografie. Pod výpisem je pak použit atom buttonu s obalujícím elementem p s modifikátorem z SK mini frameworku.

Nejnovější články

Další články