Всем привет!
Это вторая статья про Fast Logo, если вы не читали прошлую статью, то советую перейти в профиль и посмотреть. В прошлой статье я написал, что я вообще буду разрабатывать.
Стек
Недавно я понял, что Vite.js очень легкий и удобный сборщик. Я точно буду использовать его для сборки приложения. Vite за одну команду и одну секунду создаст типичный фронтендский шаблон.
Я отталкиваюсь от того, насколько много данных я буду использовать и как легче всего будет их автоматизировать. По сути, мне нужно обрабатывать данные об элементах, о самом логотипе и о свойствах логотипа. Чаще всего, в подобных случаях, я склоняюсь к React + Redux. Мне кажется, что Редакс очень подойдет для таких задач и мне с ним удобнее работать.
Также я буду использовать TypeScript, просто потому-что не хочу отставать от трендов.
Итоговый стек, такой: React + TypeScript + Redux + Vite
Принцип работы
Давайте обратимся к моему первому макету и я кратко напомню, что где находится:
Например, я выбрал квадрат в качестве фона. Теперь в блоке с логотипом должен появится квадрат со стандартными значениями, а свойства изменится на значения выбранного элемента (квадрата):
Далее я хочу букву Б вставить в логотип. Я должен выбрать вкладку "Текст", где будет список шрифтов. Я должен выбрать шрифт и в свойствах задать букву Б. После этого буква добавится в логотип. Тоже самое и с иконками.
В элементах можно изменять их свойства и у каждого класса элементов свои свойства:
Фон
- Тип фона (круг, квадрат, ромбик и.т.д)
- Цвет фона
- Цвет границы
- Размер границы
Текст
- Шрифт текста
- Цвет
- Размер
- Положение (слева, справа, сверху, снизу или посредине)
Иконки
- Тоже самое что и у текста
Итог
Я вижу, что я буду делать, всё предельно понятно и не такой уж и сложный проект выходит.
Старт произошел, в следующей статье я покажу готовую верстку и некоторые рабочие детали.
Подписывайтесь, чтобы оставаться в курсе!