Стилизация домашней страницы!
Всем привет, для тех, кто не читал первую часть блога, я добавил ссылку здесь. Мы собираемся продолжить создание личного приложения Pokedex здесь. Мы перестали отображать некоторых покемонов, но изображения слишком большие, а страница очень простая. В этом блоге мы будем стилизовать PokemonCard.js и главную страницу.
Базовый глобальный стиль
Я буду использовать Sass для этого урока, так как считаю его очень чистым и эффективным. Есть много способов настроить Sass в своем проекте, но я написал два блога об общих принципах и практиках, связанных здесь и здесь. Я начну с создания каталога для всех моих файлов Sass и подключу его. Я не буду повторять весь этот процесс снова, как я делал это подробно в тех других блогах. Моя файловая структура Sass будет выглядеть так:
Sass/ | |– abstracts/ | |– _variables.scss # Sass Variables | |– _mixins.scss # Sass Mixins | |– _functions.scss # Sass Functions | |– base/ | |– _typography.scss # Typography rules | |– _animations.scss # Animation rules | |– _utilities.scss # Utility rules | |– _base.scss # Base rules |– layout/ | |– _navigation.scss # Navigation | |– _header.scss # Header | |– _footer.scss # Footer | |– components/ | |– _buttons.scss # Buttons | |– _pokemonCard.scss # PokemonCard | |– pages/ | |– _home.scss # Home page style | |– _pokedex.scss # personal pokedex page style | |– _show.scss # Show page style | – main.scss # Main Sass input file
Хорошо, давайте начнем с определения основных стилей в файле _base.scss и импорта в main.scss.
Эти маленькие кусочки стиля помогут нам пройти долгий путь. Прежде всего:
* - это глобальный селектор для всех элементов в файле HTML.
*::before что-то вставляет перед, когда контент был выбран
*::after вставляет что-то после, когда контент был выбран
Первый блок кода обеспечивает удаление всех элементов по умолчанию padding и margin. Он заставляет все псевдоэлементы (::before и ::after) наследовать box-sizing своих родительских элементов, а не всегда использовать content-box. Это определяет, применяются ли свойства, подобные padding, внутрь (сохранение ширины элемента) или наружу (добавление к ширине элемента). Например, <p> автоматически задает поля сверху и снизу, а body имеет отступы по стандарту.
Затем я хочу изменить размер шрифта по умолчанию, чтобы у меня был простой расчет для моих rem единиц. Размер шрифта по умолчанию - 16px. Rem - это единицы, которые зависят от размера шрифта, поэтому, если я не буду настраивать размер шрифта здесь, каждый rem будет 16px. 2rem это 32px и так далее. Регулируя шрифт по умолчанию, я могу легче вычислять единицы rem с шагом 10px (математика сложна).
Наконец, я задаю базовый стиль для тела. Центрирование текста, присвоение всему элементу тела padding 3rem или 30px и установка родительского свойства box-sizing, упомянутого выше, на border-box. box-content: border-box должен быть стандартным (на мой взгляд). Это означает, что заполнение засчитывается в ширину / высоту элемента.
Хорошо, это основные вещи, которые нам нужны для начала работы с Sass и правильного расчета наших rem единиц измерения. С помощью этого небольшого фрагмента кода мы гарантируем, что начнем с равных условий игры и не столкнемся с какими-либо неприятными padding, margin или box-sizing проблемами, которые могут подкрасться к нам.
Убедитесь, что вы импортировали свой _base.scss в свой main.scss и добавили следующий сценарий в раздел script в package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
//Add this line to your package.json
"compile:sass": "node-sass sass/main.scss src/index.css -w"
},
Затем запустите в своем терминале:
yarn run compile:sass
В этом терминале вы должны увидеть зеленое сообщение об успешном выполнении. Этот сценарий отслеживает изменения в ваших файлах Sass и компилирует их в ваш index.css. Если вы откроете браузер, вы увидите, что ваш текст очень маленький и все расположено по центру! Woot! Идите к нам!
Стилизация наших карт покемонов
Эти начальные карточки будут кликабельными, и мы перейдем к реальной карточке покемона размером с браузер, которая будет настраиваться в зависимости от типа покемона, но об этом позже. Во-первых, давайте создадим наш _pokemonCard.scss в нашем components файле в Sass. В этот файл мы хотим добавить следующий код Sass, чтобы начать работу:
Импортируйте его в свой main.scss, чтобы увидеть отформатированные карты! Затем давайте удостоверимся, что мы присваиваем нашим элементам правильные classnames, чтобы гарантировать, что наш Sass подключен.
Это наш PokemonCard.js:
Это наш AllPokemon.js:
При этом наши карты должны быть подключены!
Они не очень хорошо выглядят, но это только начало. Давайте создадим несколько цветовых переменных в нашем _variables.scss файле, чтобы познакомиться с нашей цветовой схемой покемонов. Мой файл переменных выглядит так:
У меня есть очень удобное расширение, которое я использую, которое действительно помогает мне визуализировать цвета. Я связал это здесь. После этого внесем некоторые изменения в наш _pokemonCard.scss файл. Я также добавил немного стиля, чтобы наши карточки выглядели немного аккуратнее и крупнее.
Хорошо, это намного лучше, НО все наши карты просто в длинный ряд. Думаю, идеальное решение - это flexbox. Flexbox - отличный инструмент. Я кратко расскажу об этом здесь, но я действительно рекомендую вам потратить некоторое время на изучение всех чудесных вещей, которые он может помочь вам достичь с помощью вашей стилизации. Вот ссылка на полезное руководство по flexbox.
Давайте сделаем партиал в нашем pages каталоге под названием home.scss, так как на нашей домашней странице будут отображаться все покемоны. В этот файл добавьте следующий код:
Мы используем flexbox, чтобы выровнять все наши карточки в ряд. По умолчанию flexbox устанавливает flex-direction на row. Вы можете изменить flex-direction на column, если хотите, но для наших целей row отлично работает. Этот контейнерный элемент содержит все наши карточки, поэтому они выстроятся в один длинный ряд. Поэтому нам нужно установить свойство переноса, чтобы карточки переходили на следующую строку, а не продолжали бесконечно. Затем flexbox дает нам два средства для выравнивания нашего содержимого по осям x и y. Когда flex-direction равен row, justify-content обрабатывает ось x, а когда он установлен на column, он обрабатывает ось y. С другой стороны, у нас есть свойство align-items, которое обрабатывает ось y, когда flex-direction равно row, и меняет направление, когда flex-direction равно column. Таким образом, в нашем случае мы выравниваем содержимое по оси x равным space-around. Это дает нашим картам возможность дышать со всех сторон. Есть и другие свойства justify-content, например space-between, которые выталкивают содержимое до самых внешних краев. start - еще один, который оправдывает содержимое в начале гибкого контейнера. Довольно моей эпической поэзии о Flex. Серьезно проверьте это, это здорово.
Так подождите, почему не работает? Нам нужно внести некоторые изменения в нашу карту. Нам больше не нужно устанавливать такую большую ширину. Flex позаботится об этом за нас с помощью сокращенного свойства flex. По сути, я хотел бы видеть по 3 карты покемонов в каждом ряду с хорошим интервалом между ними. Flex позволяет нам делать это так:
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Эти свойства позволяют элементу либо расти, либо заставлять другие элементы сжиматься вокруг него, сжиматься и позволять другим элементам расти, чтобы заполнить пространство, либо вы можете указать основу или размер каждого из элементов. Мы хотим, чтобы база составляла 24%, чтобы гарантировать, что у нас есть 3 карты, расположенные в ряд. Ниже приведен код новой карты scss:
Ладно, хорошо! У нас есть несколько хороших карточек, отображаемых на экране аккуратными рядами. Это круто, но я хотел бы добавить еще несколько наворотов, чтобы произвести впечатление на людей и сделать приложение более интуитивно понятным и интерактивным. Прямо сейчас ничего не происходит, когда мы наводим курсор на карточку, как люди узнают, что мы хотим, чтобы они щелкнули по ним? Давай изменим это.
Делаем карты интерактивными
Во-первых, давайте начнем с того, что добавим карточкам эффект тени на hover, чтобы пользователь знал, что они интерактивны. Для этого мы можем использовать свойство CSS с именем box-shadow. Свойство box-shadow принимает следующие значения:
box-shadow: /* offset-x | offset-y | blur-radius | color */
Итак, в нашем случае нам нужно offset-x, равное 0 (то есть нам не нужна тень смещения на x-axis), offset-y 1rem, blur-radius 4rem и rgba значение цвета. В этом случае мы используем rgba, чтобы позволить нам контролировать непрозрачность тени. Я также хочу, чтобы cursor превратился в указатель на hover для целей доступности. Наконец, я хочу, чтобы карточка немного сдвигалась на y-axis при наведении курсора. Для этого я воспользуюсь свойством transform.
Свойство transform дает нам много вариантов, но я буду использовать здесь translateY(). translateY() просто хочет, чтобы это было сказано. Он переместит элемент на y-axis. При использовании transform важно использовать свойство transition для элемента. Вот почему:
Переходы - это смазка в колесе преобразований CSS. Без перехода преобразуемый элемент резко переходил бы из одного состояния в другое. Применяя переход, вы можете контролировать изменение, делая его плавным и постепенным.
Подробнее об этом читайте в этой статье.
Следующее, что я хотел бы изменить, это :active и :focus. Я хочу, чтобы карта сместилась немного вниз по y-axis и чтобы казалось, что карта находится ближе к фону, регулируя разброс и непрозрачность box-shadow. Я думаю, это выглядит супер круто, потому что кажется, что вы на самом деле нажимаете на него!
Теперь наш код для карточек должен выглядеть так:
Исправление заголовка карточки и импорт шрифтов
Круто, эти карточки выглядят великолепно, но этот общий шрифт - пустяк, и имена покемонов тоже не такие уж особенные. Начнем с импорта пары шрифтов, которые мы сможем использовать во всем приложении. Импортировать шрифты через Google Fonts очень просто. Сначала перейдите в Google Fonts. Я выбрал два шрифта, которые будут интересными и удобочитаемыми. Как только вы перейдете на веб-страницу Google Fonts, вы увидите поиск. Ищите Милтониан и Лато. Конкретно Miltonian Tattoo. Щелкните по нему, и вы попадете на экран семейства шрифтов. Miltonian Tattoo имеет только одну толщину шрифта. Нажмите + Выбрать этот шрифт, чтобы добавить его в свою коллекцию. Вы должны увидеть всплывающую боковую панель со ссылкой на скрипт и фрагментом font-family кода CSS. Сделайте то же самое для Лато, выбрав следующие веса шрифта: 300, 400, 700. Я привел хорошую статью о распространенных и широко используемых шрифтах Google здесь.
Теперь скопируйте тег скрипта на боковой панели и добавьте его в свой index.html в <head></head>. Затем перейдите к своему _variables.scss, чтобы создать несколько переменных шрифта. Вот как они должны выглядеть:
//FONTS $title: 'Miltonian Tattoo', cursive; $default: 'Lato', sans-serif;
Отлично, давайте воспользуемся ими. В вашем _pokemonCard.scss объявим свойство с именем font-family и установим его в нашу scss переменную $title. Я думал, что этот шрифт очень похож на шрифт логотипа pokemon, и мы будем использовать его экономно для развлечения в приложении.
Давайте также установим свойство text-transform в заголовке, чтобы имена были написаны с заглавной буквы. Установите text-transform: capitalize;, и все готово!
Код карты scss теперь выглядит так:
Стилизация заголовка
Хорошо, наш титул «Персональный покедекс» выглядит немного скучным и скучным. Давайте приправим это. Сначала перейдите к файлу _typography.scss в вашем base sccs каталоге. Внутри этого файла мы будем объявлять повторно используемые классы для различных заголовков. Мы будем стилизовать primary-heading, который мы сможем повторно использовать на всех наших страницах, которые будут использоваться во всем приложении. Убедитесь, что вы добавили элемент <h1>, чтобы App.js обернуть заголовок и присвоить ему className из primary-heading. Затем в типографику добавьте следующий код:
Хорошо, поэтому мы используем здесь несколько забавных вещей CSS. Мы устанавливаем для свойства background-image значение linear-gradient(), а затем обрезаем его только до текста, который мы установили на transparent. Это означает, что мы фактически используем background-image для установки цвета текста. Наконец, мы используем свойство stroke, чтобы выделить текст, чтобы он выглядел как логотип Pokemon. Классная вещь.
Добавление фонового изображения
Наконец, давайте добавим к основному тексту фоновое изображение. Я использовал этот сайт, чтобы найти идеальный png для нашего фона. Это красиво и нежно, но делает фон менее ярко-белым и придает ему естественную текстуру. Найдите на веб-сайте файл png под названием Пальмовый лист. Создайте в своем src файл с именем images. Мы будем использовать это позже для некоторых спрайтов, которые мы будем импортировать. Наконец, в свой _base.scss добавьте следующий код:
Заключение
Отличная работа! Увидимся в следующий раз, чтобы узнать больше о React. Мы добавим header.js, footer.js, добавим пакет react-router и создадим onClick.
