Bulma adalah CSS Framework Modern berbasis Flexbox Open Source, Responsive untuk Mobile Device dan Modular kita dapat import apa yang kita butuhkan dengan menggunakan SASS. untuk menggunakan nya kalian bisa download di link berikut https://bulma.io/. Bulma berisi semua elemen yang biasa kita gunakan seperti Buttons, form controls, menu, tabs, titles, notifications, dll. Bulma hadir dengan sistem grid sederhana (cukup tambahkan kolom, mereka akan mengubah ukurannya sendiri), Navigasi bar yang fleksibel(semua jenis elemen, mereka akan tetap sejajar vertikal), membuat elemen Anda hanya dengan mengubah class dan objek. teman teman bisa kunjungi link ini untuk membaca documentasi nya https://bulma.io/documentation/.
pertama kita buat file index. html dan buat struktur berikut
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue jS</title> </head> <body> </body> </html>
setelah itu kita pasang framework css bulmanya, pasang dnegan cara online.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue jS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> </head> <body> </body> </html>
coba kita akan membuat website dengan 3 kolom. untuk memulai nya kita mesti membuatkan class container dan di dalamnya ada class yang bernama columns dan di dalamnya juga ada class column yang tugasnya membagi. berikut contohnya.
<div class="container"> <h1 class="title is-2 has-text-centered">Website 3 Kolom</h1> <div class="columns"> <div class="column has-background-success"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ratione tempora illum consectetur ducimus excepturi, explicabo, placeat laboriosam labore cupiditate distinctio consequuntur. Rerum expedita, placeat assumenda enim hic nihil porro.</p> </div> <div class="column has-background-warning"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ratione tempora illum consectetur ducimus excepturi, explicabo, placeat laboriosam labore cupiditate distinctio consequuntur. Rerum expedita, placeat assumenda enim hic nihil porro.</p> </div> <div class="column has-background-danger"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ratione tempora illum consectetur ducimus excepturi, explicabo, placeat laboriosam labore cupiditate distinctio consequuntur. Rerum expedita, placeat assumenda enim hic nihil porro.</p> </div> </div> </div>
hasilnya akan seperti berikut
saat di buku di ukuran hp
responsive juga bukan, sekian tutorial Berkenalan dengan Framework CSS Bulma, semoga bermanfaat yah teman teman.
The post Berkenalan dengan Framework CSS Bulma appeared first on Kursus Website Terbaik.