Регистрация

[CSS, HTML, Программирование, Разработка веб-сайтов] Визуальное сравнение 13 CSS-фреймворков

Ответить на тему
Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
27-Июл-2020 12:31
Цитировать


Доброго времени суток, друзья!
Предлагаю Вашему вниманию результаты небольшого исследования — визуального сравнения 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
===========
Похожие новости: Теги для поиска: #_css, #_html, #_programmirovanie (Программирование), #_razrabotka_vebsajtov (Разработка веб-сайтов), #_html, #_html5, #_css, #_css3, #_framework, #_style, #_styles, #_stili (стили), #_comparison, #_sravnenie (сравнение), #_css, #_html, #_programmirovanie (
Программирование
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
)
Профиль  ЛС 
Показать сообщения:     
Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 23-Ноя 01:09
Часовой пояс: UTC + 5