Привет! Продолжим работать над нашим проектом лендинга и настроим CSS-переменные для использования с библиотекой стилей Tailwind, а также сверстаем блок Header. Погнали!
Полезные ссылки:
Часть 1. Подготовка и настройка проекта
Часть 2. Настройка конфигурации и установка необходимых библиотек
Часть 3. Создание CSS-переменных и верстка блока Header
Часть 4. Верстка секции Hero, создание компонента Button
Часть 5. Верстка секции About
Часть 6. Верстка секции Gallery
Часть 7. Верстка секции WhyUs
Часть 8. Верстка секции Catalogue
Часть 9. Верстка секции Map
Часть 10. Верстка секции Footer
Часть 11. Создание якорных ссылок, рефакторинг
Часть 12. Создание мобильного меню
Часть 13. Анимация секций при скролле
Часть 14. Установка метаданных
Часть 15. Настройка Favicon.ico
Часть 16. Настройка счетчика Яндекс Метрики
Часть 17. Публикуем проект на хостинге
Файл с CSS переменными
Создаем файл base-colors.css в папке styles и импортируем его в файл custom-base-styles.css
содержимое файла custom-base-styles.css
содержимое файла base-colors.css
:root {
--color-primary: 138 30% 40%;
--color-secondary: 200 19% 18%;
--color-on-primary: 0 0% 100%;
--color-on-secondary: 0 0% 100%;
--color-background: 0 0% 100%;
--color-on-background: 0 0% 0%;
}
Данные три значения у каждого цвета — это значения кодировки HSL, находящиеся в скобках.
А для чего мы используем переменные, да еще и в частичной форме кодировки HSL? Ответ простой — в дальнейшем мы сможем буквально в несколько строчек кода внедрить темную тему для сайта, а благодаря созданным HSL переменным мы сможем использовать в стилях цветов индекс прозрачности, например — (bg-primary/40).
Настройка конфигурации Tailwind
Не забудьте настроить использование переменных в файле tailwind.config.js, благодаря этому наши переменные будут всплывать в подсказках во время написания стилей.
содержимое файла tailwind.config.js
const config = {
content: ['./src/app/**/*.{js,ts,jsx,tsx,mdx}', './src/**/*.{js,ts,jsx,tsx,mdx}', '!./node_modules'],
theme: {
extend: {
fontFamily: {
default: ['var(--font-inter)', 'sans-serif !important'],
accent: ['var(--font-inter)', 'sans-serif !important'],
},
colors: {
primary: 'hsl(var(--color-primary) / <alpha-value>)',
secondary: 'hsl(var(--color-secondary) / <alpha-value>)',
background: 'hsl(var(--color-background) / <alpha-value>)',
'on-primary': 'hsl(var(--color-on-primary) / <alpha-value>)',
'on-secondary': 'hsl(var(--color-on-secondary) / <alpha-value>)',
'on-background': 'hsl(var(--color-on-background) / <alpha-value>)',
},
},
},
plugins: [],
};
export default config;
Также добавьте переменные в файл globals.css, так мы явно определим цвета фона и шрифтов.
...
html,
body {
position: relative;
margin: 0;
padding: 0;
scroll-behavior: smooth;
color: var(--color-on-background);
background-color: var(--color-background);
}
...
Папка для компонентов
Пришло время структурировать наш проект, и для начала создадим папку components, в ней мы будем хранить все наши сверстанные секции, блоки и элементы. Структура проекта у разных команд своя, поэтому я представлю здесь свою вариацию.
Внутри папки components создайте 3 папки: sections | blocks | elements.
Лэндинг пейдж, как правило, состоит из секций — это крупнейшие модули нашего будущего сайта. Секции могут состоять из нескольких менее крупных блоков, а блоки, в свою очередь, состоят из самых простых элементов, если они повторяются, то мы будем выносить их в отдельные элементы (например, кнопка либо значки иконок с соцсетями).
JSX формат
С этого момента все компоненты нашего будущего сайта мы будем писать в формате .jsx — это синтаксис, который позволяет писать HTML-подобный код прямо в JavaScript. Поэтому не забудьте переименовать файлы page.js, layout.js в page.jsx, layout.jsx.
Hero секция
Так как Hero секция нашего макета имеет фоновое изображение, то имеет смысл в Hero секцию вложить блок Header, который также содержит данное фоновое изображение.
Создадим в папке sections файл Hero.jsx со следующим содержимым:
import Header from '../blocks/Header';
export default function Hero() {
return (
<div className='min-h-screen bg-secondary text-on-secondary'>
<div className='flex flex-col mx-auto w-full max-w-7xl h-auto px-5 break-words'>
<Header />
</div>
</div>
);
}
Мы уже можем полноценно использовать созданные нами переменные (bg-secondary, text-on-secondary), для наглядности установим минимальную высоту секции в высоту экрана, а фон сделаем темным, устанавливать фоновое изображение мы будем в следующих уроках.
Мы также импортировали блок Header, но создадим его чуть позже.
Page.jsx
Теперь мы можем импортировать первую секцию в основной файл нашей страницы.
Содержимое файла page.jsx
import Hero from './components/sections/Hero';
export default function Home() {
return (
<>
<Hero />
</>
);
}
Верстка Header
Приступим к самой интересной части нашего урока, именно после нее мы сможем увидеть первые визуальные изменения нашего проекта. Но прежде чем начать, нам необходимо установить пакет npm для использования значков svg, называется он React-icons.
Введите в терминал команду:
npm install react-icons --save
Создайте файл Header.jsx в папке components -> blocks
Содержимое файла Header.jsx
import { IoMdMail } from 'react-icons/io';
import { BiLogoTelegram } from 'react-icons/bi';
import { GiHamburgerMenu } from 'react-icons/gi';
import Link from 'next/link';
export default function Header() {
return (
<header className='flex justify-between h-20 mt-7'>
<div className='flex grow flex-col lg:flex-row lg:justify-between lg:items-center gap-2'>
<Link href='/' className='font-black text-4xl'>
Логотип
</Link>
<div className='flex flex-col lg:flex-row lg:justify-between lg:items-center gap-2 lg:gap-12'>
<nav className='hidden lg:block'>
<ul className='flex gap-12 font-light'>
<li>
<Link href={'#products'}>Наша продукция</Link>
</li>
<li>
<Link href={'#about'}>О нас</Link>
</li>
<li>
<Link href={'#contacts'}>Контакты</Link>
</li>
</ul>
</nav>
<span className='font-black'>+7 999 888 88 88</span>
<div className='flex gap-6 items-start'>
<div className='flex bg-primary rounded-md text-on-primary p-2'>
<Link href={'mailto:mail@email.ru'}>
<IoMdMail size={18} />
</Link>
</div>
<div className='flex bg-primary rounded-md text-on-primary p-2'>
<Link href={'tg://resolve?domain=@someTgAccountName'}>
<BiLogoTelegram size={18} />
</Link>
</div>
</div>
</div>
</div>
<div className='block lg:hidden'>
<GiHamburgerMenu size={40} />
</div>
</header>
);
}
Мы импортировали 3 иконки: телеграм, почта, бургер-меню.
Логотип обернут в ссылку, ведущую на главную страницу, в нашем случае — в начало страницы.
Ссылки меню ведут на якорные ссылки страницы, мы создадим их в следующих уроках.
Ссылки социальных сетей и почты ведут на несуществующие адреса, необходимо заменить их на реальные значения.
Burger-menu на данный момент неактивно, мы будем реализовывать его в следующих уроках.
Блок Header сверстан с учетом десктопного и мобильного разрешения.
После всех манипуляций с кодом и сохранения вы должны получить такой вариант:
На сегодня всё!
В следующей статье мы сверстаем секцию Hero.
Код данного урока доступен в репозитории GitHub по ссылке.
Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт (кстати, полностью сделанный на NextJS) — in9var.ru.