12 CSS Frameworks kecil Untuk Digunakan Dalam Desain Web Anda

Anda mungkin tidak memerlukan sebagian besar fitur yang datang dengan kerangka kerja UI yang besar seperti Bootstrap, terutama ketika Anda sedang mengerjakan proyek-proyek kecil dan langsung yang ingin Anda bangun dan jalankan sesegera mungkin. Untungnya, ada kerangka kerja CSS yang lebih kecil dan sederhana di luar sana yang bisa Anda gunakan.

Menggunakan kerangka kerja CSS kecil biasanya diterjemahkan menjadi kurva belajar yang lebih lembut untuk pengembang, tidak bergantung pada JavaScript untuk fungsionalitas, dan waktu muat yang lebih cepat untuk pengguna Anda.

Saya telah membuat daftar kerangka CSS kecil / minimalis yang bagus untuk Anda jelajahi. Sebagian besar dari mereka di bawah 5 KB (saat diperkecil dan di-gzip) dan mengandung bahan-bahan penting untuk membangun desain web yang responsif.

min

saya

min, kerangka kerja CSS terkecil dalam daftar ini, memiliki sistem grid 12-kolom responsif, gaya tombol, gaya tabel, ikon yang kompatibel dengan Android, dan banyak lagi. min bahkan mendukung browser kuno seperti Internet Explorer 5.5.

Miligram

Miligram

Milligram untuk UI modern – sistem gridnya menggunakan FlexBox, ukuran dan panjangnya menggunakan remunit, dan itu Mobile First. Berada di ujung tombak membutuhkan biaya: Milligram hanya secara resmi mendukung versi terbaru Chrome, Firefox, IE, Safari, dan Opera.

Blaze CSS

Blaze CSS

Out of the box, Blaze CSS sudah ringan, tetapi Anda dapat mengurangi ukuran file lebih banyak lagi karena arsitektur modularnya yang memungkinkan Anda untuk hanya memasukkan bagian-bagian yang ingin Anda gunakan dalam proyek Anda. (Baca instruksi untuk membuat build CSS Blaze khusus untuk info lebih lanjut.)

Kube

Jadilah itu

Kube mengemas pukulan untuk kerangka kerja CSS yang beratnya kurang dari 6 KB. Ini memiliki sistem grid responsif, seperangkat kelas yang kuat untuk menata formulir web Anda, beberapa kelas tabel, kelas pemberitahuan untuk menampilkan pesan penting kepada pengguna Anda, dan banyak lagi.

Pure

Murni

Pure, proyek sumber terbuka yang dipimpin oleh Yahoo! pengembang, adalah rangkaian modul CSS yang akan membantu Anda dengan cepat membangun desain web yang responsif. Pure memiliki gaya dasar untuk semua elemen HTML (dikembangkan di atas Normalize.css), dan modul untuk tata letak kotak, formulir web, tombol, tabel, dan menu navigasi .

Furtive

Sembunyi

Menyebut dirinya “CSS kerangka mikro”, Furtive diarahkan untuk desain web modern. Seperti Milligram, Furtive adalah Mobile First, memiliki grid responsif berdasarkan FlexBox, dan menggunakan remunit untuk panjang dan ukuran. Ini memiliki dasar-dasar yang dibahas: tombol, bentuk, dan bahkan kelas warna standar.

Skeleton 

Kerangka

Meskipun belum diperbarui selama lebih dari setahun , Skeleton masih merupakan titik awal / boilerplate terbaik untuk membangun desain web modern dan responsif dengan cepat. Muncul dengan sistem grid intuitif dan gaya dasar untuk elemen HTML Anda.

FOX CSS

FOX CSS

FOX CSS adalah kerangka CSS modular yang ringan. Ini menggunakan pendekatan desain Mobile First, mendukung browser setua IE 9, dan memiliki reset CSS non-agresif (terinspirasi oleh KNACSS).

Basscs

Basscs

Basscss terdiri dari 22 modul CSS yang terdiri dari reset CSS, sistem kisi, kelas warna, kelas utilitas untuk membantu Anda membangun desain responsif Anda, dan banyak lagi. Basscss secara mengejutkan kaya fitur untuk sesuatu yang beratnya kurang dari 4 KB.

Siimple

Siimple

Siimple adalah kerangka kerja CSS minimalis untuk membangun desain web yang responsif dan bersih. Ini mirip dengan Skeleton: Ini memiliki sistem grid 12-kolom intuitif dan gaya dasar untuk tipografi, tabel, tombol, formulir, dan banyak lagi.

Teratai

Teratai

Lotus adalah salah satu kerangka kerja CSS terkecil di luar sana. Ada hal-hal penting yang dibahas: sistem grid responsif, tipografi, tombol, dan formulir web.

CSS picnic

CSS piknik

Picnic CSS adalah kerangka kerja UI ringan yang ditulis dalam Sass, sehingga memudahkan Anda untuk mengedit dan menyesuaikan variabel seperti warna dan panjang. Ini juga memiliki beberapa komponen UI yang mengesankan, murni-CSS seperti jendela modal dan slider konten.