---
tags: ulla
disqus: hackmd
smartypants: true
---

# ULA. Стилизация :art::lower_left_paintbrush:

## Формат и требуемая квалификация

Все стили приложения описаны в формате `css-in-js (jss)`. Подробнее о формате [здесь](https://reactnative.dev/docs/0.60/style).

Например если вы хотите создать прямоугольник со сторонами 50 на 50 пикселей и красной заливкой, его стиль будет выглядеть так:

{
    width: 50,
    height: 50,
    backgroundColor: 'red'
}

В основном это обычный CSS (всем известный напарник HTML), только вместо дефиса в стилях следующее слово пишется с большой буквы:
`background-color (в CSS)` --> `backgroundColor (в jss)`.

Любой начинающий программист (и любой мотивированный не глупый непрограммист) может легко разобраться с этим форматом и вносить свои правки. Для этого требуется минимальная квалификация.

Тем более вам не надо писать всё снуля: перед вашими глазами есть уже написанные стили и вам остаётся только править их.

Стилизация всего приложения вынесена в 3 отдельных модуля в папке [`config/styles`](https://github.com/Aparus/ulla/tree/master/src/config/styles):
* general
* layout
* typedContent

## general (общие)
`general` содержит самую базовую информацию о типографии:
* шрифты,
* размер текста,
* направление письма
* выравнивание.

Если вы делаете приложение с письмом справа налево (арабский, иврит, ...) - именно здесь вам следует указать направление письма дополнительно установленные красивые шрифты.

## layout (макет)
`layout` содержит стили каркаса приложения, элементов:
* главной страницы (HomeScreen),
* выдвигающегося меню (Drawer),
* оглавления уроков (ChapterSubchaptersScreen),
* заголовков страниц (ScreenHeader).

## typedContent
`typedContent` содержит стили типов контента. Здесь вы можете настроить:
размер картинки в словарной карточке,
цвет подстрочного перевода в пофразовом плеере,
оформление блока цитаты в текстовых материалах и т.д.

Отличие от `layout` в том, что на базе имеющихся типовых материалов вы можете создавать свои типы. Например, вы можете взять типовой контент `media` (пофразовый плеер) и на его базе создать разные плееры для песен, прозы и стихов (с разными кнопками, цветами и т.д.)

Модули `layout` и `typedContent` опираются на `general`.

Изначально внешний вид приложения настроен во всех возможных вариациях. Вы можете ничего не трогать и использовать имееющиеся настройки. Но если захотите что-то поменять -- у вас есть подробные наглядные примеры.

## Подсказка

Если вы хотите изменить стиль и запутались где это сделать, задайте себе вопрос:
* это общий каркас приложения? --> значит правьте `layout`
* элемент конкретного типа материалов? --> правьте `typedContent`
* общий стиль, который должен насквозь пройти через разные элементы приложения? --> правьте `general`

Более подробные инструкции смотрите непосредственно в коде этих модулей.