Clever Geek Handbook

13のCSSフレームワークの視覚的比較

良い一日、友達！



13のCSSフレームワークを視覚的に比較した小規模な調査の結果に注目します。



調査の目的は、どのフレームワークがデフォルトのスタイルで最適に機能するかを判断することです。特別な（フレームワークによって提供される）クラスを追加せずに。



この調査では、次のフレームワークが示されています。





次のバージョンのスタイルが使用されました。







テストマークアップは、セマンティックタグに重点を置いてWebページの主要な要素を提示します。 



<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のページ。



プロジェクトコードはこちらです。



研究結果は非常に期待されています。ブートストラップが最初で、マテリアライズが2番目です。



マテリアライズは「モバイルファースト」のコンセプトに従っているようです。そのため、ワイドスクリーンに関してはBootstrapが負けています。また、マテリアライズは機能的には失われますが、それは別の話です。



スケルトンとピクニックは私にとって有望なようでした。



清聴ありがとうございました。


More articles:


All Articles