Llamo su atención sobre los resultados de un pequeño estudio: una comparación visual de 13 marcos CSS.
El objetivo de la investigación es determinar qué marco hace el mejor trabajo con el estilo predeterminado, es decir, sin agregar clases especiales (proporcionadas por el marco).
El estudio presenta los siguientes marcos:
- Oreja
- Materializar
- Bulma
- Fundación
- Semántico
- Esqueleto
- Viento de cola
- Uikit
- Puro
- Miligramo
- Espectro
- Base
- Picnic
Se utilizaron las siguientes versiones de los estilos:
- Bootstrap: stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- Materializar: cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
- Bulma: cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css
- Fundación - cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css
- Semántica: cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
- Esqueleto: cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css
- Tailwind: cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.5.2/tailwind.min.css
- Uikit: cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css
- Puro: unpkg.com/purecss@2.0.3/build/pure-min.css
- Milligramo: cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css
- Spectre: unpkg.com/spectre.css/dist/spectre.min.css
- Base: unpkg.com/@getbase/base/core.css
- Picnic - cdn.jsdelivr.net/npm/picnic
El marcado de prueba presenta los elementos principales de una página web con énfasis en las etiquetas 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>
Así es como se ve:
puedes jugar con el código aquí:
La zona de pruebas no permite trabajar con la etiqueta head, por lo que puedes acceder a las páginas de GitHub .
El código del proyecto está aquí .
Los resultados de la investigación son bastante esperados: Bootstrap es el primero, Materialise es el segundo.
Materialise parece seguir el concepto de "móvil primero", por lo que Bootstrap pierde cuando se trata de pantallas anchas. También Materialise pierde en términos de funcionalidad, pero esa es una historia diferente.
Skeleton and Picnic me pareció prometedor.
Gracias por su atención.