Предлагаю Вашему вниманию результаты небольшого исследования — визуального сравнения 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.
Благодарю за внимание.
RickCastle2018
Mini.css? Весьма хороший и максимально компактный.
Спасибо за сравнение!