Pure: Apa, Kenapa, & Bagaimana?

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Tutorial ini akan memperkenalkan Anda ke Pure, sebuah perpustakaan CSS yang terbuat dari modul kecil, yang dapat membantu Anda dalam menulis layout yang benar-benar responsif, dengan cara yang sangat cepat dan mudah. Sepanjang jalan, saya akan memandu Anda melalui pembuatan halaman sederhana untuk menyoroti bagaimana Anda dapat menggunakan beberapa komponen perpustakaannya.

Mengapa Membuat Layout Responsif?

Selama beberapa tahun terakhir dalam pengembangan web, tiga kata yang terpental, berulang-ulang adalah: Responsive Web Design (RWD). Pada titik ini Anda seharusnya sudah tahu apa itu, tapi, kalau-kalau Anda melewatkannya, berikut beberapa sumber untuk mengisi kekosongannya:

Tapi pertanyaannya adalah: Kenapa harus responsif? Jawabannya adalah kita tidak memiliki kontrol terhadap resolusi yang akan digunakan perangkat berikutnya saat mereka mengunjungi situs web kita. Tidak lagi kita bisa menampilkan kalimat seperti, "Terbaik dilihat pada resolusi 1024x768" (walaupun Anda masih bisa menemukannya di web). Salah satu alasan utama fenomena ini adalah dari pertumbuhan lebar monitor PC dan juga dari penyebaran perangkat mobile yang terhubung ke Internet. Selain itu, berdasarkan StatCounter, saat ini ~ 16% pengguna terhubung melalui perangkat mobile. Sekarang saya tidak mengatakan bahwa RWD hanya masalah mengoptimalkan situs web untuk ukuran layar tertentu, yang saya maksud adalah bahwa kita menciptakan pengalaman hebat bagi pengguna yang mengunjungi situs web kita terlepas dari perangkat yang mereka gunakan.

Dengan mengatakan itu, jelas juga bahwa tidak semua dari kita bekerja untuk perusahaan di mana setiap orang memiliki peran tunggal (desainer, pengembang, penguji, dan lain-lain). Jadi, katakanlah Anda adalah pengembang solo, bekerja sebagai freelancer dan Anda tidak tahu banyak tentang desain web. Ada banyak perpustakaan yang tersedia yang bisa mempercepat alur kerja Anda. Yang paling lengkap pasti Boostrap dan Foundation tapi terkadang bisa berlebihan dan mungkin Anda butuh sesuatu yang lebih kecil. Dalam hal ini, sebuah proyek menarik baru telah diluncurkan oleh Yahoo yang bisa kita gunakan, yang disebut Pure.

Apa itu Pure?

Mengutip situs Pure, ini adalah seperangkat modul CSS responsif kecil yang dapat Anda gunakan di setiap proyek web. Seperti yang dikatakan sebelumnya, perpustakaan lengkapnya sangat ringan, hanya berukuran 4.2KB yang diminimalkan dan di-gzip, namun untuk menjaga agar situs web Anda lebih ringan lagi, Anda dapat menyertakan beberapa modul yang tersedia. Pada dasarnya, ini terdiri dari modul berikut:

Base
Grid
Forms
Buttons
Tables
Menus

Salah satu hal yang sangat saya hargai tentang Pure adalah bahwa hal itu didasarkan pada Normalize.css, sebuah perpustakaan terkenal yang membuat elemen lebih konsisten dan sesuai dengan standar modern dan juga berfungsi di browser lama. Karena sangat kecil, ini tidak menawarkan solusi lengkap untuk semua masalah Anda, namun ada beberapa elemen UI umum yang dapat ditemukan di banyak situs web di web. Fitur menarik lainnya dari Pure adalah bahwa ini sangat dapat diperluas dan disesuaikan. Penulis menggunakan SMACSS untuk membangunnya dan semua kelasnya dimulai dengan pure-, sehingga Anda dapat dengan mudah mengenalinya.

Meskipun Pure adalah proyek yang menarik untuk dilihat, ingatlah bahwa ini benar-benar baru dan mungkin tidak sesuai untuk proyek besar. Sebenarnya, versi saat ini (0.2.0 pada saat penulisan ini) memiliki beberapa masalah yang mungkin tidak akan Anda temukan dalam kerangka kerja yang lebih matang dan dokumentasinya juga dapat ditingkatkan. Meskipun demikian, saya menyukainya dan menjadi pendahulu, Anda memiliki keuntungan untuk meneliti dan mempelajari Pure, dari awal, yang akhirnya bisa menjadi proyek terkenal berikutnya di web.

Mari Lihat Aksi Pure

Mereka mengatakan bahwa sebuah gambar bernilai seribu kata. Bagi kita, sebagai pengembang dan desainer, demo yang bisa kita mainkan lebih baik lagi. Jadi, untuk melihat apa yang bisa Pure lakukan untuk kita, mari membuat aplikasi demo dasar. Demo kita akan terdiri dari Halaman beranda sederhana yang berisi beberapa informasi tentang diri saya (terkadang imajinasi saya membuat saya takut). Gambar di bawah menunjukkan kepada Anda seperti apa hasil akhir pada layar besar:

Dan gambar berikut, sebagai gantinya, menunjukkan kepada Anda bagaimana tampilannya pada smartphone:

Langkah 1: Membuat Menu Horizontal

Seperti yang saya katakan, Pure memiliki beberapa elemen umum yang sudah dibangun yang dapat Anda temukan di banyak situs web di web. Menu horizontal pasti salah satunya dan akan memberi kita kesempatan untuk melihat beberapa kelas modul menu.

Untuk membuat ini menggunakan HTML5, biasanya kita memiliki elemen <nav> yang membungkus sebuah unordered list yang berisi tautan utama situs web kita. Begitu daftar dibuat, kita harus menampilkannya secara horisontal. Untuk mencapai hal ini, kita harus menerapkan tiga kelas ke pembungkus daftar (<nav>): .pure-menu, .pure-menu-open, dan .pure-menu-horizontal. Kelas pertama menerapkan aturan yang umum untuk semua menu di Pure. Kelas .pure-menu-open digunakan untuk menunjukkan (bukan menyembunyikan) item daftar, sedangkan kelas .pure-menu-horizontal adalah yang bertanggung jawab untuk menampilkan item daftar pada baris yang sama. Harap dicatat bahwa secara default, menu tidak terpusat ditengah.

Sekarang, untuk meningkatkan antarmuka pengguna, kita harus menyoroti item daftar yang terhubung ke halaman saat ini. Hal ini dilakukan dengan menerapkan kelas .pure-menu-selected ke elemen <li> yang ingin Anda sorot. Dengan demikian, warna teks akan berubah dari abu-abu menjadi hitam.

Kode lengkap dari menu kita ditampilkan di bawah ini:

<nav id="main-menu" class="pure-menu pure-menu-open pure-menu-horizontal">
   <ul>
      <li class="pure-menu-selected"><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Publications</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
   </ul>
</nav>

Langkah 2: Deskripsi Penulis

Setelah menu, Anda bisa melihat kami memiliki "baris" ideal yang berisi di sisi kiri, sebuah foto dan di sisi kanan, deskripsi kecil tentang saya. "Baris" ini, sebenarnya adalah grid responsif yang terbuat dari dua unit grid, di mana membungkus foto pertama dan menempati 25% dari ruangnya, sementara yang kedua membungkus deskripsi dan menempati 75% sisanya, sepanjang lebar layar lebih besar dari 767px. Sebaliknya, jika lebar layar sama dengan atau lebih kecil, unit grid ditumpuk dan menempati 100% dari lebar yang tersedia. Perlu diketahui bahwa unit memiliki lebar 100%, jadi jika elemen di dalamnya lebih kecil, mereka hanya akan menempati sebagian unit. Untuk melihat bagaimana ini bekerja, cobalah mengubah ukuran jendela dan perhatikan bagaimana foto tidak mengkonsumsi 100% dari lebar, sementara pada saat bersamaan, unit grid ditumpuk.

Seperti disebutkan sebelumnya, Pure memiliki modul khusus untuk mengelola grid. Untuk menyatakan grid responsif, Anda harus menerapkan sebuah kelas ke kontainer yang disebut .pure-g-r. Unit grid meskipun, sebagai gantinya, berbagi nama yang sama, .pure-u-*-*, di mana bagian akhir kelas menentukan berapa banyak ruang yang akan diberikan unit yang diberikan. Misalnya, jika Anda menerapkan elemen pada kelas .pure-u-1-4, itu akan menyediakan 25% dari lebar yang tersedia, seperti yang saya lakukan untuk foto. Contoh lain bisa .pure-u-2-3 yang akan memungkinkan unit untuk mengambil 66,6% dari ruang grid.

Sistem grid ini sangat menarik karena bisa menghemat banyak waktu jika Anda tidak tahu bagaimana mengelola float, clear, dan aturan lainnya untuk membuat tata letak. Selain itu, mereka akan menyelamatkan Anda dari semua rasa sakit karena mengelola sisi responsif tata letaknya.

Dengan demikian, kode yang mengimplementasikan grid pertama akan terlihat seperti ini:

<article id="about-me" class="pure-g-r">
   <h1>Aurelio De Rosa</h1>
   <div class="pure-u-1-4">
      <img src="http://aurelio.audero.it/images/aurelio-de-rosa-2.jpg" alt="Aurelio De Rosa" />
   </div>
   <section class="pure-u-3-4">
      <p>
         I'm an Italian web and app developer who have a bachelor degree in Computer Science and more
         than 5 years' experience programming for the web using HTML5, CSS3, JavaScript and PHP.
         I mainly use the <abbr title="Linux Apache MySql PHP">LAMP</abbr> stack and frameworks like
         <a href="http://jquery.com/" target="_blank">jQuery</a>, <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a> and
         <a href="http://phonegap.com/" target="_blank">Cordova (PhoneGap)</a>. My interests also include web security,
         web accessibility, SEO and <a href="http://wordpress.org/" target="_blank">WordPress</a>.
      </p>
      <p>
         Currently I'm self-employed working with the cited technologies. I'm also a regular blogger for
         several networks (<a href="http://www.sitepoint.com/author/aderosa/" target="_blank">SitePoint</a>,
         <a href="http://mobile.tutsplus.com/author/aurelio-de-rosa/">Tuts+</a> and
         <a href="http://flippinawesome.org/authors/aurelio-de-rosa/" target="_blank">FlippinAwesome</a>)
         where I write articles about the topics I usually work with and more.
      </p>
   </section>
</article>

Langkah 3: Grid Informasi

Grid kedua dan terakhir dibagi menjadi tiga bagian yang sama. Saya membuat mereka untuk menunjukkan komponen perpustakaan lainnya, sehingga Anda dapat memiliki gambaran yang bagus tentangnya. Padahal, unit pertama memiliki sebuah tabel, yang kedua memiliki sebuah formulir, dan yang ketiga memiliki sebuah menu vertikal.

Kode di bawah ini menunjukkan kepada Anda bagaimana membagi grid menjadi tiga bagian:

<article class="pure-g-r">
   <div class="pure-u-1-3">
   </div>
   <div class="pure-u-1-3">
   </div>
   <div class="pure-u-1-3">
   </div>
</article>

Sekarang mari kita jelajahi setiap unit grid responsif ini.

Langkah 4: Tabel Responsif

Salah satu modul yang tersedia di Pure, adalah Tables. Seperti namanya, itu berisi aturan untuk menata elemen <table> dan anak-anaknya. Secara default, tabel akan memiliki border vertikal yang diterapkan pada kolom yang terpisah secara visual. Namun, Anda juga dapat menambahkan border horisontal, menerapkan kelas .pure-table-bordered atau hanya menunjukkan yang terakhir menggunakan kelas .pure-table-horizontal ke elemen <table>. Selain itu, Anda juga dapat membuat tabel bergaris untuk membantu pengguna membaca data. Untuk mencapai ini, Anda memiliki dua kemungkinan. Yang pertama akan bekerja pada browser yang mendukung nth-child dan terdiri dari penerapan nama kelas .pure-table-striped ke elemen <table>. Yang kedua, malah bekerja di semua browser, termasuk Internet Explorer 8 dan yang lebih rendah, tapi lebih bertele-tele. Ini terdiri dari menambahkan nama kelas .pure-table-odd ke setiap elemen <tr> lainnya. Untuk alasan kompatibilitas, saya akan menggunakan pendekatan kedua.

Saat ini, tabel memiliki masalah saat dilihat di layar kecil, tapi akan diperbaiki pada rilis berikutnya. Harap dicatat bahwa Anda tidak akan melihatnya di demo karena saya memperbaikinya. Beri selamat untuk saya.

Kode yang membuat tabel bergaris ditunjukkan di bawah ini:

1	<h3>Funny Price Table</h3>
2	<table class="pure-table">
3	<thead>
4	<tr>
5	<th>Hours Number</th>
6	<th>Price (€)</th>
7	<th>Safe (%)</th>
8	</tr>
9	</thead>
10	<tbody>
11	<tr class="pure-table-odd">
12	<td>1</td>
13	<td>30 €</td>
14	<td>0%</td>
15	</tr>
16	<tr>
17	<td>5</td>
18	<td>135 €</td>
19	<td>10%</td>
20	</tr>
21	<tr class="pure-table-odd">
22	<td>10</td>
23	<td>255 €</td>
24	<td>15%</td>
25	</tr>
26	<tr>
27	<td>20</td>
28	<td>480 €</td>
29	<td>20%</td>
30	</tr>
31	<tr class="pure-table-odd">
32	<td>50</td>
33	<td>1050 €</td>
34	<td>30%</td>
35	</tr>
36	</tbody>
37	</table>

Langkah 5: Formulir Kontak Bertumpuk

Formulir adalah modul lain dari perpustakaan Pure. Ini memungkinkan Anda untuk menampilkan formulir Anda dalam beberapa jenis gaya. Dalam demo ini, kita akan membuat formulir bertumpuk, dimana elemen input berada di bawah labelnya. Untuk melakukan ini, kita harus menambahkan kelas .pure-form dan .pure-form-stacked ke elemen <form>. Kemudian kita harus menempatkan kedua label dan tag input di dalam bungkusnya, dimana kita akan menerapkan kelas .pure-control-group dan kemudian memasukkan semua pembungkus ini menjadi elemen <fieldset>. Tombol submit dan tombol reset akan memiliki pembungkus juga, tapi bungkusnya akan memiliki kelas .pure-controls. Perlu diketahui bahwa untuk tombol submit, kita menggunakan kelas .pure-button-primary untuk menyorotnya. Kelas yang dikutip termasuk modul Buttons dan digunakan untuk mengubah gaya tombol, menerapkan warna biru.

Inilah kode formulir Anda:

<h3>Contact me</h3>
<form id="contact" name="contact" action="#" method="post" class="pure-form pure-form-aligned">
   <fieldset>
      <div class="pure-control-group">
         <label>Name:</label>
         <input type="text" name="name" placeholder="Name" />
      </div>
      <div class="pure-control-group">
         <label>Email</label>
         <input type="email" name="email" placeholder="Email" />
      </div>
      <div class="pure-control-group">
         <label>Subject</label>
         <input type="text" name="subject" placeholder="Subject" />
      </div>
      <div class="pure-control-group">
         <label>Message:</label>
         <textarea name="message" placeholder="Your message here..."></textarea>
      </div>
      <div class="pure-controls">
         <input type="submit" class="pure-button pure-button-primary" value="Submit" />
         <input type="reset" class="pure-button" value="Reset" /> 
      </div>
   </fieldset>
</form>

Langkah 6: Menu Vertikal dengan Header

Elemen terakhir yang akan Anda pelajari cara membuat, menggunakan Pure, akan menjadi menu vertikal dengan header. Menu jenis ini ditata dengan border hitam, disekitarnya. Untuk menggunakannya, kita akan menerapkan ke pembungkus daftar, dua dari tiga kelas yang telah kita gunakan pada langkah pertama, yaitu .pure-menu dan .pure-menu-open. Selain itu, untuk membuat header, kita harus menambahkan elemen lain dan menerapkannya pada kelas .pure-menu-heading.

Kode untuk menu ini tercantum di bawah ini:

<h2>Where to find me</h2>
<div class="pure-menu pure-menu-open">
   <a href="#" class="pure-menu-heading">My profiles</a>
   <ul>
      <li><a href="http://www.twitter.com/AurelioDeRosa">Twitter</a></li>
      <li><a href="http://www.linkedin.com/in/aurelioderosa">LinkedIn</a></li>
      <li><a href="https://github.com/AurelioDeRosa">GitHub</a></li>
      <li><a href="https://plus.google.com/111199469497044249730">Google+</a></li>
   </ul>
</div>

Kesimpulan

Jadi itu melengkapi pengenalan ini ke Pure. Semoga Anda menikmatinya. Jika Anda ingin mengikuti perkembangan Pure, Anda dapat mengunjungi repositorinya di GitHub. Jangan ragu untuk mengajukan masalah, mengajukan permintaan pull, dan berkontribusi.