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

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

    Средняя зарплата в IT

    120 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 6 371 анкеты, за 1-ое пол. 2021 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 16

      +1
      Mini.css? Весьма хороший и максимально компактный.
      Спасибо за сравнение!
        +1

        C tailwind имхо не очень корректное сравнение, так как он по умолчанию никаких особых стилей для дефолтных элементов не предоставляет, только минимальную базу — немного расширенный normalize.css и заточен под билд кастомного стиля через npm/webpack

          +3

          Странный обзор. Мы протестируем микроскопы путём забивания гвоздей фреймворки не так как их нужно использовать, и посмотрим кто из них лучше.

            +1
            Цель исследования — определить, какой из фреймворков лучше всего справляется со стилизацией по умолчанию, т.е. без добавления специальных (предусмотренных фреймворком) классов.

            с поставленной задачей обзор справился на 5+, а вот забивать микроскопом гвозди или смотреть в него — дело индивидуальное.
            –1
            del
              –1

              Semantic LOVE !

                0
                никакого UI тут нет, чтоб можно было увидеть разницу… что это за сравнение. базовые выдержки из документации. Можно же было, взять максимально простецкую админку, и на ее примере показать разницу.
                  0
                  Цель исследования выполнена.

                  Можно же было

                  Можно, вот и займитесь, а мы посмотрим.
                    0
                    это исследование такого масштаба, что хватило на статью? Сегодня пятница? Ну то есть я не знаю, какая польза от этого текста. А нет у вас случайно «исследований» на тему «10 способов установить npm» или что-то в этом духе? Прежде чем указывать на то, что цель исследования выполнена, лучше подумать, есть ли польза от этого другим? Если я решаю, что-то сравнить, и при этом это занимает 15-20 минут, я не пишу статьи на хабр. Спасибо
                      +1
                      Если я решаю, что-то сравнить, и при этом это занимает 15-20 минут, я не пишу статьи на хабр.

                      По факту звучит так: «я ничего не пишу на хабре, но критиковать обожаю».
                      Повторюсь, займитесь любыми исследованиями и выложите результат, а мы посмотрим, будет ли от этого польза. Удачи.
                        0
                        По факту звучит так: «я ничего не пишу на хабре, но критиковать обожаю».


                        Это не звучит так, а я именно так и сказал. Только не потому, что люблю критиковать, а потому что не вижу смысла писать «ни о чем».
                          +2
                          Зато ниочёмных комментариев хоть отбавляй. Вот бы и от них был польза…
                  0
                  Классы не прописаны. Сравнение некорректное.
                    0
                    Цель исследования — определить, какой из фреймворков лучше всего справляется со стилизацией по умолчанию, т.е. без добавления специальных (предусмотренных фреймворком) классов.

                    Нужно быть внимательнее, автор ставил другую цель.
                    0
                    Странно, кодепен не хочет менять представление в зависимости от выбранного фреймворка
                      0
                      Важно сравнение в расширяемости, предсказуемости этого расширения. Важна возможность лёгкого переопределения базовых стилей фреймворка. В своё время отказался от Bootstrap в пользу UIKit как раз по этой причине. UIKit придерживается слегка модифицированной методологии БЭМ.

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое