Если вы некоторое время работали в Invision Community, вы знаете, что наша стандартная тема по умолчанию не развивалась с первых дней 4.0. Действительно, последнее значительное обновление пришло с 4.2.
В предстоящем выпуске 4.5 мы хотели бы вернуться к теме по умолчанию и внести в нее изменения в 2020 году, а также внести постепенные улучшения в базовую кодовую базу в качестве основы для дальнейшей реорганизации в будущей версии. Следите за нашим следующим блогом, чтобы узнать больше о подтяжке лица.
В этой статье я хочу рассказать о некоторых изменениях в дизайне и уровне кода, которые мы реализовали и которые будут особенно интересны сторонним разработчикам тем или тем, кто создает собственную тему для своего сообщества.
Поддержка IE11
До сих пор мы поддерживали IE11 как браузер «B» - это значит, что мы не стремились к идеальной поддержке (особенно визуально), но стремились к тому, чтобы все функциональные возможности работали, и мы по возможности исправляли проблемы, связанные с IE11.
Начиная с 4.5 мы больше не поддерживаем IE11, и Invision Community не будет хорошо работать в этом браузере. Удалив поддержку IE11, мы можем использовать новые технологии CSS, что значительно облегчает разработку для нас и сторонних дизайнеров. Я буду обсуждать некоторые из них ниже.
Объединенные настройки темы
Мы объединили несколько существующих настроек темы в одну новую настройку. Мы обнаружили, что такие параметры, как poll_bar , step_background , rating_hover и т. Д., Почти всегда имеют один и тот же цвет - обычно это основной цвет бренда сайта. Поэтому эти настройки были заменены одним новым параметром brand_color , который используется во всем CSS в местах, где этот основной цвет был бы необходим. Это упростит начальные этапы разработки темы и облегчит соответствие брендингу в Invision Community.
Удаление жестко закодированных цветов
Несмотря на то, что настройки нашей темы позволили владельцам сообщества изменять большинство цветов, в нашей CSS-структуре было еще много жестко закодированных. Как правило, это были нейтральные цвета, используемые для таких вещей, как «закрытые» ссылки, полупрозрачный фон и т. Д., Но этого было достаточно, чтобы сделать темную тему нереальной перспективой без огромных усилий (и слава тем дизайнерам, которые предложили темные темы до сих пор!).
В версии 4.5 мы удалили жестко закодированные цвета из нашей платформы и вместо этого полагаемся на цвета, уже определенные настройками темы. Теперь вы можете, наконец, создать темную тему, просто отредактировав настройки встроенной темы.
Тип масштаба & тег {fontsize}
Хотя у нас были фиксированные классы размера шрифта (например, ipsType_normal ) в течение длительного времени, на практике у многих элементов был установлен собственный размер шрифта. Это также приводит к несогласованности и плохому визуальному ритму. Еще один побочный эффект заключается в том, что было также сложно глобально изменить размер шрифта (например, для целей брендинга или для создания темы для пользователей с ослабленным зрением).
Чтобы решить эти проблемы, мы сначала создали шкалу типов; то есть фиксированное количество размеров на выбор. Продукт, размер которого соответствует Invision Community, нуждается в гибкости, поэтому мы остановились на следующей шкале:
x_small: 12; маленький: 13; средний: 14; основание: 16; большой: 18; x_large: 20; 2x_large: 24; 3x_large: 30; 4x_large: 36.
Все эти значения доступны для редактирования в качестве настроек темы, поэтому каждая тема может регулировать используемый масштаб шрифта. Наш CSS по умолчанию в 4.5 был полностью обновлен, чтобы поместить все типы в эту шкалу.
Чтобы фактически использовать эти настройки, мы добавили новый тег {fontsize}, который принимает либо клавишу масштаба, либо определенный размер пикселя (для тех случайных ситуаций, когда абсолютно необходим определенный размер, например значки).
Почему мы не можем просто использовать {theme = "x_small"} или даже переменные CSS? Чтобы решить проблему глобального масштабирования текста, мы также добавили настройку шкалы в процентах, которая избавит вас от необходимости создавать собственную шкалу типов. { } FontSize тег автоматически применяет глобальный масштаб любых значений , передаваемых в него. Хотите, чтобы текст в вашей теме был в два раза больше стандартного? Просто установите глобальную шкалу типов на 200%, и вся тема немедленно отразит изменение.
Новые параметры размера шрифта
Интервал шкалы
Отсутствие согласованной шкалы интервалов привело к тому, что в любой конкретной ситуации использовались произвольные значения, что опять-таки отрицательно сказалось на визуальной гармонии нашего дизайна. Поэтому мы ввели шкалу интервалов в 4 пикселя (на этот раз с использованием CSS-переменных, а не настроек темы) и применили практически ко всем значениям отступов / полей. Со временем мы ожидаем полного переключения всех значений измерений на шкалу.
Новые семейства классов CSS
Мы добавили ряд новых классов интервалов для отступов и полей, что позволяет намного лучше контролировать их применение, особенно на устройствах разных размеров. Раньше ipsPad (15px) просто уменьшался вдвое на маленьких экранах - без необходимости отказа от добавления определенного CSS. Мы чувствовали, что это было неточным в течение некоторого времени, особенно потому, что мобильные устройства обычно имеют большие экраны в 2020 году и не должны быть так тесно расположены.
ipsPad_all заменяет теперь существующий ipsPad , и не вдвое себя на маленьких экранах. Вместо этого существует новое адаптивное соглашение об именах, которое позволяет применять специальные отступы для устройств определенного размера:
ipsPad_all: двойной md: ipsPad_all sm: ipsPad_all: половина
В этом произвольном примере размер рабочего стола (по умолчанию) получает двойной отступ, средний (планшеты) - обычный, а маленький (телефоны) - половину.
Мы добавили похожие классы для верхних, нижних, левых и правых отступов, а также для горизонтальных, вертикальных и ярлыков без удаления (для удаления всех отступов).
Что касается полей, старые классы ipsSpacer_ * были заменены новым семейством ipsMargin, которое работает точно так же, как и классы заполнения выше, с тем же диапазоном гибкости.
Старые классы ipsPad / ipsSpacer будут продолжать работать так же, как и раньше, для обратной совместимости, но их следует считать устаревшими с 4.5 и далее.
Мы также добавили целый ряд новых классов ipsFlex , в том числе с адаптивными элементами управления (например, упрощающие горизонтальные макеты на рабочем столе и вертикальные макеты на мобильных устройствах), а также новую утилиту ipsGap, которая автоматически добавляет интервалы между элементами. , не требуя руководства: исключение первого ребенка /: последнего ребенка.
CSS переменные & calc ()
В 4.5, благодаря прекращению поддержки IE11, мы наконец-то используем CSS-переменные и calc (), чтобы сделать CSS более понятным и простым в настройке. Многие повторяющиеся или часто настраиваемые стили - такие как стили полей форм, цвета сообщений, стили карточек, радиусы границ и т. Д. - теперь создаются как переменные CSS, что позволяет дизайнерам тем легко изменять стили в одном месте. Вместо магических чисел мы либо придерживаемся нашей шкалы интервалов, либо используем calc (), чтобы избежать жестко закодированных чисел.
Будущее
Работа, которую мы проделали до сих пор, - это просто «первый проход». Мы будем продвигаться вперед с модернизацией всей серии 4.5. * И выше с целью сокращения нашего присутствия, улучшения нашей способности поддерживать наш CSS и, конечно, облегчения их обслуживания для наших клиентов.
От Sipsb
-
2
Рекомендуемые комментарии
Создайте учетную запись или войдите, чтобы комментировать
Вы должны быть пользователем, чтобы оставить комментарий
Создать аккаунт
Зарегистрируйтесь для получения аккаунта. Это просто!
Зарегистрировать аккаунтВойти
Уже зарегистрированы? Войдите здесь.
Войти