Восьмой урок. Знакомство с UniCSS

Процесс верстки обычно происходит так. Вначале нужно понять что именно следует сделать. Как правило — это визуальный графический макет того, что необходимо получить в итоге. Следует проанализировать исходный макет и понять из каких блоков он состоит.

На макете выделяются блоки, которые будут составлять модульную сетку страницы. Если блоки визуально следуют один за другим, то такой вариант самый простой. Если же на макете есть колонки, например боковой сайдбар, то это уже вариант сложнее.

В любом случае вначале на макете выделяется модульная сетка, блоки которой будут определенным образом расположены относительно друг друга.

В этот момент создается начальный html-каркас страницы, где размещаются div-блоки модульной сетки. Как правило, уже на этом этапе следует продумать как будут именоваться css-классы каждого блока. Именование должно быть осмысленным, чтобы не запутаться в дальнейшем. Скажем класс .sidebar более понятен, чем .block2.

Дальнейшая верстка заключается в создании детальной html-разметки каждого блока и элемента. И здесь также придется придумывать названия классов.

Работа происходит в двух файлах — в одном пишется html-разметка, в другом css-код.

Одной из проблемных мест верстки — это сложность с именованием css-классов. Когда их количество превышает десятки и сотни, то очень сложно уже что-то придумывать и невольно происходит переход к чисто «техническим» классам, не несущих семантической нагрузки.

Одним из способов решения такой проблемы стало использование утилитарных классов — это такие классы, которые могут использоваться без какой-либо привязки к html-разметке страницы. Например класс .red делает текст красным и может применяться к любому тэгу.

Опытные верстальщики имеют свои наборы утилитарных классов, упрощающих верстку не зависимо от проекта. Многие CSS-фреймворки также имеют свои наборы подобных классов. Сложность в том, что у каждого свой «велосипед», который не совместим с другими.

Для решения подобных задач используются css-фреймворки атомарного уровня: в них каждый css-класс описывает какое-то отдельное css-свойство или поведение. Одним из таких атомарных css-фреймворков является UniCSS.

В нём применяется простая и понятная методология именования классов, а сами классы просты по своему коду. И хотя сам фреймворк написан на Sass (который мы будем рассматривать позже), для работы доступен уже готовый css-файл, содержащий наиболее востребованные классы.

У вас может возникнуть вопрос: зачем на таком раннем этапе мы сразу переходим к css-фреймворку? Может лучше потренироваться на простых css-стилях?

Представьте себе, что вам нужно закрутить 100 саморезов. Если вам дадут только отвёртку, то потребуется целый день чтобы выполнить работу, в результате которой ладони буду стёрты до крови. С другой стороны, можно взять специализированный инструмент — шуруповёрт, потратить на его изучение несколько минут и выполнить всю работу стократно быстрей и без особых последствий.

UniCSS — это инструмент, который позволит не только научиться быстро и качественно верстать, но и отличный учебный материал, по которому вы сможете изучить css-код.

Скачайте с сайта UniCSS архив с файлами. В каталоге site2 (можно любой другой) сделайте подкаталог assets, куда скопируйте все файлы из архива. У вас получится вот такой вариант:

\site2
	\assets
		\css
			style.css
		
		\fonts
			\fontawesome
				fontawesome-webfont.woff
				fontawesome-webfont.woff2
		
		\sass
			много scss-файлов
	
	.htaccess
	index.php и другие файлы/страницы сайта

В UniCSS уже используется normalize.css и сброс «border-box», потому больше ничего подключать не нужно.

Структура html-страницы в index.php будет такой:

<!DOCTYPE HTML>
<html><head>
	<meta charset="UTF-8">
	<title>Титул в браузере</title>
	
	<link rel="stylesheet" href="assets/css/style.css">
	<link rel="stylesheet" href="assets/css/my-style.css">
	
</head><body>

тут html-код

</body></html>

Свои стили мы можем подключать в assets/css/my-style.css — пусть пока этот файл будет пустым.

Путь к css-файлам мы указываем относительными, чтобы не привязываться к конкретному адресу сайта. Пока мы не создаем подкаталогов для страниц, проблем не будет.

На сайте UniCSS на странице Cheatsheet вы найдёте все css-классы фреймворка, разбитые на функциональные группы. В сплывающей подсказке выводится информация о css-стиле данного класса. Вам достаточно лишь бегло ознакомиться с каждой группой.

Доступные цвета перечеслены на странице сайта Samples в группе Colors.

В каталоге sass располагается исходный css-код. Во многом вы увидите привычный css-код, хотя фреймворк активно использует возможности sass-препроцессора. Это также вопросы будущих уроков.

Задания

1. Создайте новую страницу по астрономии из википедии.

2. Оформите её с применением классов форматирования текста: жирный, курсив и т.п. Разместите хотя бы два изображения с обтеканием слева и справа. Сами файлы разместите в каталоге assets/images/

3. Попробуйте указать любую иконку, основываясь на примерах в UniCSS. Обратите внимание на ссылку на сайт иконочного шрифта Font Awesome, где вы можете выбрать подходящую иконку.