CSS-фреймворки Spectre и Milligram

13-07-2020Время чтения ~ 4 мин.CSS, HTML, LESS, SASS 5198

Начну с истории. :-) Первая версии Bootsrtap'а была мало привлекательна. Вторая версия уже предлагала готовую типографику и ряд компонентов. С учётом сумасшедшего пиара со стороны Твиттера (это их разработка), Bootsrtap стал самым популярным css-фреймворком. Третья версия стала доделкой второй — чтобы было понятно — это 2013 год. Нельзя сказать, что код Bootsrtap'а идеальный — там очень много «косяков» и архитектурных просчётов, но это всё нивелировалось хорошей документацией и, опять же, сумасшедшим пиаром.

Многие решили, что Bootsrtap 3 станет последней версией и всё к этому и шло, поскольку команда поддерживала только эту версию, а обещания выпустить следующую тонули в многочисленных альфа-версиях (4-я версия всё-таки вышла в 2018 году). Проблема состояла в том, что веб-вёрстка динамично развивающая отрасль и уже пошли серьёзные подвижки в HTML 5, CSS 3, а также развитие браузеров. То есть Bootsrtap 3 просто перестал нормально отвечать современных запросам. Скажем отсутствие поддержки единиц REM, хотя они уже полностью поддерживались в IE11, а частично в 9 и 10 версии.

За этот период, как раз и появились многочисленные css-фреймворки, которые пытались следовать идеологии Bootsrtap'а, но при этом поддерживают свой код в актуальном состоянии.

Наверное самый популярный из серии «подражателей» Bootsrtap'а — Spectre CSS framework. В первую очередь стоит отметить, что это чистый CSS-фреймворк, не имеющий js-зависимостей. Изначально он был написан на Less, а сейчас использует Sass.

Spectre очень близок к тому, что я называю «компонентный» фреймворк. Это когда можно его собрать из отдельных файлов — выбрать только то, что требуется при верстке. Сам по себе Spectre ближе к Bootsrtap 3, но в отличие о последнего, здесь код более качественен. Это хорошо сказалось на его объеме — всего 46Кб (или 79Кб с иконками и дополнительными модулями).

Поскольку фреймворк не использует JS, то ему недоступны некоторые компоненты из Bootsrtap'а. Но, что интересно, это не остановило его автора Yan Zhu, добавить в комплект несколько экспериментальных модулей, работающих на CSS. Например аккордеон, модальное окно или Popovers — это всё традиционно реализуется на JS, здесь же работает на CSS.

Поэтому Spectre можно рассматривать как легкую альтернативу Bootsrtap.

По структуре Spectre совсем несложный. Базовые настройки хранятся в файле _variables.scss, а сама сборка происходит произвольно через @import. Поскольку зависимости между файлами минимальные, то можно оставить только те, которые будут реально востребованы.

Отмечу две особенности Spectre CSS, которые следует учитывать.

Первая — используется старая версия normalize 5.0. В целом это не проблема, поскольку в этой версии учитывались особенности браузеров, которые сейчас уже не поддерживаются (IE9/10). Новые версии normalize работают чуть по другому, поэтому если просто заменить файл, то он может сбить некоторые компоненты.

Вторая особенность — это решена поддержка единиц REM, это то, что так и не могли сделать разработчики Bootsrtap'а за 5 лет. Используются две sass-переменные:

$html-font-size: 20px;
$font-size: .8rem;
 
html {
  font-size: $html-font-size;
}
 
body {
  font-size: $font-size;
} 

Таким образом корневой элемент HTML будет иметь 20px, а BODY — 16px. Если вы хотите всё привести к единому знаменателю, то можно поиграть этими значениями и сделать коневой элемент стандартным 16px. При этом придётся немного подкорректировать другие переменные, заданные в REM.

Единицы REM отсчитываются от самого верхнего корневого элемента, где установлено свойство font-size. Сейчас для этого используется тэг BODY, но раньше некоторые использовали HTML, что делает сложным понимание и интуитивный расчёт rem-значений. Например в Bootstrap 3 для HTML было установлено 10px (жестко фиксированно), а для BODY — 14px. Таким образом указывая 2rem мы ожидаем получить 28px, поскольку размер базового шрифта 14px, но по факту получается только 20px, поскольку расчёт идёт от тэга HTML. См. Единицы измерения.

В остальном Spectre простой и легко настраиваемый фреймворк.

Другой css-фреймворк Milligram представляет собой стартовый css-набор. Он также написан на Sass и настолько прост, что имеет всего 6 sass-переменных для указания цветов.

В какой-то мере Milligram можно рассматривать как учебный проект — это как-бы минимальный набор любого фреймворка: сбросы (здесь свой сброс), цвет, типографика и т.д. Если нужно сверстать какую-то простую страницу, лендинг, то спокойно можно взять Milligram за основу.

Структурно фреймворк очень простой — всего 15 файлов, которые собираются через @import. Естественно, хоть Milligram и предлагает готовые css-файлы, я думаю, что скорее всего придётся подредактировать sass-файлы и скомпилировать свой вариант: поменять цвета, прикрутить normalize, подкорректировать типографику.

В целом, если рассматривать современные css-фреймворки, то безусловный лидер по популярности Bootstrap. Но он достаточно сложный и ресурсоёмкий, да ещё и с js-зависимостями.

Про Bootstrap 5 альфа я рассказывал в своём telegram-канале.

Конечно не стоит сбрасывать со счетов и аналогичных «монстров»: UiKit, Semantic/Fomantic UI, Foundation UI, Metro4 и т.д. Но они больше рассчитаны на создание админ-панелей, где требуется много интерактивных компонентов. Для обычных сайтов их возможности очень уж избыточны, поэтому можно воспользоваться более простыми вариантами.