Компонент Sigma+

Примечание:

Эта страница - компонент, используемый на данной вики. Он предназначен для включения в другие страницы.

рейтинг: 
0/0%

Это мета-компонент за авторством EstrellaYoshte, предназначенный для использования в качестве вспомогательного инструмента при создании визуальных тем.
Для подключения компонента, используйте следующий код:

[[include component:sigma-plus]]

Sigma+, сам по себе, сохраняет оригинальную эстетику Sigma-9, но используя современные стандарты и техники CSS, включая:

  • Расширяемые CSS-переменные
  • Разметка с использованием grid layout и flex layout
  • Полная совместимость с прокруткой через Tab для элементов навигации
  • Соответствие правилам RTL-стилизации

Примечание от разработчика

Основная идея этого компонента - облегчить мороку с устаревшим CSS основной темы сайта (Sigma-9), который часто устанавливает пределы для кастомизации макета страницы, увеличивает количество необходимого CSS для реализации желаемого результата и ухудшает и так плачевную ситуацию с неоптимизированным CSS-кодом.

Sigma+ в основном ограничивается реимплементацией семантической и визуальной структуры страницы. Это позволяет обеспечить максимальную доступность базового оформления через этот промежуточный слой. Но есть и ряд исключений:

  • Украшения хедэра: Изначально было фоновым изображением #container-wrap, что семантически отделяло его от настоящих #header и #top-bar и делало его глухим к изменениям в размере и разметке (настройки на стороне клиента, значения браузера по умолчанию, размер экрана и прочее). Переделано в background-image для обоих div'ов.
  • Выпадающие меню топбара: отредактированы для лучшей адаптации к размерам экрана и переопределения надоедливых базовых стилей Wikidot в общем. Добавлена поддержка прокрутки через Tab.
  • Модуль оценки: значительно переделан для семантической отделённости и конфигурируемости через переменные. Убраны "особенные" стили модуля. Оставлен нетронутым.
  • Вкладки: Таблицы стилей заменены на переменные CSS. Теперь менять оформление таблиц чуть менее мучительно.

Пример

plus-example.png

:root {
--header-title: "We don't have a 55";
--sp_header-height: 21.75rem;
}

Структурные: визуальный_элемент
Филиал: en
версия страницы: 3, Последняя правка: 27 Ноя. 2024, 16:08 (22 дня назад)
Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.