Jump to content
IPS Invision Community
  • Sipsb
    Sipsb

    IPS 4.5: Улучшения дизайна тем

    Sign in to follow this  

    Если вы некоторое время работали в 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.

    Front-end-colours.jpg

    Удаление жестко закодированных цветов

    Несмотря на то, что настройки нашей темы позволили владельцам сообщества изменять большинство цветов,  в нашей 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%, и вся тема немедленно отразит изменение.

    font-scale.jpg
    Новые параметры размера шрифта

    Интервал шкалы

    Отсутствие согласованной шкалы интервалов привело к тому, что в любой конкретной ситуации использовались произвольные значения, что опять-таки отрицательно сказалось на визуальной гармонии нашего дизайна. Поэтому мы ввели шкалу интервалов в 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 и, конечно, облегчения их обслуживания для наших клиентов.

    Edited by Sipsb

    • Нравится 2
    Sign in to follow this  


    User Feedback

    Recommended Comments

    Всё! Я понял, что без стакана не разобраться с IPS 4.5 :ditched:

    Share this comment


    Link to comment
    Share on other sites
    nikson

    Posted

    Это сложный вопос, я даже не понял где они лежат физически стили эти :dontknow:

    Share this comment


    Link to comment
    Share on other sites
    Sipsb

    Posted

    @nikson Все стили находятся в БД, но можно включить режим дизайнера и все стили выгрузятся.

    Цитата

    Режим дизайнера является передовым способом изменения стилей.
    После включения вы сможете изменять HTML и CSS-код, а также изображения в директории /www/test.ru/theme/.
    Каждый стиль имеет собственную директорию, имя которой совпадает с его ID.
    Вы можете изменять файлы .phtml и .css напрямую и изменения будут применены сразу же после перезагрузки страницы.
    После окончания изменения стиля вы должны отключить режим дизайнера для синхронизации изменений с базой.
    Этот режим не должен включаться на рабочем форуме в связи с дополнительным расходом ресурсов сервера.

     

    Share this comment


    Link to comment
    Share on other sites


    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×
×
  • Create New...
Вверх