Хабрахабр

Визуальное сравнение 13 CSS-фреймворков

Доброго времени суток, друзья!

Предлагаю Вашему вниманию результаты небольшого исследования — визуального сравнения 13 CSS-фреймворков.

Цель исследования — определить, какой из фреймворков лучше всего справляется со стилизацией по умолчанию, т.е. без добавления специальных (предусмотренных фреймворком) классов.

В исследовании представлены следующие фреймворки:

Использовались следующие версии стилей:
В тестовой разметке представлены основные элементы веб-страницы с акцентом на семантические теги:

<header> <figure> <figcaption>logo</figcaption> <img src="logo.png" alt="logo"> </figure> <nav> <a href="#">link1</a> <a href="#">link2</a> <a href="#">link3</a> </nav></header> <hr> <main> <h1>main title</h1> <aside> <h4>aside title</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, quibusdam.</p> </aside> <section> <h2>section title</h2> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit, illum.</p> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> <table> <caption>table</caption> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> <dl> <dt>term</dt> <dd>Lorem <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. <mark>Accusamus</mark>, obcaecati?</dd> </dl> <details open> <summary>summary</summary> <p><small>Lorem dolor sit amet ipsum, consectetur adipisicing elit. Explicabo, repellat?</small></p> </details> <button>button</button> </section> <article> <h3>article title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, architecto?</p> <blockquote>Lorem ipsum dolor, sit amet <cite>consectetur adipisicing elit.</cite> Ipsam, ad!</blockquote> <code> console.log('hello world') </code> </article></main> <hr> <footer> <form action="#"> <fieldset> <legend>form</legend> <label>name: <input type="text"> </label> <label>email: <input type="email"> </label> <input type="submit" value="subscribe"> </fieldset> </form> <p>© 2020.</p></footer>

Вот как это выглядит:


Поиграть с кодом можно здесь:

Песочница не позволяет работать с тегом head, поэтому милости прошу на GitHub Pages.

Код проекта находится здесь.

Результаты исследования вполне ожидаемы: первое место — Bootstrap, второе — Materialize.

Materialize, судя по всему, следует концепции «mobile first», из-за чего проигрывает Bootstrap, когда дело касается широких экранов. Также Materialize проигрывает в плане функциональности, но это другая история.

Перспективными мне показались Skeleton и Picnic.

Благодарю за внимание.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть