Clever Geek Handbook

Une comparaison visuelle de 13 cadres CSS

Bonne journée, mes amis!



J'attire votre attention sur les résultats d'une petite étude - une comparaison visuelle de 13 frameworks CSS.



Le but de la recherche est de déterminer quel cadre fait le meilleur travail avec le style par défaut, c.-à-d. sans ajouter de classes spéciales (fournies par le framework).



L'étude présente les cadres suivants:





Les versions suivantes des styles ont été utilisées:







Le balisage de test présente les principaux éléments d'une page Web en mettant l'accent sur les balises sémantiques: 



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


Voici à quoi cela ressemble:









vous pouvez jouer avec le code ici:







Le bac à sable n'autorise pas la balise head, alors bienvenue sur GitHub Pages .



Le code du projet est ici .



Les résultats de la recherche sont tout à fait attendus: Bootstrap est le premier, Materialise est le second.



Materialise semble suivre le concept «mobile first», c'est pourquoi Bootstrap est perdant lorsqu'il s'agit d'écrans larges. Materialise perd également en termes de fonctionnalités, mais c'est une autre histoire.



Skeleton et Picnic me semblaient prometteurs.



Merci de votre attention.


More articles:


All Articles