CSS Grid и CSS-переменные - огромные победы для разработчиков интерфейса. Первый упрощает создание макетов веб-сайтов, а второй привносит в таблицы стилей мощь переменных.
В этом руководстве я покажу вам, как использовать их вместе, чтобы быстро создавать прототипы приложений.
Пример, который мы будем использовать, взят непосредственно из моего бесплатного курса о том, как создать приложение для чата с использованием React.js и Chatkit API:
Так что, если вы предпочитаете смотреть интерактивные скринкасты чтению, прочтите лекции № 15 и 16 моего курса здесь. В нем вы также получите доступ к коду, чтобы вы могли экспериментировать сами. Не стесняйтесь делать это, следуя этому руководству.
Настройка контейнера сетки
Наше приложение было разработано с использованием 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). Одна дробная единица означает одну часть доступного пространства. Итак, здесь мы разделяем ширину на шесть равных долей и даем каждому столбцу по одной доле.
Что касается рядов, мы не разделяем их все на равную высоту, поскольку последний ряд не такой высокий, как остальные. Мы явно указали, что он должен быть 60px высоким, а не 1fr высоким:
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";
}
Каждая из строк представляет собой строку, а каждый из символов представляет ячейку в сетке. Символы имеют семантическое отношение к элементам сетки, которые они представляют (список комнат, список сообщений, форма новой комнаты и отправка сообщения форма).
Теперь, чтобы расположить наши элементы в соответствии с нашим 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, мы можем полностью перевернуть макет.
На гифке выше я пробую четыре разных макета, меняя позиции элемента список помещений и элемента новая форма помещения. Единственное, что я меняю, это свойство 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";
Если вы пройдете мой курс по чат-приложению React.js, вы получите свою собственную копию кода, чтобы вы могли изменить макет именно так, как вам удобнее.
Изменение цветов с помощью переменных CSS
Теперь мы собираемся изменить цвета приложения с помощью переменных CSS. Если вы раньше не сталкивались с переменными 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 раз во всей нашей таблице стилей. Но вместо того, чтобы проходить через все эти места, давайте посмотрим, как --main-color используется в качестве цвета фона как в сообщениях , так и на левой боковой панели .
Вот как это проявляется в коде:
.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;
}
Это приводит к совершенно другому типу чата:
Объединение сетки и переменных
Если мы объединим это с изменением макета с помощью CSS Grid, мы получим два уникальных чат-приложения, которые мало похожи друг на друга. Давайте сделаем это:
Вот как выглядит наша отправная точка по сравнению с нашим последним примером. Как видите, я изменил и палитру, и макет. Единственное различие между этими двумя примерами - это 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";
}
Довольно круто, да?
Теперь я бы порекомендовал вам пройти весь мой курс. В нем я расскажу вам, как создать это приложение с использованием React.js и Chatkit API. Я, конечно, поделюсь с вами полным кодом, чтобы вы могли поэкспериментировать с этим дизайном самостоятельно.
Спасибо за прочтение! Меня зовут Пер, я соучредитель Scrimba, и мне нравится помогать людям осваивать новые навыки. Подпишитесь на меня в Twitter, если вы хотите получать уведомления о новых статьях и ресурсах.
