Tutorial Menggunakan Framework CSS (Bootstrap)

Pernahkan anda membayangkan berapa rumitnya dan repotnya membuat tampilan program aplikasi yang kita buat untuk end user atau dikenal dengan istilah user interface. Terus terang saya pribadi lebih dari tahap membayangkan yakni membuat bagian2 kecil html dan style untuk penerapan user interface pada aplikasi yang pernah saya buat. Saat itu sangat terbayang betapa menyusahkannya membuat desain tampilan yang konsisten dan mudah bagi end user.

Peristiwa traumatis dalam merangkai berbagai kode html dan styling dalam css dulu syukurnya sekarang tidak terjadi lagi dengan munculnya  framework CSS.  Pada awalnya saya mengenal framework tahap awal yang dinamakan Blueprint  dan 960 grid system  tahun 2011. saat ini perkembangan kerangka dasar styling CSS (dan termasuk javascript) telah sangat pesat apalagi dengan diperkenalkannya Bootstrap CSS oleh Twitter dimana fungsi fw css bukan hanya membantu dalam hal styling namun juga interaktivitas tampilan dengan pemanfaatan library jquery yang di- include di fw tersebut.

Sebelum kita masuk ke topik baiklah kita akan membahas dulu konsep dasar CSS Framework. kerangka CSS adalah pra-siap kerangka kerja perangkat lunak yang dimaksudkan untuk memungkinkan lebih mudah, lebih standar-compliant desain web menggunakan Cascading Style Sheets bahasa. Sebagian besar kerangka kerja ini mengandung setidaknya grid. kerangka kerja lebih fungsional juga datang dengan lebih banyak fitur dan fungsi tambahan berdasarkan JavaScript, tetapi sebagian besar desain berorientasi dan tidak mengganggu. Ini membedakan ini dari kerangka JavaScript fungsional dan penuh.

Dua contoh penting dan banyak digunakan adalah Bootstrap dan  Foundation.

kerangka CSS menawarkan modul dan alat yang berbeda:

ulang style sheet
jaringan terutama untuk desain web responsif
web tipografi
set ikon dalam sprite atau ikon font
styling untuk tooltips, tombol, elemen bentuk
bagian dari antarmuka pengguna grafis seperti akordeon, tab, slideshow atau jendela modal (Lightbox)
equalizer untuk membuat konten sama tinggi
sering digunakan kelas pembantu css (kiri, hide)

kerangka kerja yang lebih besar menggunakan interpreter CSS  atau seperti pre-compiled CSS seperti  SASS (tidak dibahas disini).

Mengapa menggunakan fw css ?

Hal yang paling mendasari dari framework CSS adalah pembagian kolom / grid. Di bootsrap layout tampilan web dibagi menjadi 12 kolom (fw css lainnya mungkin berbeda). Mengapa 12 kolom dapat ditelusuri http://stackoverflow.com/questions/22168820/bootstrap-why-only-12-columns.

Dengan penerapan 12 kolom pada tampilan web maka mempermudah kita dalam membuat layout dasar atau baselayout dalam penerapan desain web kita dari yang berbentuk grafis ke bentuk html dan CSS. Adanya satuan dasar kolom yang diterapkan dan menjadi baseline pola desain tampilan menjadikan tampilan web yang kita terapkan menjadi lebih konsisten dan mudah dikelola .

Mudah dikelola dalam artian kita dapat memanfaatkan fw css dalam mewujudkan desain tampilan yang responsive. Responsive merupakan tampilan yang dapat beradaptasi dengan wujud tampilan antar muka device yang mengakses situs kita. Misalnya tampilan kita akan berbeda jika user menggunakan tampilan web desktop dengan monitor yang support 1980px dengan tampilan web perangkat tablet maupun smartphone.

Konsep lainnya adalah styling dan prebuild javascript library. Persaingan antar fw dan permintaan dari para pengguna fw menjadikan saat ini fw tidak hanya dibatasi dalam hal styling html dan css semata. Namun berbagai plugin javascript turut dikemas dalam paket fw css. Misalnya bootstrap css menyertakan library jquery dengan berbagai plugin seperti modal, transitions, carrousel dan lain sebagainya. Silahkan akses di situs http://getbootstrap.com/javascript/

Mengapa menggunakan fw bootstrap ?

Untuk menjawab ini tentunya saya pribadi akan memiliki pandangan subjektif artinya tiap developer fw bootstrap memiliki base user kontributor yang paling besar (CMIIW)

  1. tanggal 13 februari tercatat memiliki 833 kontributor di halaman github mereka. Telah diberikan label star sebanyak lebih dari 106.570.
  2. fw ini paling aktif dalam pengembangan. Tercatat tanggal 13 februari terakhir dicommit di github adalah 20 jam yang lalu.
  3. pertimbangan 1 dan 2 meyakinkan pengguna fw apalagi yang baru belajar untuk lebih mudah dalam mencari referensi tentang case example atau tutorial penggunaan fw ini.
  4. Free template tersedia sangat banyak di web yang berbasis fw bootstrap hehe….

Menerapkan fw Bootstrap ?

  1. Buat file index.html komputer anda
  2. akses http://getbootstrap.com/getting-started/#download tuliskan di file anda source pada section Bootstrap CDN. Dengan menggunakan CDN maka anda harus mengkoneksikan komputer anda dengan internet.
  3. Isikan pada file index.html tersebut kode http://getbootstrap.com/getting-started/#template
  4. akses file index.html pada web browser anda.
  5. Akan terlihat halaman web yang sudah distyling secara default oleh Bootstrap CSS framwork. Pada titik ini anda berhasil.

Menerapkan tampilan responsive dengan fw bootstrap ?

Fw bootstrap hanya mengenal 4 tampilan perangkat / device dapat diakses disini http://getbootstrap.com/css/#grid-options

untuk menerapkan fw pada konteks responsiveness class html ini yang jadi based guidenya.

Class prefix

.col-xs-

.col-sm-

.col-md-

.col-lg-

Dan ingat dalam menggunakan predefined class diatas maka total jumlah satuan nominal angka harus 12 kolom contoh :

 <div class=“col-sm-3 col-md-6 col-lg-4”>I’m on the left</div>
<div class=“col-sm-9 col-md-6 col-lg-8”>I’m on the right</div>

Dan yang tidak kalah penting adalah menampilkan kelas div tertentu apabila tampil pada perangkat tertentu saja. Untuk hal ini anda dapat mengunjungi halaman http://getbootstrap.com/css/#responsive-utilities sebagai referensi. Misalnya anda ingin agar logo berubah menjadi lebih kecil apabila menggunakan tampilan device smartphone maka gunakan class .visible-xs-*  dan .hidden-md .hidden-lg  .hidden-sm  pada kelas div kode html anda terhadap logo yang cukup besar.

Baiklah kita akan coba praktek implementasi desain responsive dan beberapa fitur bootstrap  dengan template sederhana.
1. download template belajar kita di sini :

https://github.com/navotera/kulgram/tree/master/bootstrap

  1. kita akan mendemonstrasikan fitur responsive di bootstrap
  1. membuat modal dengan menggunakan bootstrap javascript plugin

buat script baru dibawah </div> atau close tag penutup class row

 <div class="row">
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
                 Hello kulgram sukses PHP Kalsel
    </div>
  </div>
</div>
</div>

script diatas akan menunjukkan modal dialog yang diaktivasi saat anda menekan tombol / button. That’s it..

sekian pengenalan bootstrap 3 framework untuk kali ini. Maaf apabila sangat singkat untuk referensi tambahan silahkan buka referensi resmi dari twitter bootstrap 3  di

http://getbootstrap.com/

[text-blocks id=”189″ slug=”share-this”]

Exit mobile version