Download
Materi JS
Materi CSS
BuKitJS & Lisensi
   

Penggunaan BukitJS CSS

  • Pengantar
Dalam rangka kemudahan pembuatan halaman website, Bukitjs CSS Framework disusun berdasarkan konsep PENULISAN SURAT atau BUKU. Hal-hal penting yang perlu dipelajari untuk memenuhi standar ini, yaitu :
  • Pembuatan Gambar Latar
  • Pengenalan Warna Pengisi
  • Pengenalan Jenis Tombol
  • Pengenalan Warna Teks
  • Pengenalan Jenis dan Warna Link
  • Desain Header
  • Desain Bagian Inti Halaman atau Body
  • Desain Footer
  • Pembuatan Gambar Latar
Buatlah tag img beserta src gambarnya, lalu berikan CLASS="latar". Untuk hasil terbaik tempatkanlah elemen ini setelah tag body dokumen Anda.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>buKitJS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="skrip/bukitcss.css" type="text/css" rel="stylesheet">
</head>
<body>
<img class="latar" src="/bukitjs/gambar/bukitjs.jpg">
</body>
</html>
  • Pengenalan Warna Pengisi
Terdapat 15 pilihan warna bagi kamu untuk mengisi elemen pada halaman, yaitu: tmb - tmb14.
Contoh :
<div class="tmb8 head-kop"></div>
  • Pengenalan Jenis Tombol
  • Terdapat 15 pilihan tombol, yaitu: tmbl - tmbl14. Namun jika kamu ingin membuat elemen lain sebagai tombol, selain tag button dan sejenisnya maka kamu wajib untuk mendeklarasikan terlebih dahulu bahwa itu adalah tombol dengan menambahkan class="tombol".
    Contoh :
    <div class="tombol tmbl8"></div>
    
  • Pengenalan Warna Teks
  • Terdapat 4 pilihan warna bagi kamu untuk mewarnai teks pada halaman, yaitu: warna1 - warna4.
    Contoh :
    <p class="parag warna1">Ini Warna 1</p>
    <p class="parag warna2">Ini Warna 2</p>
    
  • Pengenalan Jenis dan Warna Link
  • Terdapat 20 pilihan jenis bagi kamu untuk membuat link, yaitu : link0 - link19.
    Contoh :
    <a href="#" class="link10">link10</a>
    <a href="#" class="link12">link12</a>
    <a href="#" class="link15">link15</a>
    
  • Desain Header
  • Bukitjs CSS telah membuat desain standar untuk membuat bagian header dalam bentuk pendeklarasian CLASS pada tag-tag html yang dibutuhkan. CLASS-CLASS yang dibutuhkan dalam header yaitu:
  • Class head
  • yaitu sebagai pembungkus utama bagian header yang membungkus SELURUH elemen lainnya yang ada dibagian header.
    Contoh : <div class="head"></div>
  • Class head-kop
  • yaitu sebagai membuat kop/rincian atas dari header. Kamu juga dapat mengisi warna pada head-kop.
    Contoh :
    <div class="head">
    <div class="tmb11 head-kop"></div>
    </div>
    
  • Class head-kop2
  • yaitu sebagai pembuat kop/rincian mode yang ke dua dari header. Kamu juga dapat mengisi warna pada head-kop2 ini. Biasanya class ini cocok untuk pembungkus bagian menu pada header.
    Contoh :
    <div class="head">
    <div class="tmb11 head-kop2">
    <div class="head-menu">Menu 1</div>
    <div class="head-menu">Menu 2</div>
    <div class="head-menu">Menu 3</div>
    </div>
    </div>
    
  • Class head-hias [1-6]
  • yaitu sebagai penghias bagian head yang terdiri dari 6 (enam) pilihan. Saran: gunakanlah Class head-hias1, head-hias4 dan head-hias5 untuk hasil terbaik.
    Contoh:
    <div class="head">
    <div class="tmb11 head-kop">
    <div class="head-hias1">Head Hias 1</div>
    <div class="head-hias4">Head Hias 4</div>
    <div class="head-hias5">Head Hias 5</div>
    </div>
    </div>
    
  • Class head-menu
  • Class ini digunakan untuk membentuk menu namun akan lebih LENGKAP bila kamu menambahkan CLASS seperti halnya saat pembuatan tombol atau CLASS Warna.
    Contoh 1:
    <div class="head">
    <div class="tmb11 tombol head-kop2">
    <div class="tmbl2 tombol head-menu">Menu 1</div>
    <div class="tmbl3 tombol head-menu">Menu 2</div>
    <div class="tmbl4 tombol head-menu">Menu 3</div>
    </div>
    </div>
    
    Contoh 2:
    <div class="head">
    <div class="tmb1 head-kop2">
    <div class="tmb2 head-menu">Menu 1</div>
    <div class="tmb3 head-menu">Menu 2</div>
    <div class="tmb4 head-menu">Menu 3</div>
    </div>
    </div>
    
  • Class head-cari
  • Jika kamu ingin menambahkan kotak pencarian didalam header gunakanlah class ini sebagai PEMBUNGKUS UTAMA. Class selanjutnya yang dibutuhkan adalah "head-input-teks", dan "head-input-tmbl".
    Contoh:
    <div class="head">
    <div class="tmb11 head-kop2">
    <div  class="head-cari">
    <form action="cari.php" enctype="application/x-www-form-urlencoded" method="get">
    <input type="text" class="ta2 head-input-teks"/>
    <input type="submit" class="head-input-tmbl" name="ccari" value="cari">
    </form>
    </div>
    </div>
    </div>
    
  • Desain Footer

Untuk membuat footer kamu dapat menggunakan CLASS="foot" sebagai PEMBUNGKUS UTAMA bagi seluruh elemen-elemen yang ada di bagian footer. Elemen-elemen berikutnya untuk membuat objek yang beraturan di dalam footer HARUSLAH kamu bungkus dengan menggunakan CLASS="foot-hias1", atau CLASS="foot-hias2". Gunakan jugalah CLASS-CLASS yang lain jika dibutuhkan untuk menghiasi footer Anda seperti class parag, warna1, tmb, dan sebagainya.

Contoh:
<div class="foot">

<div class="foot-hias1">
Copyright © 2015 buKitJS, All rights reserved.<br>
Dual licenses: <a href="#" class="link10" target="_blank">buKitJS License</a>
and <a href="https://opensource.org/licenses/BSD-3-Clause" class="link10" target="_blank">BSD 3-Clause License.</a>
</div>

<div class="foot-hias2">
buKitJS Library/Framework and Design this website created by: Ardiansyah Putra Bukit.<br>
email: <a href="mailto:" class="link10">ardiansyah.bukit@gmail.com</a>, fb:<a href="#" class="link10" target="_blank">Ardiansyah Putra Boekit</a>
</div>

</div>
  • Desain Bagian Inti atau Body
  • Bagian inti adalah bagian yang MEMBUNGKUS SELURUH konten-konten pada halaman. Bukitjs CSS meyediakan pembungkus dengan menggunakan CLASS="layar-utama". Class pendukung lainnya adalah class "layar-kecil", "layar-sedang", "layar-lebar" dan "layar" yang HARUS berada didalam class "layar-utama".

    Class ini berfungsi sebagai pembagi halaman ke dalam beberapa bagian. Kamu juga dapat meng-KOMBINASIKAN ke-empat CLASS ini secara BERSAMAAN ke dalam bagian class "layar-utama". Isilah class ini dengan warna kesukaanmu dengan menggunakan class warna. Gunakanlah seperlunya.

    Contoh:
    <div class="layar-utama">
    <div class="tmb3 layar-kecil">Ini class layar-kecil</div>
    <div class="tmb9 layar">Ini class layar </div>
    <div class="tmb11 layar-sedang">Ini class layar-sedang</div>
    </div>
    

  • Membuat dan Mengatur Konten di dalam Class layar-kecil, layar-sedang, layar-lebar ataupun layar serta membuat Paragraf dan Judul Paragraf
  • Ingatlah Bukitjs CSS dibuat berdasarkan konsep pembuatan buku atau surat, jadi jika kamu ingin membuat objek didalam Class layar, layar-kecil dan layar-sedang maka kamu HARUS mendeklarasikan pembungkus objek-objek tersebut dengan nama CLASS="buku" atau CLASS="buku2". Kamu juga dapat mengisi Class ini dengan menggunakan CLASS Warna.

    Class paragraf dapat kamu sisipkan di luar maupun di dalam class buku. Jika, ingin membuat paragraf gunakanlah CLASS="parag". Untuk JUDUL Paragraf gunakanlah CLASS="judul", untuk membuat Bullet And Numbering gunakanlah tag ul atau CLASS="ul-buku", perhatikanlah perbedaaannya.

    Misal: 
    <ul>
    <li type="1">list 1</li>
    <li type="1">list 1</li>
    </ul>
    
    <ul class="ul-buku">
    <li type="1">list 1</li>
    <li type="1">list 1</li>
    </ul>
    

    Lalu aturlah warna teksnya dengan Class Warna Teks[warna1-warna4]

    Contoh:
    <div class="layar">
    
    <div class="tmb9 buku">
    <p class="judul warna1">Mau tahu sedikit tentang buKitJS Library/Framework?</p>
    
    <p align="justify" class="parag">Library ini sangat cocok bagi seorang Programer Pemula, namun ingin membangun sebuah Website yang Profesional. BuKitJS sangat mudah digunakan,
    <i>"sedikit"</i> apapun pengetahuan kamu mengenai teknik pemrograman Javascript dan CSS, namun dengan menggunakan buKitJS
    <i>"lama-lama pasti akan menjadi bukit."</i>
    </p>
    </div>
    
    <div class="tmb3 buku">
    <p align="justify" class="parag">Untuk segera menggunakan ini, silahkan download dulu Library/Frameworknya di link berikut :</p>
    <div align="justify" class="parag">
    <a href="#" class="link3"><div align="left" class="tombol tmbl10" style="width:177px;">Download Javascript buKitJS V0.7 (BETA)</div></a>
    <a href="#" class="link3"><div align="left" class="tombol tmbl10" style="width:177px;">Download CSS buKitJS V0.7 (BETA)</div></a>
    </div>
    </div>
    

  • Membuat Konten Seperti Kartu Buku/Kartu Nama
  • Class-class yang harus disediakan untuk membuat ini adalah Class kartu, judul, parag, kartu-footer. Tempatkanlah CLASS="kartu" sebagai PEMBUNGKUS UTAMA class-class lainnya. Aduklah itu dengan imajinasimu agar menjadi lebih menarik, untuk hasil terbaik masukkanlah class kartu ke dalam class buku2 atau buku.

    Contoh:
    <div class="buku2">
    <div class="tmb14 kartu">
    
    <p align="left" class="judul">
    <a href="javascript:void(0)" class="link18">[No. 1]</a> 
    <a href="javascript:void(0)" class="link19">Teks Judul</a>
    </p>
    <p align="justify" class="parag">Paragraf Kartu</p>
    <p class="kartu-footer"><i>
    <span class="warna3">Teks1</span> | <span class="warna3">Teks1</span> |
    <span>
    <a href="#" class="link18" target="_blank">yuk, langsung praktek!</a> 
    </span>
    </i>
    </p>
    
    </div>
    </div>
    
  • Desain Paging Halaman
  • Class-class yang harus disediakan untuk membuat ini adalah Class halaman, parag, halaman-teks1, halaman-teks2, halaman-teks3, clompat. Tempatkanlah CLASS="halaman" sebagai PEMBUNGKUS UTAMA class-class lainnya. Aduklah itu dengan imajinasimu agar menjadi lebih menarik, untuk hasil terbaik masukkanlah class halaman ke dalam class parag atau buku dan gunakanlah CLASS="inihal1" atau CLASS="inihal2" sebagai penanda halaman yang sedang aktif.

    Contoh:
    <p class="parag">
    <div class="halaman" id="hal">
    <span class="warna2">Halaman:</span>
    <span>
    
    <a href="#" class="inihal1">1</a>
    <a href="#" class="inihal2">2</a>
    </span>
    <span class="halaman-teks1">[ 1 - 5 dari 8 materi yang terkait ]</span>
    <p class="">
    <span class="halaman-teks2">atau lompat ke halaman: </span>
    </p><p class="halaman-teks1">
    </p>
    <form action="" enctype="application/x-www-form-urlencoded" method="get">
    <input name="pt" class="ta halaman-teks3" autocomplete="off" placeholder="0-9" value="2" type="text">
    <input class="tmbl11 clompat" value="Lompat" type="submit">
    </form>
    <p></p>
    <p></p>
    </div>
    </p>
    
  • Mengaktifkan dan Me-nonaktifkan Bingkai/border
  • Gunakanlah Class="bingkai" untuk Mengaktifkan, dan Class="bingkai0" untuk menonaktifkan.
  • Membuat Float Kanan atau Float Kiri, dan Clear
  • Gunakanlah Class="floatr" untuk float kanan, Class="floatl" untuk float kiri dan Class="Clear0" untuk menonaktifkan clear elemen dan Class="clear" untuk mengaktifkan clear elemen.
  • Menyembunyikan dan menampilkan Elemen
  • Gunakanlah Class="none" atau Class="hilang" untuk menyembunyikan elemen dan Class="lihat" untuk menampilkan elemen.
  • Desain Formulir Pendaftaran dan Login

Untuk membuat Formulir kamu dapat menggunakan CLASS="buku" sebagai PEMBUNGKUS UTAMA bagi seluruh elemen-elemen yang ada di bagian Formulir. Elemen-elemen berikutnya untuk membuat objek yang beraturan di dalam Formulir HARUSLAH kamu bungkus dengan menggunakan CLASS="parag". Di dalam class="parag" kamu dapat menambahkan elemen dengan menggunakan class="label-utama", class="label", class="label2", class="head-input-teks", class="tombol-besar", dan lain sebagainya.

Contoh:

<div class="buku" style="height:277px;">

<div class="parag">
<div class="tmb10 label-utama">Formulir Pendaftaran....</div>
</div>

<form action="" enctype="application/x-www-form-urlencoded" method="post">
<div class="parag">
<div class="label"><b>Pengguna</b></div>
<div class="label2"><input class="head-input-teks" type="password" placeholder="pengguna" autocomplete="off" value=""></div>
</div>

<div class="parag">
<div class="label"><b>Sandi</b></div>
<div class="label2"><input class="head-input-teks" type="password" placeholder="*******" value=""></div>
</div>

<div class="parag">
<div class="label"><b>Alamat</b></div>
<div class="label2"><textarea class="head-input-teks" placeholder="alamat kamu"></textarea></div>
</div>

<div class="parag"><input type="submit" class="tmbl11 tombol-besar" value="Daftar"></div>
</form>
</div>
Copyright © 2015 buKitJS, All rights reserved.
Dual licenses: buKitJS License and BSD 3-Clause License.
buKitJS Library/Framework and Design this website created by: Ardiansyah Putra Bukit.
email: ardiansyah.bukit@gmail.com, fb:Ardiansyah Putra Boekit