Создаем лендинг сайт с нуля: верстка Header и настройка Tailwind #3

Привет! Продолжим работать над нашим проектом лендинга и настроим CSS-переменные для использования с библиотекой стилей Tailwind, а также сверстаем блок Header. Погнали!

Полезные ссылки:

• Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
• Код данного урока доступен в репозитории GitHub по ссылке.
• Подписывайтесь на мой Дзен канал

Файл с CSS переменными

Создаем файл base-colors.css в папке styles и импортируем его в файл custom-base-styles.css

содержимое файла custom-base-styles.css

@import './base-fonts.css';
@import './base-colors.css';
@layer base {
}

содержимое файла 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 сверстан с учетом десктопного и мобильного разрешения.

После всех манипуляций с кодом и сохранения вы должны получить такой вариант:

Код доступен в репозитории GitHub по ссылке. Шаблон лендинга, который мы делаем, доступен в Figma по ссылке.

В следующей статье мы сверстаем секцию Hero.