Saya sampaikan kepada Anda hasil dari sebuah studi kecil - perbandingan visual dari 13 kerangka kerja CSS.
Tujuan dari penelitian ini adalah untuk menentukan framework mana yang melakukan pekerjaan terbaik dengan gaya default, yaitu. tanpa menambahkan kelas khusus (disediakan oleh kerangka kerja).
Studi tersebut menyajikan kerangka kerja berikut:
- Bootstrap
- Mewujudkan
- Bulma
- Dasar
- Semantik
- Kerangka
- Tailwind
- Uikit
- Murni
- Miligram
- Momok
- Mendasarkan
- Piknik
Versi gaya berikut digunakan:
- Bootstrap - stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- Terwujud - 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
- Yayasan - cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css
- Semantik - cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
- Skeleton - 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
- Murni - unpkg.com/purecss@2.0.3/build/pure-min.css
- Miligram - cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css
- Spectre - unpkg.com/spectre.css/dist/spectre.min.css
- Basis - unpkg.com/@getbase/base/core.css
- Piknik - cdn.jsdelivr.net/npm/picnic
Markup pengujian menyajikan elemen utama halaman web dengan penekanan pada tag semantik:
<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>
Berikut tampilannya:
Anda dapat bermain-main dengan kode di sini:
Kotak pasir tidak mengizinkan tag kepala, jadi selamat datang di Halaman GitHub .
Kode proyek ada di sini .
Hasil dari studi ini sangat diharapkan: juara pertama Bootstrap, kedua terwujud.
Materialize tampaknya mengikuti konsep "mobile first", itulah sebabnya Bootstrap kalah dalam hal layar lebar. Juga mewujudkan kerugian dalam hal fungsionalitas, tapi itu cerita yang berbeda.
Skeleton dan Piknik tampak menjanjikan bagi saya.
Terima kasih atas perhatian Anda.