Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

От автора: CSS Grid и Переменные CSS предоставляют front-end разработчикам огромные возможности. Первая упрощает создание макетов веб-сайта, в то время как вторые привносят силу переменных в таблицы стилей. В этом руководстве я покажу вам, как использовать их вместе, чтобы получить быстрое создание прототипа приложения.

Пример, который мы будем использовать, был взят непосредственно из моего бесплатного курса о том, как создать чат-приложение с помощью React.js и API Chatkit:

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

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

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

Код для создания такой сетки следующий:

Сначала мы устанавливаем контейнер grid. Затем мы указываем, что нам нужны шесть столбцов, и каждый из них должен иметь ширину 1fr. Это означает одну часть доступного пространства. Итак, здесь мы разделяем ширину на шесть частей одинаковой ширины и задаем для каждого столбца одну часть.

Что касается строк, мы не разделяем их одинаково, так как последняя строка не такая высокая, как остальные. Мы явно указали, что она имеет высоту 60px вместо 1fr:

Теперь, когда мы задали структуру сетки, мы можем перейти к следующей части — позиционированию.

Позиционирование элементов сетки

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

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

Для того, чтобы элементы были размещены так, как на рисунке выше, нам нужно будет использовать свойство grid-template-areas и построить визуальное представление сетки в стилях:

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

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

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

Теперь мы готовы начать экспериментировать с макетом. Просто заменив несколько символов в значении grid-template-areas, мы можем полностью изменить макет.

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

В gif-изображении выше, я пытаюсь использовать четыре разных макета, изменяя позиции элементов списка кабинетов и формы нового кабинета. Единственное, что я меняю, это свойство grid-template-areas. Ниже приведены четыре варианта. Попробуйте сопоставить каждый из них с соответствующим макетом:

Если вы ознакомитесь с моим курсом по созданию приложения React.js-чата, вы получите свою собственную копию кода, чтобы иметь возможность изменить макет по своему усмотрению.

Изменение цветов с помощью переменных CSS

Теперь мы изменим цвета приложения с помощью переменных CSS. Если вы раньше не работали с переменными CSS, просмотрите приведенные ниже изображения, поскольку на них продемонстрирована основная суть:

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

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

Давайте посмотрим, как мы разработали наше приложение с помощью переменных CSS, начиная с объявлений переменных:

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

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

Вот как это выглядит в коде:

Сила переменных заключается в том, что теперь мы можем изменить объявление, а затем это изменение повлияет на все приложение. Давайте, например, сделаем следующее:

… что в результате даст нам следующее:

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

Теперь мы можем просто изменить все объявления переменных в :root, и таким образом изменится весь внешний вид нашего приложения. Давайте, например, найдем в Интернете приятную палитру и просто используем ее в нашем приложении:

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

Мы заменим некоторые цвета :root теми, что указаны в палитре выше:

В результате мы получим совершенно иной вид чата.

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

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

Если мы объединим это с изменением макета с помощью CSS Grid, мы получим два уникальных приложения чата, которые мало похожи друг на друга. Давайте сделаем это:

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

Вот как выглядит наше исходное приложение по сравнению с конечным результатом. Как видите, я изменил палитру и макет. Единственная разница между этими двумя примерами — это 11 строк кода, которые я привожу ниже:

Довольно круто, да?

Теперь я рекомендую вам пройти весь курс. В нем я расскажу вам о создании этого приложения с помощью React.js и API Chatkit. Я, конечно же, предоставлю вам полный код, чтобы вы могли поэкспериментировать с ним сами.

Быстрое создание прототипа приложения с помощью CSS Grid и переменных CSS

Удачи! :)

Автор: Per Harald Borgen

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка-Мастер. От теории до верстки популярных шаблонов

Станьте современным верстальщиком с нуля

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree