Управляйте типографикой своего сайта из единой централизованной системы.
Под капотом
Я черпал вдохновение для сегодняшней истории из типографических систем большинства UI-библиотек и из одной постановки задачи. Позвольте мне объяснить, один из дизайнеров из нашей команды iHateReading напрямую хочет, чтобы я изменил стиль для некоторых текстов и заголовков. Вдобавок дизайнер хочет, чтобы я добавил поддержку темных тем на весь сайт.
Что ж, сразу это может показаться легкой задачей, это несложно, но иметь кодовую базу в течение почти года, а теперь менять каждый текст - это немного утомительная и ручная работа, которую каждый разработчик ненавидит делать.
Начиная
Теперь, когда мы поняли постановку проблемы и идею этой истории, я могу рассказать вам, как мы решим эту проблему. Это просто, поскольку вы знаете, что каждая типографика чаще будет похожа и будет иметь подкатегории, такие как заголовок, заголовок, подпись и т. Д., Тогда всегда полезно создать их один раз и использовать везде и каждый раз.
Ага, я вижу, если вы читали мои предыдущие истории, то, возможно, вам наскучил мой любимый сленг: «Напиши один раз, используй везде каждый раз» 😉.
Но это правда и настолько мощно, что вы должны работать так, чтобы все, что вы пишете сегодня, не требовалось писать снова в будущем.
Единая система типографики
Это идея, единая система типографики, означающая создание ваших собственных экземпляров типографики, таких как заголовок, подзаголовок и так далее. На каждой странице будут использоваться одни и те же категории типографий.
Почему единая система?
- Легко управлять
- Централизованная система дает хороший контроль над стилем, изменением контента и т. Д.
- Масштабируемое решение, поскольку единую систему можно легко заменить и отредактировать.
Добавление единой системы типографики
Что ж, это тоже просто, просто относитесь к этому как к повторно используемым компонентам, таким как кнопки или карты. Мы создадим экземпляр типографики, состоящий из всех подкатегорий текстов, и его различные варианты отличаются в основном размерами шрифта.
Например,
Typography instances // Title: This is heading of font size = 24px // Heading: This is title of font size = 22px // Subheading: This is Subheading of fontsize = 20px // Description: This is Description of fontsize = 18px // Text: This is Text of fontsize = 16px // Caption: This is Caption of fontsize = 14px // span: This is span of fontsize = 12px
Надеюсь, вы понимаете, что мы создали, все остальные экземпляры типографики создаются в одном месте для их повторного использования. Так что в будущем вам просто нужно будет отредактировать этот файл, чтобы шрифт был доступен и в темной теме.
Прохождение реквизита
Что ж, иногда разработчику требуется больше контроля над стилевой частью каждого шрифта, такой как заголовок или описание. В этом случае вы можете просто предоставить доступ к стилю CSS с помощью опоры. Если свойство стиля предоставляется заранее, укажите только этот CSS, в противном случае вернитесь к CSS по умолчанию.
const Heading = ({ className, content }) => {
return (
<p className={className ? className: "YOUR_OWN_CSS"}>
{content}
</p>
)
};
Это помогает разработчику заменить свойства CSS по умолчанию новыми стилями CSS, предоставленными им / ею.
Обработка нескольких тем
Я не верю, что нужно писать код только для двух тем, код должен быть доступен и способен обрабатывать несколько тем, независимо от общего количества доступных тем.
Как я уже сказал вам, вы должны писать код таким образом, чтобы вам не приходилось писать его снова с нуля. Вместо того, чтобы обрабатывать 2 темы вручную, мы будем обрабатывать типографику для нескольких тем.
Для обработки нескольких тем и объектов, содержащих темы и соответствующие им значения для текста, и соответствующим образом сопоставьте CSS или стили.
const themes = {
dark: {
bg: 'black',
textColor: 'white'
},
white: {
bg: 'black',
textColor: 'white'
},
semidark: {
bg: 'black',
textColor: 'white'
},
.... more theme objects
}
Теперь нам нужно сопоставить каждый элемент темы и соответственно добавить стиль к нашему тексту, используя свойство textColor key.
<p className={{color: themes.textColor}}>{content}</p>
Таким образом, нам просто нужно изменить значение textColor, чтобы изменить цвет текста всего нашего веб-сайта.
Расширение возможностей централизованной типографской системы
Продвинутый уровень типографики охватывает еще одну вещь, а именно обработку всего внешнего вида веб-сайта из централизованной панели администратора.
Видите ли, мы уже сопоставили свойство цвета текста с помощью textColor, и из одного объекта темы мы можем управлять и изменять весь внешний вид веб-сайта, верно? Так почему же теперь передать управление этим объектом темы команде разработчиков или разработчиков продукта и создать интерфейс для переключения тем для разных пользователей.
Это означает, что каждый пользователь из базы данных коллекций пользователей может иметь другую тему, которая будет отображаться, просто для того, чтобы пройти надлежащее A / B-тестирование для нашего пользовательского интерфейса и темы, это дает преимущество или рычаг для перехода к интерфейсу пользовательского интерфейса анализа данных.
const themes = { ... our regular theme object }
// fetch the themes object from database or admin panel
// store the themes object in client side and change the UI accordingly
// Make an interface for design or product management team to toggle the theme and store the themes in database accordingly
Активная тема
По умолчанию одновременно будет активен только один объект темы, поэтому для этого у нас может быть ключ с именем default и назначить ему тему по умолчанию.
const themes = {
default: 'dark',
dark: {
bg: 'black',
textColor: 'white'
},
white: {
bg: 'black',
textColor: 'white'
},
semidark: {
bg: 'black',
textColor: 'white'
},
.... more theme objects
}
Итак, для A / B-тестирования мы можем установить значения по умолчанию, разные для разных пользователей, и сопоставить их соответственно.
Вывод
Этот процесс настолько мощный, что мы тоже использовали его на нашем веб-сайте iHateReading. Попробуйте эту централизованную систему дизайна типографики для своего следующего проекта и убедитесь сами. Пока, в следующий раз, не забывайте подписываться и желать хорошего дня, люди.
For more such stories, visit our website - 💻 iHateReading
