04.01 Rozcestníky – Obecný

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

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

Popis komponenty

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

Ukázka HTML kódu

<div class="crossroad-std">
	<ul class="grid">
		<li class="grid__cell size--l--12-12">
			100%
		</li>
		<li class="grid__cell size--l--12-12">
			100%
		</li>
	</ul>
</div>

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%

Popis komponenty

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

Ukázka HTML kódu

<div class="crossroad-std">
	<ul class="grid">
		<li class="grid__cell size--l--6-12">
			50%
		</li>
		<li class="grid__cell size--l--6-12">
			50%
		</li>
		<li class="grid__cell size--l--6-12">
			50%
		</li>
		<li class="grid__cell size--l--6-12">
			50%
		</li>
	</ul>
</div>

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%

Popis komponenty

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

Ukázka HTML kódu

<div class="crossroad-std">
	<ul class="grid">
		<li class="grid__cell size--l--4-12">
			33.3333%
		</li>
		<li class="grid__cell size--l--4-12">
			33.3333%
		</li>
		<li class="grid__cell size--l--4-12">
			33.3333%
		</li>
		<li class="grid__cell size--l--4-12">
			33.3333%
		</li>
		<li class="grid__cell size--l--4-12">
			33.3333%
		</li>
		<li class="grid__cell size--l--4-12">
			33.3333%
		</li>
	</ul>
</div>

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%

Popis komponenty

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

Ukázka HTML kódu

<div class="crossroad-std">
	<ul class="grid">
		<li class="grid__cell size--l--3-12">
			25%
		</li>
		<li class="grid__cell size--l--3-12">
			25%
		</li>
		<li class="grid__cell size--l--3-12">
			25%
		</li>
		<li class="grid__cell size--l--3-12">
			25%
		</li>
		<li class="grid__cell size--l--3-12">
			25%
		</li>
		<li class="grid__cell size--l--3-12">
			25%
		</li>
		<li class="grid__cell size--l--3-12">
			25%
		</li>
		<li class="grid__cell size--l--3-12">
			25%
		</li>
	</ul>
</div>

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

Popis komponenty

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

Ukázka HTML kódu

<div class="crossroad-std">
	<ul class="grid">
		<li class="grid__cell size--l--6-12">
			1/2 grid
		</li>
		<li class="grid__cell size--l--3-12">
			1/4 grid
		</li>
		<li class="grid__cell size--l--3-12">
			1/4 grid
		</li>
		<li class="grid__cell size--l--4-12">
			1/3 grid
		</li>
		<li class="grid__cell size--l--4-12">
			1/3 grid
		</li>
		<li class="grid__cell size--l--4-12">
			1/3 grid
		</li>
	</ul>
</div>

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ů

Popis komponenty

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.

Ukázka HTML kódu

<div class="crossroad-std">
	<h2>Nejnovější články</h2>
	<ul class="grid">
		<li class="grid__cell size--m--2-4 size--l--6-12">
			<a href="#" class="box-article-grid box-article-grid--big">
				<p class="box-article-grid__img">
					<img src="../img/illust/article-grid.jpg" alt="" width="570" height="285">
				</p>
				<div class="box-article-grid__content">
					<p class="box-article-grid__meta meta">
						<span class="meta__item font-muni">
							<strong>19.11.2015</strong>
						</span>
					</p>
					<h3 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h3>
				</div>
			</a>
		</li>
		<li class="grid__cell size--m--2-4 size--l--6-12">
			<a href="#" class="box-article-grid box-article-grid--big">
				<p class="box-article-grid__img">
					<img src="../img/illust/article-grid.jpg" alt="" width="570" height="285">
				</p>
				<div class="box-article-grid__content">
					<p class="box-article-grid__meta meta">
						<span class="meta__item font-muni">
							<strong>19.11.2015</strong>
						</span>
						<span class="meta__item">Jméno autora</span>
					</p>
					<h3 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h3>
					<p class="box-article-grid__desc">
						Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
					</p>
				</div>
			</a>
		</li>
		<li class="grid__cell size--s--1-2 size--l--3-12">
			<a href="#" class="box-article-grid">
				<p class="box-article-grid__img">
					<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
				</p>
				<div class="box-article-grid__content">
					<p class="box-article-grid__meta meta">
						<span class="meta__item font-muni">
							<strong>19.11.2015</strong>
						</span>
						<span class="meta__item">Jméno autora</span>
					</p>
					<h3 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h3>
				</div>
			</a>
		</li>
		<li class="grid__cell size--s--1-2 size--l--3-12">
			<a href="#" class="box-article-grid">
				<p class="box-article-grid__img">
					<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
				</p>
				<div class="box-article-grid__content">
					<p class="box-article-grid__meta meta">
						<span class="meta__item font-muni">
							<strong>19.11.2015</strong>
						</span>
						<span class="meta__item">Jméno autora</span>
					</p>
					<h3 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h3>
					<p class="box-article-grid__desc">
						Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
					</p>
				</div>
			</a>
		</li>
		<li class="grid__cell size--s--1-2 size--l--3-12">
			<a href="#" class="box-article-grid box-article-grid--noimg">
				<div class="box-article-grid__content">
					<p class="box-article-grid__meta meta">
						<span class="meta__item font-muni">
							<strong>19.11.2015</strong>
						</span>
					</p>
					<h3 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h3>
				</div>
			</a>
		</li>
		<li class="grid__cell size--s--1-2 size--l--3-12">
			<a href="#" class="box-article-grid box-article-grid--noimg">
				<div class="box-article-grid__content">
					<p class="box-article-grid__meta meta">
						<span class="meta__item font-muni">
							<strong>19.11.2015</strong>
						</span>
						<span class="meta__item">Jméno autora</span>
					</p>
					<h3 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h3>
					<p class="box-article-grid__desc">
						Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
					</p>
				</div>
			</a>
		</li>
	</ul>
	<p class="center">
		<a href="#" class="btn btn-primary btn-s">
			<span>Další články</span>
		</a>
	</p>
</div>

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