---
# System prepended metadata

title: 'ULA. Стилизация :art::lower_left_paintbrush:'
tags: [ulla]

---

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

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

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

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

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

```javascript
{
    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`

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