Десятый урок. Верстаем первый сложный блок

Как правило, при верстке используется лишь небольшое количество css-свойств. Бывают, конечно, задачи, где требуется применять какие-то особенные хитрости, но в 90% случаев всё довольно однообразно.

Рассмотрим верстку из задания предыдущего урока. На выходе должен получиться вот такой блок:

Название сайта

Первым делом нужно задать основной контейнер. Поскольку это сетка, то сразу прописываем flex. Цвет (фон и текст) у нас равномерный для всего блока, то можем их сразу же указать.

<div class="flex bg-blue t-white">

</div>

Пока блок пустой, никакого вывода не будет.

Теперь нужно опеределиться с ячейками. Согласно макету у нас будут две основные ячейки: «иконка + название» и «меню + соц.иконки». Пусть первая будет 30%, вторая 70% ширины:

<div class="flex bg-blue t-white">
	<div class="w30">
		иконка + название
	</div>
	<div class="w70">
		меню + соц.иконки
	</div>
</div>
иконка + название
меню + соц.иконки

Первое, что сразу бросается в глаза — это отстутствие отступов от краёв контейнера. Добавим 20px.

<div class="flex bg-blue t-white pad20">
	<div class="w30">
		иконка + название
	</div>
	<div class="w70">
		меню + соц.иконки
	</div>
</div>
иконка + название
меню + соц.иконки
Внутрений отступ указывается классами padXX, что соответствует padding. Единицы измерения по умолчанию px.
Ширина указывается классами wXX в процентах.

Теперь сделаем первую ячейку. У нас будет иконка и текст. Можно разместить их в одном блоке, а можно сделать их как flex-ячейки, что даст немного больше возможностей. Пусть первая ячейка (иконка) будет 10%, а вторая — 90%. Даже если реальное соотношение будет другим, то браузер автоматом его исправит.

<div class="flex bg-blue t-white pad20">
	<div class="w30 flex">
		<div class="w10">И</div>
		<div class="w90">Название сайта</div>
	</div>
	<div class="w70">
		меню + соц.иконки
	</div>
</div>
И
Название сайта
меню + соц.иконки

Для иконок используются классы i-XX. Можно сделать это с помощью тэга I (это частая практика использовать для иконок данный тэг).

<div class="flex bg-blue t-white pad20">
	<div class="w30 flex">
		<div class="w10"><i class="i-globe"></i></div>
		<div class="w90">Название сайта</div>
	</div>
	<div class="w70">
		меню + соц.иконки
	</div>
</div>
Название сайта
меню + соц.иконки

Следует увеличить размер текста для иконки и для названия сайта. Делается это с помощью классов tXX.

<div class="flex bg-blue t-white pad20">
	<div class="w30 flex">
		<div class="w10 t150"><i class="i-globe"></i></div>
		<div class="w90 t120">Название сайта</div>
	</div>
	<div class="w70">
		меню + соц.иконки
	</div>
</div>
Название сайта
меню + соц.иконки
Размер текста задаются в единицах rem. Это относительные единицы, где основа — это размер текста для самого верхнего корневого элемента, обычно BODY. В UniCSS по умолчанию используется размер текста 16px. Класс t150 указывает сделать текст 150% = 16px * 1.5 = 24px.

Мы видим, что элементы ячеек нужно выровнять по вертикали. Раньше в доflex'овскую эпоху нам пришлось бы придумывать разные хитрости, сейчас же это делается элементарно, поскольку во flex-модели уже предусмотрено вертикальное выравнивание. Для этого нужно для контейнера указать класс .flex-vcenter или .flex-jc-center, что одно и тоже.

<div class="flex bg-blue t-white pad20">
	<div class="w30 flex flex-vcenter">
		<div class="w10 t150"><i class="i-globe"></i></div>
		<div class="w90 t120">Название сайта</div>
	</div>
	<div class="w70">
		меню + соц.иконки
	</div>
</div>
Название сайта
меню + соц.иконки

Переходим ко второй части. Пусть это также будет flex-сетка 80/20% с вертикальным выравниванием. Меню и соц.иконки мы сделаем обычными ссылками в каждой ячейке.

<div class="flex bg-blue t-white pad20">
	<div class="w30 flex flex-vcenter">
		<div class="w10 t150"><i class="i-globe"></i></div>
		<div class="w90 t120">Название сайта</div>
	</div>
	<div class="w70 flex flex-vcenter">
		
		<div class="w80">
			<a href="#">Меню</a> 
			<a href="#">Меню</a> 
			<a href="#">Меню</a> 
		</div>
		
		<div class="w20">
			соц.иконки
		</div>
	</div>
</div>
Название сайта
соц.иконки

Меню работает, но нам нужно сделать текст ссылок белым. Сделаем это классом t-white. Также для каждого пункта можно было бы добавить внешний отступ справа, чтобы ссылки не сливались. Это делается через класс mar20-r (что соответствует margin-right: 20px).

<div class="flex bg-blue t-white pad20">
	<div class="w30 flex flex-vcenter">
		<div class="w10 t150"><i class="i-globe"></i></div>
		<div class="w90 t120">Название сайта</div>
	</div>
	<div class="w70 flex flex-vcenter">
		<div class="w80">
			<a class="t-white mar20-r" href="#">Меню</a> 
			<a class="t-white mar20-r" href="#">Меню</a> 
			<a class="t-white mar20-r" href="#">Меню</a> 
		</div>
		
		<div class="w20">
			соц.иконки
		</div>
	</div>
</div>
Название сайта
соц.иконки

Ссылки меню получили нужный цвет, но при наведении на ссылку они получают красный цвет (цвет по-умолчанию для ссылок при наведении). Будет лучше, если мы изменим этот цвет на более гармоничный для синего фона. Для таких задач используются UniCSS классы hover, которые работают только при наведении. Например hover-t-blue200 сработает только при наведении на ссылку и будет соответствовать обычному классу t-blue200.

<div class="flex bg-blue t-white pad20">
	<div class="w30 flex flex-vcenter">
		<div class="w10 t150"><i class="i-globe"></i></div>
		<div class="w90 t120">Название сайта</div>
	</div>
	<div class="w70 flex flex-vcenter">
		<div class="w80">
			<a class="t-white mar20-r hover-t-blue200" href="#">Меню</a> 
			<a class="t-white mar20-r hover-t-blue200" href="#">Меню</a> 
			<a class="t-white mar20-r hover-t-blue200" href="#">Меню</a> 
		</div>
		
		<div class="w20">
			соц.иконки
		</div>
	</div>
</div>
Название сайта
соц.иконки

Последний блок соц.иконок верстается точно также, только класс иконок указываем непосредственно у ссылок. Также зададим выравнивание для этого блока t-right, чтобы прижать текст к правому краю.

<div class="flex bg-blue t-white pad20">
	<div class="w30 flex flex-vcenter">
		<div class="w10 t150"><i class="i-globe"></i></div>
		<div class="w90 t120">Название сайта</div>
	</div>
	<div class="w70 flex flex-vcenter">
		<div class="w80">
			<a class="t-white mar20-r hover-t-blue200" href="#">Меню</a> 
			<a class="t-white mar20-r hover-t-blue200" href="#">Меню</a> 
			<a class="t-white mar20-r hover-t-blue200" href="#">Меню</a> 
		</div>
		
		<div class="w20 t-right">
			<a class="i-twitter t-blue200 hover-t-white" href="#"></a> 
			<a class="i-facebook t-blue200 hover-t-white" href="#"></a> 
			<a class="i-github t-blue200 hover-t-white" href="#"></a>
		</div>
	</div>
</div>
Название сайта

Иконки задаются как на сайте fontawesome, только вместо префикса fa- мы используем i-. Иконочные классы так настроены, что автоматически создают небольшой 7px правый отступ от текста. Именно поэтому в соц.иконках мы не задаем никакого дополнительного отступа.

Ссылки в примере указываются как href="#". С точки зрения браузера — это ссылка на эту же самую страницу. При верстке, когда реальные ссылки ещё не известны, то часто имено так их и указывают.

Задания

Задания доступны только после авторизации.