Как сетка CSS, так и переменные CSS являются мощными инструментами для разработчиков интерфейса.
Первый значительно упрощает создание макетов веб-сайтов, а второй предоставляет всю мощь переменных в таблицах стилей.
В этом уроке я покажу вам, как использовать оба инструмента для быстрого создания прототипов приложений.
Скиллбокс рекомендует: онлайн-курс UX-аналитика Напоминаем: для всех читателей Хабра — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
Настройка контейнера сетки
Наши приложения будут работать с CSS Grid — модулем, позволяющим быстро создавать макеты и управлять ими.Это особенно полезно, если вы работаете со свойствомgrid-template-areas. (Ниже я покажу вам, как его использовать).
Оценим внешний вид нашего приложения — это чат: 
Если мы откроем инструменты разработчика в Chrome, мы увидим, как выглядит эта сетка.
Как видите, здесь шесть столбцов и шесть строк.
Вот код для создания такой сетки:
Сначала мы создаем для него контейнер..app { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px; }
Затем мы говорим, что хотим, чтобы на выходе было шесть столбцов, и каждый из них должен иметь ширину 1fr. Это означает наличие свободного места.
Таким образом, мы делим свободное пространство экрана на шесть частей равной ширины.
Но со струнами все по-другому.
Высота каждой из первых пяти строк также равна 1 fr, но мы ограничиваем высоту последней 60px вместо 1 fr. grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;
Что ж, теперь, когда мы разметили решетку, переходим к следующей части – размещению элементов.
Размещение элементов сетки
Каждый прямой дочерний элемент контейнера сетки является элементом сетки.Всего у нас есть четыре элемента, каждый из которых помещен в прямоугольник, как показано на скриншоте ниже.
Чтобы элементы размещались именно так, как показано выше, нам нужно использовать свойствоgrid-template-areas. .
app {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;
grid-template-areas:
"r m m m m m"
"r m m m m m"
"r m m m m m"
"r m m m m m"
"r m m m m m"
"n s s s s s";
}
Каждая строка кода представляет одну строку таблицы, а каждый символ представляет ячейку сетки.
Символы имеют семантическую связь с элементами сетки, которые они представляют (список помещений, список сообщений, форма новой комнаты, форма сообщения).
Теперь, чтобы разместить наши элементы в соответствии с областями шаблона сетки, мы должны использовать символы со значениями их областей сетки.
Как здесь: .
new-room-form { grid-area: n; } .
rooms-list { grid-area: r; } .
message-list { grid-area: m; } .
send-message-form {
grid-area: s;
}
Конечно, эти классы также применимы к нашим элементам сетки в вашем HTML. Однако я не буду вдаваться в подробности, поскольку вы, скорее всего, знаете, как добавлять классы в HTML-теги.
С этого момента начинаем экспериментировать с планировкой.
Мы можем многое изменить, изменив значения Grid-Template-Area. 
Как показано на иллюстрации выше, я пробую четыре разных макета, меняя положение элемента «Список комнат» и новых элементов формы комнаты.
Единственное, что я меняю, — это свойство Grid-template-areas. Ниже приведены четыре таких варианта.
Постарайтесь сопоставить каждый из них с соответствующим макетом.
grid-template-areas:
"n m m m m m"
"r m m m m m"
"r m m m m m"
"r m m m m m"
"r m m m m m"
"r s s s s s";
grid-template-areas:
"r m m m m m"
"r m m m m m"
"r m m m m m"
"r m m m m m"
"r m m m m m"
"n s s s s s";
grid-template-areas:
"m m m m m r"
"m m m m m r"
"m m m m m r"
"m m m m m r"
"m m m m m r"
"s s s s s n";
grid-template-areas:
"m m m m m n"
"m m m m m r"
"m m m m m r"
"m m m m m r"
"m m m m m r"
"s s s s s r";
Изменение цветов с помощью переменных CSS
Что ж, теперь мы попробуем изменить цвет приложения с помощью переменных CSS. Если вы до сих пор с ними не работали, давайте посмотрим, что они из себя представляют.
Метод, показанный на нижней картинке, делает код немного проще для чтения, так как, так сказать, имя переменной более семантическое, чем шестнадцатеричное.
Кроме того, второй способ дает большую гибкость в изменении кода.
Давайте посмотрим, что мы можем сделать с нашим приложением, используя разные значения переменных.
:root {
--main-color: #5ea3d0;
--secondary-color: white;
--main-text-color: #3e5869;
--secondary-text-color: #b0c7d6;
--new-room-form: #d9e1e8;
--send-message-form: #F5F5F5;
}
В нашем макете они повторяются 17 раз.
Но мы не будем проверять все локации, лучше посмотрим, как работает основной цвет применительно к цвету сообщений и левой боковой панели.
Вот как мы поиграемся со всем этим в коде.
.
rooms-list { background: var(--main-color); } .
message-text {
background: var(--main-color);
}
Переменные хороши тем, что мы можем редактировать их объявление, и этого будет достаточно, чтобы изменить все приложение.
Пример: :root {
--main-color: red;
}
И вот результат: 
Мы можем просто изменить объявление переменных в :root, что позволит нам поиграть с внешним видом приложения.
Давайте заменим некоторые цвета в :root, используя палитру выше.
:root {
--main-color: #5ea3d0;
--secondary-color: white;
--main-text-color: #3e5869;
--secondary-text-color: #b0c7d6;
--new-room-form: #d9e1e8;
--send-message-form: #F5F5F5;
}
В результате получается совершенно другой внешний вид чата: 
Объединение сетки и переменных
Если мы объединим все это, то сможем полностью изменить дизайн нашего чата.Давайте сделаем это.
Вот как выглядит первоначальная версия по сравнению с финальной.
Как видите, я изменил и палитру, и макет. Единственная разница между этими двумя примерами — это 11 строк кода, которые я здесь выделил.
:root {
--main-color: #ff66ff;
--secondary-color: #fbd8fb;
--main-text-color: #3e5869;
--secondary-text-color: #d8b2ff;
--new-room-form: #ffb2ff;
--send-message-form: #d8b2ff;x
}
.
app {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;
grid-template-areas:
"m m m m r r"
"m m m m r r"
"m m m m r r"
"m m m m r r"
"m m m m n n"
"f f f f f f";
}
Разве это не круто?
Скиллбокс рекомендует:Теги: #CSS #дизайн #Прототипирование #приложения #skillbox #skillbox #CSS #HTML #IT-образовательный процесс #дизайн
- Практический курс PHP-разработчик от 0 до PRO .
- Годовой онлайн-курс «Профессия Веб-разработчик» .
- Практический двухмесячный курс Python-разработчик с нуля .
-
Браузеры, Браузеры, Браузеры, Браузеры
19 Oct, 24 -
Зачем Писать Собственный Игровой Движок?
19 Oct, 24 -
Отчет С Петербургской Scala Meetup 2017.3
19 Oct, 24 -
Javascript Roguelike/Rpg (30 Строк Кода)
19 Oct, 24
