От автора: CSS Grid и Переменные CSS предоставляют front-end разработчикам огромные возможности. Первая упрощает создание макетов веб-сайта, в то время как вторые привносят силу переменных в таблицы стилей. В этом руководстве я покажу вам, как использовать их вместе, чтобы получить быстрое создание прототипа приложения.
Пример, который мы будем использовать, был взят непосредственно из моего бесплатного курса о том, как создать чат-приложение с помощью React.js и API Chatkit:
Поэтому, если вы предпочитаете чтению просмотр интерактивных видеороликов, здесь вы можете найти лекции номер 15 и 16 из моего курса. В нем вы также получите доступ к коду, чтобы иметь возможность экспериментировать с ним самостоятельно. Не стесняйтесь делать это, следуя этому руководству.
Настройка контейнера сетки
Наше приложение было создано с помощью CSS Grid, модуля, который упрощает создание макетов. Это особенно полезно, если вы воспользуетесь свойством grid-template-areas, о котором я подробнее расскажу ниже. Давайте сначала посмотрим, как выглядит наше начальное приложение для чата:
Если мы откроем инструменты для разработчиков Chrome, мы сможем увидеть, как построена базовая сетка. Она имеет шесть строк и шесть столбцов:
Код для создания такой сетки следующий:
|
1 2 3 4 5 |
.app { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px; } |
Сначала мы устанавливаем контейнер grid. Затем мы указываем, что нам нужны шесть столбцов, и каждый из них должен иметь ширину 1fr. Это означает одну часть доступного пространства. Итак, здесь мы разделяем ширину на шесть частей одинаковой ширины и задаем для каждого столбца одну часть.
Что касается строк, мы не разделяем их одинаково, так как последняя строка не такая высокая, как остальные. Мы явно указали, что она имеет высоту 60px вместо 1fr:
|
1 |
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px; |
Теперь, когда мы задали структуру сетки, мы можем перейти к следующей части — позиционированию.
Позиционирование элементов сетки
Каждый прямой дочерний элемент контейнера сетки является элементом сетки. У нас есть четыре элемента, каждый из которых помещен в прямоугольник, как на изображении ниже:
Для того, чтобы элементы были размещены так, как на рисунке выше, нам нужно будет использовать свойство grid-template-areas и построить визуальное представление сетки в стилях:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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. А именно:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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, мы можем полностью изменить макет.
В gif-изображении выше, я пытаюсь использовать четыре разных макета, изменяя позиции элементов списка кабинетов и формы нового кабинета. Единственное, что я меняю, это свойство grid-template-areas. Ниже приведены четыре варианта. Попробуйте сопоставить каждый из них с соответствующим макетом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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, начиная с объявлений переменных:
|
1 2 3 4 5 6 7 8 |
: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 используется в качестве фонового цвет как в сообщениях, так и в левой боковой панели.
Вот как это выглядит в коде:
|
1 2 3 4 5 6 7 |
.rooms-list { background: var(--main-color); } .message-text { background: var(--main-color); } |
Сила переменных заключается в том, что теперь мы можем изменить объявление, а затем это изменение повлияет на все приложение. Давайте, например, сделаем следующее:
|
1 2 3 |
:root { --main-color: red; } |
… что в результате даст нам следующее:
Теперь мы можем просто изменить все объявления переменных в :root, и таким образом изменится весь внешний вид нашего приложения. Давайте, например, найдем в Интернете приятную палитру и просто используем ее в нашем приложении:
Мы заменим некоторые цвета :root теми, что указаны в палитре выше:
|
1 2 3 4 5 6 7 8 |
: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 строк кода, которые я привожу ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
: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 и API Chatkit. Я, конечно же, предоставлю вам полный код, чтобы вы могли поэкспериментировать с ним сами.
Удачи! 🙂
Автор: Per Harald Borgen
Источник: //medium.freecodecamp.org/
Редакция: Команда webformyself.
