Belajar Web Design: Belajar Pure, CSS Module dari Yahoo!

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.
pure-css-1

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>

<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>