Правила разработки интерфейсов

Использование Bootstrap Kit позволяет быстро реализовывать задачи по созданию функционала с новым интерфейсом, переиспользуя ранее созданные компоненты и их стили. Скорость достигается за счет того, что нами приняты следующие правила разработки:

1. Всегда использовать классы bootstrap для компоновки интерфейса и указания положения элементов на странице. Если в компоненте используются прямые указания положения элементов, такие как postion, margin, - это признак того, что данный компонент будет сложно переиспользовать в других местах. Из этого следует, что не требуется воспроизводить предложенный макет "пиксель-в-пиксель", а достаточно скомпоновать и расположить элементы интерфейса согласно макету.
2. Все цвета и другие стили соответствуют Bootstrap Kit, поэтому следует использовать Sass-переменные из BootstrapTheme вместо указания прямых значений (hex-кодов, размеров и т.д.). Если в приложенном к задаче макете присутствуют стили, не соответствующие Bootstrap Kit, это повод не брать задачу в работу до тех пор, пока не будет решено, что именно следует сделать: внести изменения в тему (что повлечет изменения во всех зависимых интерфейсах), либо вернуть задачу дизайнеру для исправления макета.
3. Следовать правилу, что чем больше у компонента вложенных зависимостей от других компонентов, а так же чем больше собственных стилей, тем сложнее будет его переиспользовать. Лучше иметь набор небольших компонентов, которые будут собираться внутри одного большого (например, view-компонента, созданного для отображения один раз на одной странице), чем создавать небольшое количество тяжелых компонентов. Это поможет избежать ситуации, когда под каждую задачу создаются схожие компоненты, состоящие из большого количества дублируемого кода. Следовательно, если в компоненте присутствуют повторяющиеся блоки html-разметки - это признак того, что следует вынести блок в отдельный базовый компонент.

Единицы измерения

В нашей команде принято использовать rem - единицу измерения относительно базового (определённого для <html>) размера шрифта.

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