[Pure] CSS Module dari Yahoo!

Baru-baru ini Yahoo! meluncurkan Pure CSS yaitu sebuah CSS Module yang bisa dipakai untuk project website kita, ya seperti Bootstrap lah tapi Pure CSS lebih kecil gak sekomplek Bootstrap, meskipun tidak sekomplek bootstrap tapi keren juga dipakai pada project website kita selanjutnya.

Seperti CSS Framework lainnya, Pure CSS juga menyajikan beberapa elemen seperti Layout yang bisa responsive, Menu, Form, tombol, Grid Base, Tabel.

Grid

Penggunaan Grid untuk Pure CSS ini sama mudahnya seperti yang lain, hanya beda di classnya saja, untuk membuat sebuah Grid Layout dengan 3 kolom maka bisa menggunakan

   

<div class="pure-g">
    <div class="pure-u-1-3">
        <!--
        By default, grid units don't have any margin/padding.
        If you want to add these, put them in a child container.
        -->
        <p>Thirds</p>
    </div>

    <div class="pure-u-1-3">
        <p>Thirds</p>
    </div>

    <div class="pure-u-1-3">
        <p>Thirds</p>
    </div>
</div>

Kita bisa menggunakan class pure-g atau pure-g-r bedanya kalau pakai pure-g-r maka ketika browser di resize ke ukuran kecil maka class tersebut akan berpindah ke bawah, kalau pure-g biasa dia akan tetap menjadi 3 kolom.

Button (Tombol)
Untuk membentuk link menjadi tombol cukup tambahkan class pure-button di tag a atau button
   

<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>

Menu
Untuk membuat menu menggunakan Pure CSS ini juga gampang aja, tinggal pakai

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li><a href="#">Home</a></li>
        <li class="pure-menu-selected"><a href="#">Blog</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

Nah, untuk melihat contoh elemen lainnya di Pure CSS ini bekerja, silakan kunjungi websitenya http://purecss.io/

Bagaimana Pure CSS ini menurut kamu?