Как быстро прототипировать приложения с CSS-сеткой и CSS-переменными

в 14:22, , рубрики: css, html, skillbox, Блог компании Skillbox, дизайн, приложения, прототипирование, Учебный процесс в IT

Как CSS-сетка, так и CSS-переменные представляют собой мощные инструменты для frontend-разработчиков. Первое позволяет значительно упростить создание макетов веб-сайта, в то время как второе дает всю мощь переменных таблицам стилей.

image

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

Skillbox рекомендует: онлайн-курс UX-аналитика
Напоминаем: для всех читателей Хабра — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».

Настройка контейнера сетки

Наши приложения будут работать с CSS-сеткой, модулем, который позволяет быстро создавать макеты и управлять ими. Это полезно, в частности, если вы работаете со свойством grid-template-areas. (Ниже я покажу, как его использовать).

Давайте оценим внешний вид нашего приложения — это чат:

image

Если мы откроем инструменты разработчика в Chrome, то сможем увидеть, что собой представляет такая сетка. Как видите, здесь шесть столбцов и шесть строк.

image

Вот код для создания такой сетки:

.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 вместо 1fr.

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;

Ну а теперь, когда мы разметили решетку, переходим к следующей части — размещению элементов.

Размещение элементов сетки

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

image

Для того, чтобы элементы были размещены точно так, как показано выше, нам необходимо использовать свойство 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";
}

Каждая из строк кода представляет одну строку таблицы, а каждый символ — это ячейка сетки. Символы имеют семантическое отношение к элементам сетки, которые они представляют (список комнат, список сообщений, форма новой комнаты, форма сообщения).

Теперь для размещения наших элементов согласно grid-template-areas мы должны использовать символы с их grid-area значениями. Вот как здесь:

.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-areas.

image

Как показано на иллюстрации выше, я пробую использовать четыре разных макета, изменяя позиции элемента «Список комнат» и новых элементов формы комнаты. Единственное, что я меняю, это свойство 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-переменных. Если вы не работали с ними до настоящего момента, давайте посмотрим, что они собой представляют.

image

image

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

Давайте посмотрим, что можно сделать с нашим приложением, используя различные значения переменных.

:root {
  --main-color:            #5ea3d0;
  --secondary-color:       white;
  --main-text-color:       #3e5869;
  --secondary-text-color:  #b0c7d6;
  --new-room-form:         #d9e1e8;
  --send-message-form:     #F5F5F5;
}

Они повторяются 17 раз в нашем макете. Но все локации проверять не будем, давайте лучше глянем, как работает main color в применении к цвету сообщений и левой боковой панели.

image

Вот как мы обыгрываем все это в коде.

.rooms-list {
  background: var(--main-color);
}
 
.message-text {
  background: var(--main-color);
}

Переменные хороши тем, что мы можем редактировать их объявление, и этого будет достаточно для того, чтобы изменить все приложение. Пример:

:root {
  --main-color: red;
}

И вот результат:

image

Мы можем просто изменять объявление переменных в :root, что позволит играть с внешним видом приложения.

image

Давайте заменим некоторые цвета в :root, воспользовавшись палитрой выше.

:root {
  --main-color: #5ea3d0;
  --secondary-color: white;
  --main-text-color: #3e5869;
  --secondary-text-color: #b0c7d6;
  --new-room-form: #d9e1e8;
  --send-message-form: #F5F5F5;
}

Результат — полностью иной внешний вид чата:

image

Объединяем сетку и переменные

Если мы объединим все это, то получим возможность полностью изменять дизайн нашего чата. Давайте сделаем это.

image

image

Вот как выглядит начальный вариант по сравнению с финальным. Как вы можете видеть, я изменил и палитру, и макет. Единственная разница между этими двумя примерами — 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";
}

Правда, круто?

Skillbox рекомендует:

Автор: fokus-lop

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js