Clever Geek Handbook

Uma comparação visual de 13 estruturas CSS

Bom dia amigos!



Trago à sua atenção os resultados de um pequeno estudo - uma comparação visual de 13 frameworks CSS.



O objetivo do estudo é determinar qual estrutura faz o melhor trabalho com o estilo padrão, ou seja, sem adicionar classes especiais (fornecidas pelo framework).



O estudo apresenta as seguintes estruturas:





As seguintes versões dos estilos foram usadas:







A marcação de teste apresenta os principais elementos de uma página da web com ênfase nas tags semânticas: 



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


Esta é a aparência:









você pode brincar com o código aqui:







O sandbox não permite a tag head, portanto, seja bem-vindo ao GitHub Pages .



O código do projeto está aqui .



Os resultados da pesquisa são bastante esperados: Bootstrap é o primeiro, Materializar é o segundo.



Materializar parece seguir o conceito de "primeiro móvel", e é por isso que o Bootstrap perde quando se trata de telas grandes. Também materializar perde em termos de funcionalidade, mas isso é outra história.



Esqueleto e Piquenique pareciam promissores para mim.



Obrigado pela atenção.


More articles:


All Articles