• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ →
Вход
×
или зарегистрироваться

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

CSS, HTML, LESS, SASSПросмотров: 3621Комментарии: 113 июля 2020 г.

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


Создание сайтов (Украина) →
Простой генератор документации на PHP CLI с автоматизацией через Gulp
Краткий обзор Tailwind CSS
twitter.com facebook.com
Другие записи сайта
Шаблон Abstract Factory (Абстрактная фабрика) на PHP
Шаблон Abstract Factory (Абстрактная фабрика) на PHP
Понимание ООП на примере Паскаля
Понимание ООП на примере Паскаля
Немного о своём PHP-фреймворке
Немного о своём PHP-фреймворке
Отличия MaxSite CMS от WordPress с точки зрения верстки шаблона
Отличия MaxSite CMS от WordPress с точки зрения верстки шаблона
Сайту 8 лет!
Сайту 8 лет!
PHP-микрофреймворк своими руками. Основы
PHP-микрофреймворк своими руками. Основы

Комментариев: 1 RSS

1Александр14-07-2020 21:01

Спасибо за статью! Пока плотно сижу на Bootstrap.

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Вот здесь можно заказать создание сайта, шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.2886 | SQL: 20 | Память: 4.61MB | Вход