Melody, CSS Grid Framework Minimalis

Melody adalah css grid framework bergaya minimalis berukuran kecil (8.0 KB) yang bebas diunduh maupun ditautkan langsung ke laman web kita.

Ditulis oleh James W. Dinsdale aka molovo dengan lisensi: ☺ license, framework ini memiliki karakteristik:

  • Laman CSS tunggal dengan styling default minimalis.
  • Karakter white space demi kenyamanan membaca.
  • No float. Semua elemen menggunakan properti display: inline-block;
  • Penggunaan padding dan box-sizing: border-box; untuk pengaturan jarak antar elemen (tanpa margin), sehingga memudahkan pembuatan grid-within-a-grid atau tata letak tanpa margin. Jika kita menginginkan grid tanpa jarak, tinggal terapkan class=”remove-padding”.
  • class=”stick-to-grid” untuk menjaga lebar dan offset elemen grid pada ukuran display perangkat mobile.
  • class=”keep-shape” untuk mengatur padding tambahan pada elemen grid agar tetap pada ukuran 960 ketika laman ditampilkan oleh display berukuran 1280.
  • class=”offset-n untuk menambahkan margin kiri pada sebuah elemen dan membuat offset. Value n adalah jumlah kolom (1-12) untuk offset.

 

screenshot melody css

 

Untuk menggunakan framework ini, kita bisa memilih dua metode:

 

Contoh situs web yang menggunakan css grid framework ini:

screenshot molovo[dot]co
screenshot molovo[dot]co Screenshot Molovo.co

Tak ada komentar

Tuliskan pendapatmu

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *