15 CSS Framework untuk membuat Responsive Web Design

Responsive design adalah sesuatu yang keren, dan tujuannya adalah dengan satu website kita dapat melayani berbagai perangkat. Selain itu juga merupakan tantangan bagi web desain. Dalam artikel ini kita akan melihat beberapa framework yang akan membantu anda menangani tantangan tersebut.

Seperti sebagian besar framework CSS, semua framework dibawah ini akan membantu anda lebih cepat dalam mengembangkan website dengan mengeliminasi penulisan dasar CSS style, dan telah tersedia layout reponsive yang dapat membantu anda untuk membuat mobile site dengan lebih cepat dan mudah.

 

1. Foundation

Foundation

Foundation merupakan CSS Framework yang mengutamakan kualitas mobile view, tetapi tetap tangguh untuk desktop view-nya. Framework ini lebih cenderung memandu Anda untuk menghasilkan desain yang menarik dengan kode HTML yang mudah untuk dimengerti pula.

Javascript yang include di dalam Foundation dibuat secara maksimal sehingga javascript pada Foundation dapat berfungsi dengan baik dan tentunya lebih cepat.

 

2. Less Framework

lessframework

Less Framework ini memanfaatkan salah satu tool yang bernama Less CSS. Dia merupakan sebuah tool yang dapat anda manfaatkan dalam penulisan CSS yang lebih simpel dan efisien selayaknya anda menulis kode PHP atau Javascript. Dan Less Framework hadir dengan mengemas Grid System dan Responsiveness untuk membuat kode anda jauh lebih simpel dan lebih efisien lagi.

 

3. Golden Grid System

Golden Grid System

Golden Grid System adalah sistem lipatan grid untuk responsif desain. Dibagi pada layar menjadi 18 kolom, Kolom paling kiri dan paling kanan digunakan sebagai margin luar dari grid, yang menyisakan 16 kolom untuk dipakai dalam desain. 16 kolom dapat dikombinasikan, atau dilipat, menjadi 8 kolom untuk ukuran layar tablet, dan menjadi 4 kolom untuk ukuran mobile.

4. Amazium

Image result for amazium images

mazium adalah salah satu Css Framework free yang membantu anda untuk memualai mendesain strukture website dengan style modern yaitu Responsive web desain yaitu desain yang membuat anda tidak perlu lagi mendesain website dengan terpisah untuk bermacam macam ukuran Pixel layar monitor, Amazium muncul dari kenyataan sekarang orang orang tidak perlu lagi membuat 960 grid system dengan dua belas kolom nya.

Amazium sekarang ini masih baru dan saya sendiri tertarik dengan Css ini karena kepraktisan dan kesimpelan nya, dengan core yang tidak besar jadi cocok untuk pengembangan desain sesuai selera tanpa di batasi oleh aturan aturan Css Framweork tersebut, Sekarang saya akan menjelaskan satu persatu cara kerja Amazium dan fitur fitur apa yang di tawarkan oleh CSS Framework ini.

 

5. MQ Framework

MQ Framework

Responsive MQFramework, berbasis pada 12 kolom grid, yang dirancang untuk berbagai kebutuhan, dapat dipakai untuk proyek baru atau yang sudah ada dengan perubahan kode yang minim.

Baca Juga:  Framerjs : Membuat Animasi Prototype untuk Desktop dan Mobile

6. Semantic Grid System

Semantic Grid System

Semantic Grid System adalah sistem responsif grid yang dapat diatur lebar kolom dan jarak diantara kolomnya, pilih jumlah kolom dan pilih jenis ukuran pixel atau persentase tanpa perlu ada penulisan class .grid_x di kode anda.

7. Skeleton

Skeleton

Skeleton adalah koleksi kecil dari CSS dan JS yang ringan dan berbasis 960grid yang dapat dengan mulus diperbesar atau diperkecil sesuai ukuran browser, tablet atau mobile phone (baik bentuk landskap atau potret).

8. 1140px CSS Grid

1140px CSS Grid

1140px CSS Grid didesain untuk tepat sempurna pada layar ukuran 1280px, dan akan mengecil dengan sempurna pada ukuran layar yang lebih kecil, menggunakan media queries untuk jalan di versi mobile.

9. 320 and up

320 and up

320 and up berisi Media Query yang menanjak hingga 5 jenjang ukuran viewport, vertikal grid, preset untuk tipografi dan menggunakan komponen dari HTML5 Boilerplate.

10. The Goldilocks Approach

 goldilocks approach

Goldilocks Approach menggunakan kombinasi dari Ems, Max-width, Media Queries dan Pattern Translations untuk jalan di tiga media sehingga desain anda memiliki resolusi yang bebas.

11. inuit.css

inuit.css

inuit.css adalah framework HTML5 yang menggunakan sistem grid dan dapat mengecil pada layar yang lebih kecil secara otomatis. Menggunakan sistem yang minimalis, anda dapat langsung menggunakannya tanpa perlu mengatur style-style yang tidak diperlukan, serta dapat dikembangkan dan terdapat sejumlah plugin yang tersedia, seperti penggunaan breadcrumb secara berurutan.

12. BluCSS

blucss

BluCSS adalah CSS framework yang ringan dan didesain untuk kemudahan dan kesederhanaan dalam penggunannya. Juga memiliki sistem responsif dengan 4 tingkatan : layar desktop, laptop, tablet dan mobile.

13. Gridless

gridless

Gridless adalah HTML5 dan CSS3 boilerplate untuk membuat responsif website masa depan. Anda dapat dengan mudah membuat resposif, cross-browser website dengan tipografi yang indah. Sederhana dan langsung pada tujuan, serta tidak menggunakan penulisan grid sistem atau non-semantic class.

14. Columnal

columnal

Columnal memiliki sistem 1140px grid, terinspirasi dari cssgrid.net dan 960.gs. Grid terbagi secara horisontal menjadi 12 kolom seri, dan secara vertikal dalam bentuk baris. 12 kolom dibagi secara presisi menjadi kolom yang sama lebar untuk 2, 3, 4, atau 6 kolom.

15. Fluid Baseline Grid

fluid baseline grid

Fluid Baseline Grid adalah HTML5 dan CSS3 development kit yang menyediakan dasar yang solid untuk mendesain website secara cepat dan mudah. Fluid Baseline Grid dibangun dengan standar tipografi dan mengkombinasikan dasar dari layout fluid-width, baseline grid dan mobile denga sistem responsif pertama yang bebas dan perangkat agnostic framework.

Dan masih banyak jenis framework lainnya, semoga bermanfaat 🙂

Komentar

comments

grain storage instagram türk takipçi satın al