Saat ini dalam medensain sebuah halama web sudah dimudahkan dengan tersedianya berbagai css framework. Penggunaan framework ini akan memudahkan kalian untuk menentukan peletakan kolom-kolom dari layout website yang kamu buat. Tapi memang sih sebelum menggunakannya kamu akan kesulitan untuk menggunakannya, dan akan berpikir bahwa lebih baik membuat grid kolom sendiri daripada menggunakan framework semacam ini. Ini merupakan Responsive Layout.
Hal seperti itu pernah saya pikirkan selagi mempelajari penggunaan css framework ini, rasa menggunakan css framework begitu sulit dan ingin meninggalkannya, kemudian kembali membuat grid dengan code-code yang saya susun sendiri. Tapi ketika saya mencoba untuk mempelajarinya, ternyata penggunaan framework ini bisa mengefisienkan waktu kita. Kita bisa lebih cepat dalam bekerja.
Berikut beberapa css framework yang sudah siap pakai.
Less Framework 4
Less Framework terdapat 4 layout adaptif dan 3 pengaturan tipografi, semua berdasarkan pada single grid, terdiri dari 68 px kolom dengan 24 px untuk pembatas tiap grid. Konsep yang digunakan adalah untuk kode pertama default layout (992 px), dan kemudian menggunakan CSS3 media query untuk beberapa kode turunan layout lainnya: 768, 480, dan 320 px. Default layout akan diberikan untuk browser yang tidak mendukung media query yang di tentukan, dan untuk beberapa browser lainnya yang kurang dari 992px, semisal browser jenis mobile phone dan tablet maka akan menjalankan layout-layout dari media query.
Foundation
Foundation adalah 12 kolom grid layout, ini merupakan masa depan framework yang ramah dan mencakup puluhan style dan elemen untuk membantumu dengan cepat menyusun prototipe yang kemudian dapat diadaptasi untuk penataan produksi code-codemu.
Foundation memungkinkan kamu dengan cepat untuk menyusun code layout halaman website kamu untuk perangkat mobile, tablet dan desktop.
MQFramework
MQFramework, tersusun dari 12 kolom grid, yang telah disusun sesuai dengan kebutuhan yang berbeda, baik dari sebuah proyek baru ke penyesuaian proyek yang sudah ada dengan sedikit perubahan pada kode. Satu file CSS mengimport file-file framework dan custom stylesheet untuk desain situs kamu. Ini menggunakan media properti @ untuk memungkinkan kamu merancang situs yang kamu bangun ke semua ukuran browser.
Golden Grid System
Golden Grid System membagi screen menjadi 18 kolom. Kolom paling kiri dan paling kanan digunakan sebagai margin luar dari grid, yang meninggalkan 16 kolom untuk digunakan dalam desain layout. 16 kolom dapat dikombinasikan, atau dilipat menjadi 8 kolom untuk ukuran tablet screen, dan menjadi 4 kolom untuk ukuran mobile screen.
Dengan ini Golden Grid System dengan mudah dapat menutupi setiap ukuran layar dari 240 hingga 2560 pixel.
Fluid Baseline Grid
Fluida Baseline Grid Sistem dibangun dengan standar tipografi dan menggabungkan prinsip-prinsip kunci dari fluid-column layout, grid baseline dan mobile-first responsive desain ke resolusi independen dan agnostik perangkat Framework.
Hal ini dikemas dengan CSS normalisasi, standar tipografi yang indah, perbaiki bug dan inkonsistensi browser umumnya.
Columnal
Columnal adalah sebuah 1140px Grid System yang terinspirasi dari cssgrid.net dan 960.gs. Framework ini meberi kemudahan dakam web desain untuk membuat grid fluit, perubahan dinamis berdasarkan ukuran pada browser dan mengubah websitemu ke mobile style layout jika lebar screen cukup sempit. Grid terbagi menjadi serangkaian 12 kolom horizontal dan vertikal pada baris. 12 kolom terbagi menjadi beberapa kolom yang sama, dua, tiga, empat atau enam kolom.
Semantic Grid System
Semantic Grid System adalah responsive grid sistem yang memungkinkan kamu mengatur kolom dan lebar selokan (pembatas antar kolom), pilih nomor kolom, dan pindakan antara pixel dan persentase tanpa mendapatkan hal yang buruk.
1140px CSS Grid
1140px CSS Grid telah dirancang untuk sempurna dengan layar 1280px, menjadi fluid layout untuk layar yang kecil, melalui beberapa poin yang digunakan seperti media query berikan layanan pada mobile version.
Sebenarnya Grid terdiri dari dua belas kolom, merata dibagi dengan dua, tiga, empat atau enam. Framework ini dapat bekerja dengan semua browser utama, dengan pengecualian dari IE6, yang tidak mendukung max-width (itu akan menjangkau full width browser).
The 1140px CSS Grid System Home
Skeleton
Skeleton adalah kumpulan dari CSS dan file file JS yang ringan dengan struktur 960 grind. Pada blog berbagiyuks ini, kita menggunakan skeleton dalam pembuatan desain layoutnya.
320 and Up
320 dan Up mencegah perangkat mobile dari load aset desktop, maksud agak tidak mendownload/load halaman web. Dengan menggunakan stylesheet screen kecil sebagai titik awal. Dimulai dengan stylesheet screen yang hanya berisi reset, warna dan gaya tipografi. Media Query kemudian membuka aset dan gaya tata letak progresif dan hanya mereka dibutuhkan.
inuit.css
inuit.css adalah responsice dan css framework yang diperbariu secara terus-menerus yang memberikanmu pragmatis dan kaya fitur sebagai titik awal untuk semua projekmu. Framework ini dipadati dengan potongan berguna dan memiliki plugin tambahan untuk memperpanjang kegunaannya.
Blucss
BluCSS adalah CSS Frameworl ringan yang dirancang dengan kemudahan penggunaan dan kesederhanaan dalam pikiran. Framework ini juga sangat responsive dengan empat tahap yang berbeda: Layar Desktop, laptop, tablet, dan mobile.
Ada 10 kolom dalam BluCSS, dan masing-masing memiliki lebar ditentukan dalam persentase. Karena itu, mereka mengubah ukuran secara otomatis untuk masuk ke dalam wadah induk mereka. Dengan cara ini, kamu tidak dibatasi untuk hanya menggunakan built-in “container” div. Kamu dapat menciptakan wadah yang lebih kecil, dan menggunakan BluCSS di dalamnya dengan tidak ada perubahan apapun.
Frameless
Gridless
Gridless adalah sebuah HTML5 dan CSS3 untuk membuat bukti dimasa depan tentang responsive web desain layout. Kamu bisa membuat responsive dengan muda, penggunaan browser dengan keindahan tipografi. Framework ini sederhana dan mudah serta tidak hadir dengan standar grid sistem atau semantik kelas.
Amazium
Nah bagaimana? mungkin ini bisa menjadi pertimbangn untuk menggunakan css framework. Daftar diatas cuma sebagian besar framework yang ada, bisa saja ada framework-framework yang lainnya lagi. Oh iya, bootstrap modal juga termasuk dalam css framework css. Sekarang ayo tetapkanm framework mana yang akan kamu gunakan. Sudah gitu stop penggunaan beberapa baru. Tentukan pilihanmu sekarang
