Почему я решил начать редизайн форума с нуля.
Со времени выхода последней статьи я немного поработал над интерфейсом React, чтобы отображать контент из серверной части NodeBB.
- Я проделал те же шаги, что и для отображения категорий, чтобы иметь возможность отображать темы для данной категории.
- Я создал интерфейс для отображения сообщений в теме
- Я создал экран входа в систему
К этому моменту у меня был интерфейс, который отображал большую часть контента, который должен был отображать форум. Это было некрасиво, но сработало.
Поэтому я решил перестроить каркас с нуля.
Зачем мне это делать, если у меня что-то работало? Есть две основные причины:
- Я создавал и тестировал это с выводом в виде полноэкранного форума на моем втором мониторе. Это означало, что ни один из стилей не работал на мобильных устройствах (которые в настоящее время составляют 45% пользователей форума и, вероятно, будут увеличиваться).
- Недавно я познакомился с CSS Grid - потрясающим новым способом описания макета ваших страниц.
Краткое знакомство с CSS Grid
Сетка CSS - это способ более естественным образом описать форму элементов на вашем веб-сайте. Показать вам легче, чем пытаться это объяснить. Вот мое основное определение приложения. У него есть div с именем .ukb и 4 дочерних div.
В CSS все, что нам нужно сделать, это сказать, что .ukb отображает сетку, и описать эту сетку. Мы описываем сетку, определяя столбцы (6 каждый с шириной 1 дробь) и строки (4 с разной высотой). Затем мы можем определить, какие компоненты занимают какие места, почти нарисовав макет.
Чтобы заставить это работать, нам нужно определить, что такое header, поэтому мы добавляем grid-area в класс заголовка.
Повторите это для элементов footer, main и nav, и у нас есть шаблон!
Хорошо, но почему?
Вот где действительно проявляется сила CSS Grid. Я сказал, что почти половина пользователей используют мобильные устройства, и что, если мы хотим, чтобы в мобильном представлении навигация была закреплена внизу, а не вверху? Обычно для этого требуется МНОГО CSS, чтобы все заработало.
С помощью CSS Grid вы можете просто переопределить шаблон сетки:
И получится совсем другой макет!
Это означает, что мы можем иметь совершенно разные дизайны для мобильных устройств, настольных компьютеров и планшетов, не тратя много времени на взлом CSS, чтобы он работал так, как мы хотим.
Другой прогресс
Помимо того, чтобы заработал базовый макет, я хотел, чтобы навигация на рабочем столе оставалась привязанной к верхней части страницы при прокрутке вниз, а мобильная навигация всегда прикреплялась к нижней части экрана.
Я нашел код для создания панели навигации, протестировал его, а затем изменил CSS, чтобы он работал так, как я хотел, на мобильных устройствах.
И вот результат:
Благодарим за то, что следили за ходом этого полного редизайна. Если вам нравится этот проект, обязательно подписывайтесь на меня, чтобы узнать, как все идет!
