Ketika mengacu pada software komputer, pengertian framework adalah fondasi dengan tingkat kerumitan yang ditentukan dan dapat diperluas oleh pemrogram dengan menggunakan kode mereka sendiri termasuk kompiler, juru bahasa, atau API. Secara umum, framework menyediakan lingkungan yang memfasilitasi jenis pemrograman tertentu untuk proyek pengembangan software.
Sebuah framework dalam pemrograman seringkali merupakan struktur berlapis yang menunjukkan program apa yang dapat atau harus dibangun dan bagaimana framework akan saling terkait.
Beberapa framework sistem komputer juga termasuk program aktual, menentukan interface pemrograman, atau menawarkan alat pemrograman untuk menggunakan kerangka kerja. Suatu framework mungkin digunakan untuk sekumpulan fungsi dalam suatu sistem dan bagaimana semuanya saling terkait.
Apa itu Framework? Framework bisa berarti lapisan-lapisan sistem operasi dan lapisan-lapisan suatu subsistem aplikasi, bagaimana komunikasi harus distandarisasi pada beberapa tingkat jaringan dan seterusnya. Framework Umumnya lebih komprehensif daripada protokol dan lebih bersifat perspektif daripada struktur.
Pengertian Framework
Sebagaimana namanya, framework ini diambil dari bahasa Inggris frame dan work yang artinya kerangka kerja. Secara harfiah bisa diartikan kalau framework ini adalah kerangka kerja yang biasa digunakan oleh para web developer pada saat mereka sedang mengembangkan sebuah web.
Pengertian CSS
Sedangkan CSS atau cascading style sheet adalah sebuah bahasa pemrograman komputer yang berfungsi untuk memperindah tampilan website menjadi jauh lebih indah dan menarik. Sudah tentu tim front end dari web developer menjadi bagian yang paling sering berurusan dengan CSS ini.
Pengertian CSS Framework
Dengan merujuk pada pengertian dari kedua istilah tersebut, CSS Framework bisa diartikan sebagai sebuah kerangka kerja yang biasa digunakan oleh para developer untuk memudahkan proses coding CSS pada website agar lebih terstruktur dan rapi.
Macam-Macam CSS Framework
Saat ini ada banyak sekali macam-macam kerangka CSS yang bisa Anda gunakan. Tentu saja setiap macam kerangka tersebut memiliki spesialisasi atau fungsi masing-masing di dalam sebuah website. Mari kita bahas macamnya satu persatu.
- Bootstrap
Jenis pertama yang akan kita bahas adalah bootstrap. Framework satu ini banyak digunakan oleh para web developer di seluruh dunia. Didalamnya terdapat banyak fitur yang menarik dengan segala kelebihannya. Tentu saja dengan penggunaannya proses koding jadi jauh lebih cepat.
Pada mulanya, bootstrap ini dibuat dan dipergunakan oleh para developer di Twitter pada tahun 2010 lalu. Penemunya adalah Jacob dan Mark Otto. Sebelum dinamai bootstrap, kerangka kerja satu ini dikenal dengan nama Twitter Blueprint. Sampai saat ini bootstrap sudah dikembangkan hingga ke versi 4.
2. Materialize
Jenis framework lainnya adalah materialize. Ada yang pernah menggunakan kerangka satu ini? Materialize adalah framework yang dibuat oleh Google Inc. dalam proses pembuatannya pihak developer mengimplementasikan Google Material Design secara penuh di dalamnya.
Kerangka ini tidak kalah populer di dunia pengembangan website. Tampilannya juga sangat minimalis, namun tetap terlihat elegan dengan user interface yang ringan seperti android. Di dalamnya terdapat banyak class dan komponen yang bisa Anda pelajari.
Awal mulanya materialize dikembangkan oleh 4 orang mahasiswa jenius dari Carnegie Mellon University. Penggunaannya memungkinkan Anda untuk melakukan koding secara cepat dan efektif. Banyak sekali developer web kelas dunia yang menggunakannya hingga saat ini.
3.Semantic UI
Macam framework CSS lain yang bisa Anda coba adalah Semantic UI. Jack Lukic adalah orang yang pertama kali merilis kerangka CSS satu ini pada tahun 2013 lalu. Yang membuat framework satu ini sangat populer adalah kustomisasi dan tema yang melimpah di dalamnya.
Bayangkan saja, ada lebih dari 3000 jenis tema yang bisa Anda pilih pada jenis framework satu ini. Tentu saja penggunaannya bisa membuat website yang sedang dikembangkan jadi jauh lebih maksimal performanya.
4. Foundation
Jenis CSS Framework lain yang bisa Anda pilih adalah foundation. Kerangka satu ini pertama kali dikembangkan oleh ZURB pada tahun 2011 lalu. Peluncuran kerangka satu ini disambut dengan baik oleh para web developer di seluruh dunia.
Bukan tanpa alasan, framework satu ini memiliki segudang kelebihan yang jauh melampaui jenis framework lainnya. Diantara kelebihannya tersebut adalah fitur mobile first, aksesibilitas, editing yang mudah, serta fitur responsive yang ada di dalamnya.
Tak heran kalau kemudian jenis framework satu ini dianggap sebagai salah satu yang paling profesional saat ini. Penggunanya juga tersebar di seluruh penjuru dunia. Mantapnya, foundation ini juga dilengkapi dengan fitur HTML email yang sangat menarik.
5. Bulma
Selain beberapa nama di atas, ada juga kerangka CSS pendatang baru yang dikenal dengan nama Bulma. Meskipun terbilang sebagai “anak baru”, framework satu ini terbilang sangat unggul dengan berbagai fitur yang ada di dalamnya.
Bulma adalah sebuah framework pure CSS yang tidak menggunakan javascript sama sekali di dalamnya. Framework satu ini banyak digunakan oleh mereka yang jarang menggunakan bootstrap. Soalnya bootstrap sendiri memang mengharuskan penggunanya menerapkan javascript.
Bootstrap
Sejarah Bootstrap
Bootstrap awalnya dibuat dan dikembangkan oleh pekerja / programmer Twitter, yaitu Mark Octo dan Jacob Thornton sejak tahun 2011. Saat itu memang para programmer di Twitter menggunakan berbagai macam tools dan library yang mereka kuasai dan disukai untuk melakukan pekerjaannya, sehingga tidak ada standarisasi dalam penamaan suatu class. Akibatnya sulit untuk dikelola, maka dari itu keduanya membuat suatu tools ataupun framework yang digunakan bersama dilingkukan internal twitter.
Sejak diluncurkan pada bulan agustus 2011, bootstrap telah berevolusi dari proyek yang hanya basis css menjadi sebuah framework yang lebih lengkap yang juga berisi javascript plugin, icon, Forms, dan button.
Pada januari 2012, Bootstrap merealease Versi 2.0 yang didalamnya sudah memasukan fitur responsive layout, dan sejak itu penggunaan Bootstrap sangat banyak sekali sehingga menjadi proyek Github yang sangan banyak di copy hingga 20.000 kali.
Dua tahun setelah itu tepatnya pada bulan agustus 2014 bootstrap kembali mengeluarkan versi terbaru yaitu versi 3.0 yang didalamnya sudah mengakomodasi konsep Mobile first artinya didalam pembuatan dan pengembangan mulai dari layar yang terkecil dahulu (mobile / handphone/ smartphone) dan secara bertahap pada tampilan yang paling besar.
Dan baru-baru ini bootstrap merilis versi 4.0 (sebelumnya pada tahun 2017 sudah dirilis versi betanya) sebagai penyempurnaan dokumentasi dan menambah beberapa fitur tambahan yang saat ini sedang booming yaitu dengan memberikan tampilan lebih baik bagi para pengembang ecommerce , dan tampak lebih stabil dan dengan ini maka versi 2.0 dan 3.0 tidak akan ada lagi support atau update dalam penggunaannya.
Cara Menggunakan Bootstrap
Cara menginstall bootstrap ada beberapa cara, anda bisa mengunakan beberapa cara seperti menggunakan composer, bower, menggunakan npm, secara offline dan online. Berikut ini contoh perintah untuk menginstall boostrap menggunakan cara tersebut.
- Install Bootstrap dengan Bower-> Bower install bootstrap
- Install Bootstrap dengan npm-> npm install bootstrap
- Install Bootstrap dengan composer-> composer require twbs/bootstrap
Terdapat dua cara menginstal bootstrap, dengan cara online dan offline. Kedua cara ini sama baiknya, namun dalam prosesnya lebih mudah menginstal secara online.
Cara Menginstall bootstrap secara online
Cara menginstall secara online adalah yang paling mudah dan jarang terjadi error jika bukan karena koneksi yang terputus. Untuk install online ini hanya memasukan beberapa script pada tag pada HTML dengan menghubungkan pada data css dan javascript nya secara online
Cara Menginstall bootstrap secara Offline
Cara menginstall secara offline ini adalah cara yang paling banyak digunakan oleh para developer karena semua file bootstrap sudah ada dalam komputer mereka sehingga tidak tergantung pada koneksi internet dalam pemakaiannya. Lain dengan penggunaan / installasi secara online yang ditunjukan kepada server luar, pada penginstallan offline ditujukan pada server sendiri atau secara lokal pada perangkat masing-masing developer.
Kemudian untuk menghubungkan atau menginstall bootstrapnya, buat sebuah file baik HTML atau PHP yang akan dihubungkan dengan bootstap nya. Dan sebaiknya dibuat sebagai autoload atau diberi nama index.php .
Manfaat & Keuntungan Menggunakan Bootstrap
Tentu anda yang awam tentang framework css boostrap bertanya-tanya apa istimewa jika menggunakan bootstrap sehingga banyak developer menggunakannya, berikut ini beberapa keuntungan jika menggukan bootstrap .
- Penggunaan bootstrap sangat menghemat waktu pengerjaan.
- Tampilan yang cukup menarik clean dan modern
- Tampilan sudah bisa dikatakan mobile friendly karena sudah bisa responsive, karena bootstrap sudah mendukung segala jenis resolusi.
- Sangat ringan dan terstruktur
- Dan masih banyak lagi keuntungan yang didapat jika sudah membuat suatu website.
Bootstrap memberikan kemudahan bagi anda, dengan menggunakannya dapat memangkas waktu, tenaga dalam proses pengerjaan suatu website. Kita selalu dituntut melakukan pekerjaan apapun dengan efisien dan efektif, dengan demikian penggunaan framework twitter bootstrap ini bisa anda pilih ketika membuat suatu website bagi anda maupun klien anda.
Cara Menggunakan Bootstrap
Lihat contoh di bawah ini untuk mendapatkan gambaran bagaimana cara menggunakan Bootstrap.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Hello, world!</h1>
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
http://js/bootstrap.min.js
</body>
</html>Tambahkan Bootstrap core JavaScript. Peletakan sintaks ini harus selalu di bawah atau setelah jQuery sintaks agar bisa berfungsi dengan baik. Proses lainnya dapat dilakukan melalui URL Google atau unduh manual.
3 File Utama Bootstrap
Karena berisikan sekumpulan sintaks yang menjalankan fungsi spesifik, Bootstrap memiliki berbagai tipe file di dalamnya. Berikut tiga file utama yang mengelola interface user dan fungsionalitas website.
Bootstrap.css
Bootstrap.css adalah framework yang mengatur dan mengelola layout website. HTML mengatur konten dan struktur halaman web, sedangkan CSS berurusan dengan layout situs. Oleh karena itu, kedua struktur ini harus bekerja bersama-sama untuk melakukan tindakan tertentu.
Dengan CSS, Anda bisa menghadirkan tampilan yang seragam di banyak halaman website. Semua ini berkat keberadaan fungsinya. Anda pun tak perlu lagi menghabiskan waktu berjam-jam lamanya hanya untuk mengubah, misalnya, lebar desain.
Jika menggunakan CSS, yang perlu dilakukan adalah merujuk atau mengarahkan halaman web ke file CSS. Nantinya semua perubahan dapat dilakukan di satu file saja.
Fungsi CSS tidak terbatas hanya di gaya teks saja, tetapi juga dapat digunakan untuk membuat aspek lainnya di halaman web, seperti tampilan tabel dan gambar.
Sayangnya, CSS punya banyak declaration dan selector. Jadi, Anda butuh waktu untuk mengingat keduanya.
Bootstrap.js
File ini merupakan bagian inti dari Bootstrap. Di dalamnya terdapat file JavaScript yang bertanggung jawab atas interaktivitas website.
Developer menggunakan jQuery untuk menghemat waktu karena tidak perlu menulis sintaks JavaScript berulang kali. jQuery sendiri adalah open source yang populer dan juga library JavaScript lintas platform yang memperbolehkan usernya untuk menambah berbagai fungsionalitas ke website.
Berikut contoh fungsi dan kegunaan jQuery:
- Menjalankan permintaan Ajax, seperti mengurangi (subtract) data dari lokasi lain secara dinamis.
- Membuat widget menggunakan koleksi plugin JavaScript.
- Membuat animasi menggunakan CSS property.
- Membuat konten website terlihat lebih dinamis.
Walaupun Bootstrap dengan CSS property dan elemen HTML-nya bisa berfungsi normal, tetap saja framework ini mebutuhkan jQuery untuk membuat desain yang responsif. Jika tidak, Anda hanya bisa menikmati CSS yang statis dan datar.
Glyphicons
Ikon berperan penting pada front-end website. Bahkan terkadang ikon dikaitkan dengan tindakan tertentu serta data yang ada di dalam interface user. Untuk task ini, Bootstrap menggunaan Glyphicons.
Bootstrap menawarkan Glyphicons Halflings yang bisa dipakai secara gratis. Versi gratisnya punya tampilan yang standard tapi sudah lebih dari cukup dengan adanya fungsi-fungsi yang penting.
Jika menginginkan ikon yang lebih stylish, Glyphicons menyediakan berbagai set premium yang akan membuat website terlihat lebih menarik dan juga sesuai dengan niche.
Masing-masing ikon serta ikon yang dikhususkan untuk suatu tema dapat diunduh secara gratis di sejumlah website, seperti Flaticon, GlyphSearch, dan Icons8.
Tampilan sebagian ikon dapat dimodifikasi dengan CSS, sedang sebagian lainnya sudah default. Pilih dan gunakan ikon yang sesuai dengan konsep dan tema website.