Advertisement
Inspiration

15 CSS3 Framework Untuk Responsive Layout

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

resp_framework_01

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.

Last Framework GitHub

Foundation

resp_framework_02

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.

Foundation Github Docs

MQFramework

resp_framework_03

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.

MQFramework

Golden Grid System

resp_framework_04

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.

Golden Grid System Github

Fluid Baseline Grid

resp_framework_05

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.

Fluid Baseline Grid Github

Columnal

 resp_framework_06

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.

Columnal

Semantic Grid System

 resp_framework_07

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.

The Semantic Grid System Home

1140px CSS Grid

resp_framework_08

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

resp_framework_09

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. 

Skeleton Github

320 and Up

resp_framework_10

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.

320 and up  Github

inuit.css

resp_framework_12

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.

inuit.css Github

Blucss

resp_framework_13

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.

Blucss

Frameless

resp_framework_14

Frameless Home Github

Gridless

resp_framework_15

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.

Gridless  Github

Amazium

resp_framework_16

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

Editorial Team

Editorial Team adalah mereka yang menulis artikel untuk blog PinDexain.

Related Stories

Leave a Reply

Your email address will not be published. Required fields are marked *