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

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

Предлагаю Вашему вниманию результаты небольшого исследования — визуального сравнения 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.

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