Cara Menggunakan Pure Css pada Template Blogger
Jika Twitter punya css framework bernama Bootstrap maka Yahoo juga punya css framework yaitu Pure CSS. Pure Css Framework adalah sebuah framework css yang dibuat oleh Yahoo yui, jika anda telah mengenal Bootstrap , bisa dibilang pure css sama halnya seperti Bootstrap. Namun yang mebedakan, Pure css memiliki ukuran yang kecil sehingga ringan dalam loading dan cocok bagi Anda yang mengingingkan template blog yang loadingnya cepat, mengapa framework ini lebih ringan? salah satunya karena lebih minimalis dalam penggunaan kode sehingga ringan untuk dimuat, selain itu dalam framework ini tidak terlalu banyak aturan dan lebih bebas.
Lalu bagaimana cara menggunakan atau mengintegrasikan pure css dengan template blogger, caranya sangatlah mudah, apalagi ika Anda sudah membaca artikel saya sebelumnya (Cara Mengintegrasikan Bootstrap dengan Template Blogger) caranya sama da tidak jauh berbeda. Berikut langkah-langkahnya :
1. Pertama silahkan Anda kunjungi situs official dari Pure Css.
2. Kemudian salin kode css yang ada di halaman utam situs tersebut, kodenya kurang lebih seperti ini.
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"/>4. Letakkan kode yang sudah Anda salin tadi diatas kode <head> atau header.
5. Jika sudah silahkan Anda simpan dan siap untuk Anda gunakan.
Setelah Anda berhasil mengintegrasikan pure css dengan template blogger, selanjutnya adalah membuat layout responsif, menu navigasi, tombol, tabel, maupun formulir dan menyesuaikannya dengan class yang ada pada pure css. Sebagai contoh berikut adalah beberapa kode yang bisa Anda gunakan dalam membuat menu navigasi, tombol dan komponen lainnya.
Menu Navigasi
<div class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
</ul>
</div>Tombol
<div>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>
</div>Tabel
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>Formulir
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Supercalifragilistic Label</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>Dengan menggunakan pure css framework maka Anda akan semakin mudah melakukan beberapa perubahan pada template blog Anda dan membuat template semakin ringan.
Cara Menggunakan Pure Css pada Template Blogger
Reviewed by Alex
on
4/08/2016
Rating:
Reviewed by Alex
on
4/08/2016
Rating:
Tidak ada komentar: