Pure, CSS Module dari Yahoo!

, , 0 Comments

Baru-baru ini Yahoo! meluncurkan Pure CSS yaitu sebuah CSSModule 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.

Artikel Terkait

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>

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 websitenyahttp://purecss.io/
Bagaimana Pure CSS ini menurut kamu?

Tags

cara menggunakan pure css,contoh css dalam website,belajar web designer membutuhkan waktu,Contoh penggunaan css pada desain web,contoh sederhana pemograman web menggunakan CSS,contoh project html,beberapa contoh website,membuat layout seperti facebook dengan css,membuat content dgn css3,layout website 3 kolom dengan css,membuat layout blog menggunakan pure css,gambar kebawah pakai div,framework html untuk tampilan membuat web,framework bootstrap,format css3 kertas,ekstensi gambar pure adalah?,design pure css yahoo,desain web menggunakn css,website yang menggunakan scc,membuat segitiga kecil dengan css