Startup UI

Цвета и настройки ​

Общая идея ​

Для часто настраиваемых значений предусмотрены CSS-переменные, чтобы стандартизировать однотипные цвета и стили (и разработчик мог всегда использовать переменные, не подбирая и не добавляя новые цвета), а также чтобы была возможность легко перегружать переменные на уровне отдельных компонентов или модификаторов.

Все переменные Startup UI начинаются с вендорного префикса --s-

Библиотека не везёт дефолтные значения этих переменных в своём CSS — она их только использует. Значения задаёт проект (свой :root) либо опциональный импорт import 'startup-ui/defaults.css'. Значения ниже — это и есть содержимое defaults.css.

Цвета ​

Черный, белый и серый ​

  • --s-white (напр. #fff) — белый цвет
  • --s-black (напр. #000) — черный цвет
  • --s-gray (напр. #f2f2f2) — серый цвет

Фоновые цвета ​

  • --s-bg-header (напр. #081935) — цвет шапки
  • --s-bg-subheader (напр. #1A3158) — цвет полоски под шапкой
  • --s-bg (напр. #f2f3f4) — дополнительный фоновый цвет (напр.для чередующихся блоков)

Цвета бордюров ​

  • --s-border (напр. #d1d1d1) — стандартный бордюр
  • --s-border-light (напр. #666) — осветленный бордюр

Цвета текста ​

  • --s-text (напр. #000) — базовый цвет текста
  • --s-text-light (напр. #999) — осветленный цвет текста
  • --s-text-lightest (напр. #ccc) — ещё более осветленный цвет текста

Брендовый цвет и его оттенки ​

  • --s-primary (напр. #f04f0a) — базовый брендовый цвет (цвет акцентов)
  • --s-primary-dark (напр. #c63a06) — затемненный брендовый цвет
  • --s-primary-darkest (напр. #802703) — ещё более затемненный брендовый цвет
  • --s-primary-light (напр. #f1905f) — осветленный брендовый цвет
  • --s-primary-lightest (напр. #f8eeea) — ещё более осветленный брендовый цвет

Красный цвет и его оттенки ​

  • --s-red (напр. #ea524a) — базовый красный цвет
  • --s-red-dark (напр. #d33229) — затемненный красный цвет
  • --s-red-light (напр. #ffbfbf) — осветленный красный цвет
  • --s-red-lightest (напр. #ffece8) — ещё более осветленный красный цвет

Желтый цвет и его оттенки ​

  • --s-yellow (напр. #e6a23c) — базовый желтый цвет
  • --s-yellow-dark (напр. #b88230) — затемненный желтый цвет
  • --s-yellow-light (напр. #eebe77) — осветленный желтый цвет
  • --s-yellow-lightest (напр. #faecd8) — ещё более осветленный желтый цвет

Зеленый цвет и его оттенки ​

  • --s-green (напр. #53b753) — базовый зеленый цвет
  • --s-green-dark (напр. #3f983f) — затемненный зеленый цвет
  • --s-green-light (напр. #65bf65) — осветленный зеленый цвет
  • --s-green-lightest (напр. #b8e5b8) — ещё более осветленный зеленый цвет

Размеры ​

Разметка ​

  • --s-base-width (напр. 1200px) — базовая ширина основной области страницы
  • --s-base-margin (напр. 20px) — базовые отступы между элементами
  • --s-base-padding (напр. 20px) — базовые отступы внутри контентных элементов

Размеры интерфейсов ​

  • --s-field-height (напр. 32px) — высота полей ввода

Типографика ​

  • --s-font-family (напр. 'Open Sans', sans-serif) — основной шрифт
  • --s-font-size (напр. 14px) — базовый размер шрифта
  • --s-h1-font-size (напр. 2.2rem) — размер заголовка 1
  • --s-h2-font-size (напр. 1.7rem) — размер заголовка 2
  • --s-h3-font-size (напр. 1.4rem) — размер заголовка 3
  • --s-h4-font-size (напр. 1.2rem) — размер заголовка 4

Дополнительная стилизация ​

Тени ​

  • --s-shadow (напр. 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1)) — базовые тени

Скругления ​

  • --s-border-radius (напр. 6px) — базовые скругления