Доброго времени суток, друзья!
Предлагаю Вашему вниманию результаты небольшого исследования визуального сравнения 13 CSS-фреймворков.
Цель исследования определить, какой из фреймворков лучше всего справляется со стилизацией по умолчанию, т.е. без добавления специальных (предусмотренных фреймворком) классов.
В исследовании представлены следующие фреймворки:
- Bootstrap
- Materialize
- Bulma
- Foundation
- Semantic
- Skeleton
- Tailwind
- Uikit
- Pure
- Milligram
- Spectre
- Base
- Picnic
Использовались следующие версии стилей:
- Bootstrap stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- Materialize cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
- Bulma cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css
- Foundation cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css
- Semantic cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
- Skeleton cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css
- Tailwind cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.5.2/tailwind.min.css
- Uikit cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css
- Pure unpkg.com/purecss@2.0.3/build/pure-min.css
- Milligram cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css
- Spectre unpkg.com/spectre.css/dist/spectre.min.css
- Base unpkg.com/@getbase/base/core.css
- Picnic cdn.jsdelivr.net/npm/picnic
В тестовой разметке представлены основные элементы веб-страницы с акцентом на семантические теги:
<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.
Благодарю за внимание.
