20 Kerangka Kerja CSS Responsif & Ringan yang Layak Dipertimbangkan

Menggunakan kerangka kerja CSS responsif yang berkualitas dapat memberi Anda awal yang bagus untuk proyek desain web apa pun. Beberapa, seperti Bootstrap, sedikit membengkak dengan kode berlebih, sementara yang lain memerlukan kurva belajar yang cukup curam.

Idealnya, Anda ingin bekerja dengan paket yang memberi Anda cukup fitur untuk membantu Anda bekerja tanpa membebani Anda dengan banyak opsi yang tidak Anda perlukan.

Anda mungkin juga menyukai Kerangka Web Desain Material ini atau Kerangka Pengembangan WordPress Sumber Terbuka ini.

Dengan mengingat tujuan itu, berikut adalah 20 kerangka kerja CSS yang menyediakan dasar-dasar – tanpa banyak hal.

FICTOAN

FICTOAN bertujuan untuk menjadi pilihan tepat bagi mereka yang tidak menyukai kerangka kerja yang lebih besar dan lebih kompleks. Ini menampilkan skema warna yang hidup, ikon khusus dan banyak elemen desain bergaya ringan.

salju longsor

avalanche adalah kerangka kerja yang dapat Anda sesuaikan untuk memenuhi kebutuhan Anda. Ada paket yang tersedia untuk mengaktifkan fitur spesifik seperti sistem grid fluid, kelas offset, container, jarak vertikal, dan banyak lagi.

lebih cantik

Dengan kompresi kurang dari 5k, Beauter tentu saja menerima tantangan untuk menjadi sangat ringan. Itu tidak berarti tidak ada fitur, namun. Anda mendapatkan dasar-dasar seperti kisi responsif, tetapi juga beberapa tambahan seperti pengguliran paralaks, modals, tooltips, dan beberapa wadah yang bagus.

Kerangka Vanila

Vanilla Framework didesain sederhana untuk memberi Anda titik awal yang bagus untuk proyek Anda. Banyak wadah dan elemen desain terlihat bagus dengan sendirinya tetapi juga mudah disesuaikan agar sesuai dengan tampilan yang Anda inginkan.

Cirrus.CSS

Cirrus.CSS adalah kerangka kerja SCSS komponen dan utilitas yang dirancang untuk prototyping cepat.

Bulan sabit

Halfmoon adalah kerangka kerja front-end dengan mode gelap bawaan dan kemampuan penyesuaian penuh menggunakan variabel CSS.

baru.css

new.css adalah kerangka kerja CSS yang ringan (~4.5kb) dan tanpa kelas untuk membangun situs web khusus HTML.

Bulma

Berdasarkan CSS Flexbox, Bulma adalah kerangka kerja yang sepenuhnya responsif dan modular yang memungkinkan Anda menggunakan hanya hal-hal yang Anda butuhkan. Anda mendapatkan semua keuntungan dari Flexbox, termasuk kolom dan ubin yang secara otomatis mengubah ukurannya sendiri berdasarkan jumlah dan area pandangnya.

Miligram

Berat miligram hampir sama dengan namanya – hanya 2k saat dikompresi. Ini mencakup semua dasar yang Anda harapkan dan dirancang untuk meminimalkan jumlah gaya yang harus Anda atur ulang.

InvisCss

InvisCss dibangun sebagai alternatif untuk kerangka kerja yang lebih rumit. Paket ini menampilkan nama pemilih CSS sederhana dan UI minimal namun menarik.

Lihat

Hasil dari proyek pribadi, Look dirilis ke publik sebagai kerangka kerja CSS minimalis sebagai titik awal dasar untuk pengembangan situs. Elemen desainnya sederhana dan dapat disesuaikan dengan keinginan Anda.

tidak terbatasGrid

Berdasarkan Sass, unlimitedGrid adalah kerangka kerja grid pertama yang fleksibel dan seluler. Ini modular, jadi Anda hanya perlu menggunakan fitur yang Anda butuhkan. Dukungan Flexbox disertakan dan ada beberapa variasi grid untuk dipilih.

Vital

Ditagih sebagai "pendekatan terbalik" untuk kerangka kerja yang lebih besar, Vital ringan dan dapat diskalakan. Dibangun menggunakan Sass, Anda akan menemukan tata letak kisi yang efisien, tombol khusus, dan pemuat. Beberapa gaya tata letak yang berguna juga disertakan untuk hal-hal seperti kolase foto, wadah kartu, dan formulir.

PowerToCSS

Berdasarkan prinsip SMACSS dan DRY, PowerToCSS adalah kerangka kerja CSS ringan yang menawarkan fondasi yang kokoh untuk membantu Anda memulai dengan cepat pada proyek web Anda berikutnya.

Kouto Swiss

Kouto Swiss adalah kerangka kerja CSS lengkap untuk Stylus yang memberi Anda banyak mixin, fungsi, dan utilitas untuk membuat kode lebih cepat, dan juga menyertakan kekuatan situs web Caniuse untuk membuat lembar gaya Anda sesuai dengan kebutuhan kompatibilitas Anda.

CSS sembunyi-sembunyi

Furtive adalah kerangka kerja mobile-first dengan footprint yang sangat kecil. Kerangka kerja ini tidak mengkhawatirkan versi peramban yang lebih lama, artinya ia dapat menggunakan 'teknologi mutakhir' seperti flexbox, SVG, dan awalan vendor terbatas. Ini juga tersedia di SCSS, CSS, dan dilengkapi dengan file Gulp untuk menyesuaikan build.

Plat web

Kerangka kerja Webplate mencakup semuanya, mulai dari mesin tata letak responsif yang kuat, hingga elemen tombol global, formulir yang dapat disesuaikan, dan dukungan untuk font ikon IcoMoon. Itu juga dilengkapi dengan jQuery, Modernizr dan Typeplate secara default.

Ketidakstabilan

Fluiditas mungkin merupakan kerangka kerja CSS yang sepenuhnya responsif paling ringan yang pernah ada! HTML hampir 100% responsif langsung dari kotak, dan file CSS 115 byte memperbaiki bagian 'hampir'. Tidak bisa lebih ringan dari itu.

Skema

Dibangun di atas KURANG, Skema adalah kerangka kerja UI frontend responsif yang hadir dengan koleksi lengkap komponen CSS (tombol, tarik-turun, formulir…) untuk membantu Anda memulai dengan cepat.

Zamrud

Emerald adalah sistem grid responsif pragmatis di KURANG. Ini berbasis elemen blok (sebagai kebalikan dari float) dan ditulis dengan metodologi OOCSS menggunakan sintaks BEM.

Perhiasan yg tak berharga

Bijou adalah framework grid 10 kolom responsif yang ringan (<2 kb). Muncul dikemas dengan tombol, peringatan, tabel, navbar, dan tentu saja grid.

Percikan

Spark adalah kerangka kerja ringan yang didasarkan pada pendekatan mobile-first untuk desain responsif. Kerangka ini telah dibuat sebelumnya dengan beberapa tema warna yang dapat dipertukarkan, baik dalam gaya mengkilap maupun datar. Saat ini, warna dasarnya adalah perak (default), biru, hijau, oranye, merah, ungu, limau, dan buah naga.

Typebase

typebase.css adalah boilerplate tipografi CSS minimal dan dapat disesuaikan. Hal terpenting yang diberikan typebase.css kepada Anda adalah ritme vertikal yang ditegakkan di sebagian besar layar perangkat, sehingga memastikan bahwa teks di seluruh kolom dan salinan panjang tidak menjadi tidak rata. Versi Less dan Sass tersedia.

Hoisin

Dibangun dengan Sass, Hoisin adalah kerangka kerja mini front-end responsif sederhana yang telah dibuat sebagai alternatif kerangka kerja front-end yang lebih kompleks dan membengkak. Ini sengaja tidak menyertakan komponen apa pun, alih-alih berfokus pada memberi Anda basis terorganisir dari mana Anda dapat membuat perpustakaan Anda sendiri.

Kisi-kisi Lucu

Cute Grids adalah sistem grid responsif 12 kolom pertama untuk seluler yang lahir dari frustrasi kerangka kerja overbuilt besar saat ini yang dapat berlebihan untuk sebagian besar proyek dan membatasi kreativitas perancang.

Ringan tapi Perkasa

Inti dari menggunakan kerangka kerja apa pun adalah untuk membuat pekerjaan Anda lebih mudah. Jadi masuk dan harus menata ulang banyak CSS atau memuat banyak skrip yang bahkan tidak akan Anda gunakan tampaknya bertentangan dengan semua logika.

Menggunakan salah satu kerangka kerja yang lebih mendasar di atas dapat membantu Anda memulai dengan cepat tanpa harus pusing. Dan, karena beberapa dari mereka menggunakan pendekatan modular, Anda dapat memilih hanya item yang Anda butuhkan untuk proyek tertentu. Itu lebih seperti itu!