Документация Creatium

# Редактирование CSS кода

# Адаптивность

Для работы с адаптивностью стоит использовать заготовленные классы.

  • screen-lg для широких экранов

  • screen-md для ноутбуков

  • screen-sm для планшетов

  • screen-xs для телефонов

Рекомендуется стили для широких экранов использовать как основные, а для меньших экранов переопределять.

.demo {
  font-size: 48px;
}
.screen-md .demo {
  font-size: 36px;
}
.screen-sm .demo {
  font-size: 24px;
}
.screen-xs .demo {
  font-size: 14px;
}

Класс screen-* всегда должен быть в самом начале селектора.

# Инкапсуляция стилей

В отличие от HTML, из CSS ничего вырезаться не будет.

Во всех компонентах кроме HTML-компонента включена инкапсуляция стилей.

Это значит, что все стили могут применяться только к текущему компоненту, и его дочерним компонентам.

Технически это сделано так. Допустим, вы написали следующий код:

.demo {
  font-size: 14px;
  border: 2px solid orange;
  padding: 10px;
}

Перед появление на странице он будет обработан, и добавлен будет в следующем виде:

.css24 .demo {
  font-size: 14px;
  border: 2px solid orange;
  padding: 10px;
}

Где css24 — класс элемента, внутри которого расположен HTML код компонента.

Поддержка в Telegram-чате

Подскажем, как решить вашу задачу!

Мы все еще дописываем документацию для разработчиков, поэтому нам важно, чтобы вы писали, что с чем возникают трудности, и какие еще возможности нужно добавить.

← JS код →