Clever Geek Handbook

A Visual Comparison of 13 CSS Frameworks

Good day, friends!



I bring to your attention the results of a small study - a visual comparison of 13 CSS frameworks.



The goal of the study is to determine which framework does the best job with the default styling, i.e. without adding special (provided by the framework) classes.



The study presents the following frameworks:





The following versions of the styles were used:







The test markup presents the main elements of a web page with an emphasis on semantic tags: 



<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>


Here's what it looks like:









You can play around with the code here:







The sandbox does not allow for the head tag, so welcome to GitHub Pages .



The project code is here .



The research results are quite expected: Bootstrap is the first, Materialize is the second.



Materialize seems to follow the "mobile first" concept, which is why Bootstrap loses out when it comes to wide screens. Also Materialize loses in terms of functionality, but that's a different story.



Skeleton and Picnic seemed promising to me.



Thank you for attention.


More articles:


All Articles