Русский
Русский
English
Статистика
Реклама

Визуальное сравнение 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.

Благодарю за внимание.
Источник: habr.com
К списку статей
Опубликовано: 27.07.2020 10:17:57
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Css

Html

Программирование

Разработка веб-сайтов

Html5

Css3

Framework

Style

Styles

Стили

Comparison

Сравнение

Категории

Последние комментарии

© 2006-2020, personeltest.ru