1. 17. 9. Темизация

Previous1. 17. 8. БЭМ — это про компоненты Next1. 17. 10. Плюсы и минусы БЭМ

Last updated 1 year ago

1. 17. 9. Темизация

Тема — это общий дизайн и оформление вашего сайта. Темы определяют, где и как на сайте будут отображаться кнопки, меню и другие виджеты. Тема определяет цветовую схему, шрифты, размеры, отступы и другие характеристики дизайна.

Для одного сайта может быть несколько тем. Иногда тема задаётся по умолчанию, а бывает, что тему выбирает пользователь, а может быть так, что тема зависит от настроек операционной системы.

Если разбирать тему в терминологии БЭМ-а, то тема — это внешний вид блока, а значит будет задаваться как базовый класс и его модификатор. В базовом классе определяются параметры цветов, типографики и отступов по умолчанию. А класс модификатора состоит из специфических свойств темы: особенный цвет, особенное декоративное оформление, особенные размеры, отступы и так далее.

Можно миксовать тему к самому внешнему блоку, например, body:

<body class="page
  theme
  theme--color-brand">
  ...
</body>

.theme {
  /* настройки по умолчанию */
}

.theme--color-brand {
  /* брендовые цвета текста */
  color: #6e90e6;

  /* брендовые цвета фона */
  background-color: #e2e9fc;

  ...
}

Тема может применяться и к отдельному блоку. К примеру, так:

<section class="features">
  <h2 class="features__title">Тема по умолчанию</h2>
  <p class="features__description">Это первая тема, с которой сталкивается пользователь, когда откроет ваш сайт.</p>
</section>
...
<section class="features container theme theme--dark">
  <h2 class="features__title">Переходим на тёмную сторону!</h2>
  <p class="features__description">Тёмная тема в дизайне интерфейсов к 2020 году стала чуть ли не обязательной. Вслед за Apple и Android на поезд Dark Mode «впрыгнули» и другие крупнейшие игроки рынка: Google, What’s App, Instagram.</p>
</section>

.theme {
  /* настройки по умолчанию */
}

.theme--dark {
  /* цвета текста для тёмной темы */

  /* цвета фона для тёмной темы */
}

Чтобы гибко управлять темами, лучше поделить их по функциональности свойств: цвет, шрифт, отступы, размеры и другие. Получается, что тема будет состоять из нескольких маленьких тем. Эти мини темы можно менять независимо друг от друга, допустим, изменить цвет, не трогая типографику и отступы.

Несколько тем для body:

<body class="page
  theme
  theme--color-inverse
  theme--space-default
  theme--size-default
  theme--gap-medium">
  ...
</body>

.theme {
  /* настройки по умолчанию */
}

.theme--color-inverse {
  /* цвета текста для инверсной (или тёмной) темы */
  color: black;

  /* цвета фона для инверсной (или тёмной) темы */
  background-color: white;
}

.theme--space-default {
  /* отступы для ритма внутри сеток */
  padding: 16px;
}

.theme--size-default {
  /* размеры в текстовых блоках */
  /* размер текста */
  font-size: 14px;

  /* межстрочный интервал */
  line-height: 1.6;
}

.theme--gap-medium {
  /* расстояния между колонками и строками сетки */
  /* отступы между столбцами и строками */
  gap: 30px;

  /* или внешние отступы */
  margin-right: 30px;
  margin-bottom: 30px;
}

Previous1. 17. 8. БЭМ — это про компоненты Next1. 17. 10. Плюсы и минусы БЭМ

Last updated 1 year ago

Можно миксовать тему к самому внешнему блоку, например, body:

<body class="page
  theme
  theme--color-brand">
  ...
</body>

.theme {
  /* настройки по умолчанию */
}

.theme--color-brand {
  /* брендовые цвета текста */
  color: #6e90e6;

  /* брендовые цвета фона */
  background-color: #e2e9fc;

  ...
}

Тема может применяться и к отдельному блоку. К примеру, так:

<section class="features">
  <h2 class="features__title">Тема по умолчанию</h2>
  <p class="features__description">Это первая тема, с которой сталкивается пользователь, когда откроет ваш сайт.</p>
</section>
...
<section class="features container theme theme--dark">
  <h2 class="features__title">Переходим на тёмную сторону!</h2>
  <p class="features__description">Тёмная тема в дизайне интерфейсов к 2020 году стала чуть ли не обязательной. Вслед за Apple и Android на поезд Dark Mode «впрыгнули» и другие крупнейшие игроки рынка: Google, What’s App, Instagram.</p>
</section>

.theme {
  /* настройки по умолчанию */
}

.theme--dark {
  /* цвета текста для тёмной темы */

  /* цвета фона для тёмной темы */
}

Несколько тем для body:

<body class="page
  theme
  theme--color-inverse
  theme--space-default
  theme--size-default
  theme--gap-medium">
  ...
</body>

.theme {
  /* настройки по умолчанию */
}

.theme--color-inverse {
  /* цвета текста для инверсной (или тёмной) темы */
  color: black;

  /* цвета фона для инверсной (или тёмной) темы */
  background-color: white;
}

.theme--space-default {
  /* отступы для ритма внутри сеток */
  padding: 16px;
}

.theme--size-default {
  /* размеры в текстовых блоках */
  /* размер текста */
  font-size: 14px;

  /* межстрочный интервал */
  line-height: 1.6;
}

.theme--gap-medium {
  /* расстояния между колонками и строками сетки */
  /* отступы между столбцами и строками */
  gap: 30px;

  /* или внешние отступы */
  margin-right: 30px;
  margin-bottom: 30px;
}