Предлагаю Вашему вниманию результаты небольшого исследования — визуального сравнения 13 CSS-фреймворков.
Цель исследования — определить, какой из фреймворков лучше всего справляется со стилизацией по умолчанию, т.е. без добавления специальных (предусмотренных фреймворком) классов.
В исследовании представлены следующие фреймворки:
Использовались следующие версии стилей: В тестовой разметке представлены основные элементы веб-страницы с акцентом на семантические теги:
logo
main title
section title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit, illum.
item1
item2
item3
table
1
2
3
1
2
3
4
5
6
term
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, obcaecati?
summary
Lorem dolor sit amet ipsum, consectetur adipisicing elit. Explicabo, repellat?
article title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, architecto?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, ad!
console.log('hello world')
Вот как это выглядит:
Поиграть с кодом можно здесь:
Песочница не позволяет работать с тегом head, поэтому милости прошу на GitHub Pages.
Код проекта находится здесь.
Результаты исследования вполне ожидаемы: первое место — Bootstrap, второе — Materialize.
Materialize, судя по всему, следует концепции «mobile first», из-за чего проигрывает Bootstrap, когда дело касается широких экранов. Также Materialize проигрывает в плане функциональности, но это другая история.
