Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. 960 Grid System
Code

Lihat lebih rinci pada Framework 960 CSS

by
Length:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Akbar Zahid (you can also view the original English article)

CSS framework membengkak. Framework CSS adalah untuk orang-orang yang tidak tahu bagaimana mengkode. CSS terlalu mudah untuk diimplementasikan menjadi framework.

Jika Anda pernah membaca tutorial tentang sebuah CSS framework, saya dapat menjamin bahwa banyak komentar yang meniru pernyataan sebelumnya. Saya duga adalah bahwa sebagian besar komentar ini berasal dari sedikit kebodohan. Sekali Anda mengambil kesempatan untuk menghabiskan waktu dengan 960, Anda akan kagum pada berapa banyak waktu yang dapat berpotensi disimpan ketika mengembangkan aplikasi web Anda. Setidaknya, mengambil sepuluh menit untuk meninjau framework. Anda selalu dapat menekan tombol delete... walaupun aku ragu Anda akan!

960 Framework

Kelebihan

  • Dengan cepat mempercepat waktu pengembangan.
  • Struktur grid yang bersih.
  • Tidak banyak browser inkonsistensi. Yang Anda temukan dapat diperbaiki dengan mudah.
  • Itu tidak "kembung" sebagai banyak orang menyarankan. Kita berbicara 3-4kb di sini, kawan-kawan! Anda akan banyak menggunakan stylings ini pula.
  • Membangun kompleks layout dengan cepat.

Kekurangan

  • Itu dinamai "960" karena suatu alasan. Jika Anda berharap untuk menggunakan lebar berbeda untuk situs web Anda, Anda mungkin akan lebih baik memilih framework yang berbeda.
  • Seperti dengan "framework" apapun, Anda kehilangan sedikit fleksibilitas.
  • Anda tidak membuat itu. Ada sesuatu yang bisa dikatakan untuk kode menjadi 100% kita sendiri.

Penggunaan

Mari kita bayangkan bahwa kami ingin bekerja dengan struktur "12 kolom" untuk membuat tata letak yang sangat sederhana yang dilihat di bawah ini. Pertama, kita harus menciptakan div pembungkus yang memiliki kelas "container_12". Perhatikan 12.

layout

Menetapkan id di sini tidak diperlukan dengan cara apapun. Namun, saya menemukan bahwa hal itu membantu saya untuk mengingat div apa yang sebenarnya. Salah satu keluhan terhadap 960 adalah bahwa kelas tidak untuk menentukan elemen apa itu. Secara sederhana masukan id untuk memperbaiki masalah itu.

Grid

Sekarang kami ingin membuat header sederhana dan struktur dua kolom. Ketika pertama kali memulai, hal ini membantu untuk memeriksa demo untuk memilih seberapa lebar grid yang harus Anda gunakan.

960 Framework

I 'm gonna memilih lebar header "940px" (+ 20px margin = 960), lebar sidebar "220px", dan lebar konten utama "700px".

Anda harus menetapkan kelas ke setiap div. Konvensi penamaan memerlukan bahwa nama kelas dimulai dengan "grid_" dan berakhir dengan jumlah kolom yang diperlukan. Dalam kasus kami, kami akan menggunakan "grid_12',"grid_3"dan"grid_9", masing-masing.

Styling tambahan yang telah saya tambahkan adalah warna latar belakang dan lebar minimum untuk setiap div untuk mensimulasikan situs web yang sebenarnya penuh dengan teks. Aku tidak akan pergi lebih dari itu di sini; terutama karena mereka harus dihapus. Mereka hanya digunakan di sini untuk menunjukkan struktur.

Tanpa khawatir tentang margin, flat atau IE hacks, kita sudah mampu menciptakan tata letak yang sangat cepat. Kekuatan sejati dari 960 ditunjukkan ketika membangun kompleks newspaper-like layout. Untuk lebih jelasnya, pastikan untuk menonton screencast di atas.

960 Framework

Anda juga mungkin suka

  • Prototyping With The Grid 960 CSS Framework

    Prototyping dengan Framework CSS Grid 960

    Grid 960 adalah sebuah CSS Framework yang memungkinkan pengembang untuk dengan cepat prototipe desain. Mereka adalah alat yang sangat baik untuk membuat mockup. Mengapa? Karena mereka melakukan semua pekerjaan berat memungkinkan Anda untuk mendapatkan hasil yang lebih cepat.

    Kunjungi artikel

  • Build a Newspaper Theme With WP_Query and the 960 CSS Framework

    Membangun sebuah tema Koran dengan WP_Query dan Framework 960 CSS

    WP_Query adalah alat yang ampuh untuk mengontrol apa yang keluar dari loop Anda. Hari ini saya akan mengajarkan Anda semua bagaimana menggunakannya untuk membuat tema 3 kolom koran yang memiliki semua blog utama Anda posting di kolom utama, dan pergi ke sisi satu set posting dengan kategori tertentu. Kita akan menggunakan framework CSS 960 untuk layout dasar dan me-reset tema kami, itu akan memotong banyak pekerjaan dari apa yang dibutuhkan!

    Kunjungi artikel

  • Which CSS Grid Framework Should You Use for Web Design

    Framework Grid CSS manakah yang harus Anda gunakan untuk Web Design?

    Pernah bertanya-tanya bagaimana semua "majalah" tema cerdik untuk WordPress dan platform lainnya diciptakan? Banyak, kalau bukan semua, dirancang menggunakan Grid CSS Framework - setidaknya pada intinya jika tidak sebenarnya. Itu saja, Anda dapat menggunakan framework CSS atau membangun sendiri dari awal. Meskipun dimungkinkan untuk merancang halaman web kompleks layout tanpa framework, ini adalah arguably tindakan di masokisme. Dalam artikel ini Anda akan mendapatkan gambaran dari kumpulan framework saat ini dan yang harus Anda pilih untuk digunakan.

    Kunjungi artikel

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.