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

Kerangka Grid CSS yang Harus Anda Gunakan untuk Web Design?

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by nila sardi (you can also view the original English article)

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

Apakah Kerangka Grid CSS?

Grid layout telah digunakan di cetak penerbitan lama sebelum Web. Inilah landasan tak terlihat yang digunakan untuk mencapai visual kohesi majalah dan koran page desain dan tata letak. Mereka pada dasarnya jumlah kisi-kisi yang membagi ruang horisontal dan vertikal di konsisten unit mana teks, judul, Gambar, dan iklan dapat ditempatkan.

Konsep yang sama telah disesuaikan untuk desain halaman web untuk banyak alasan yang sama, menggunakan kode CSS (Cascading stylesheet) ke posisi elemen HTML. Pada kenyataannya, banyak situs editorial yang dijalankan oleh penerbit media cetak besar menerapkan grid untuk mencapai tampilan di situs web mereka yang mirip dengan konten cetak mereka.
Perhatikan bahwa sumbu vertikal tidak juga didukung dalam sistem CSS Grid, karena halaman web yang tinggi tidak banyak masalah untuk halaman dicetak. (Namun, itu adalah masalah kecil dalam desain halaman web, kecuali Anda mengharapkan fitur yang sama seperti dengan sistem Desktop Publishing - alias DTP -, yang sulit untuk mendukung tanpa PostScript-seperti bahasa untuk browser untuk menerapkan dan mendukung.)


Sistem Grid 960 CSS - salah satu lebih bagus desain untuk situs web kerangka :-)

Mengapa Menggunakan CSS Grid Kerangka?

Tidak semua desainer mendukung penggunaan menggunakan grid kerangka kerja di atas meja, atau bahkan sama sekali. Tetapi mari kita hadapi itu; ada layout Anda hanya tidak bisa lakukan dengan tabel HTML hanya tanpa banyak usaha yang menyakitkan - dan banyak bersarang yang sulit untuk memecahkan, pernah harus membuat perubahan.

Tentu saja, jika Anda menggunakan grid, Anda harus menambahkan beberapa diperlukan HTML markup tag untuk konten Anda, sehingga meningkatkan ukuran file halaman. Juga, ini berarti bahwa markup dan gaya tidak benar-benar dipisahkan - prinsip yang banyak web designer ingin mematuhi. (Beberapa orang merasa, benar atau salah, bahwa penentang CSS kerangka desainer yang khawatir bahwa kebutuhan untuk layanan mereka akan turun. Meskipun, dengan logika ini, coders berada dalam kesulitan, juga, terutama dengan peningkatan lintas-browser kode perpustakaan seperti jQuery.)

Faktanya adalah, menggunakan grid CSS kerangka kerja berarti bahwa beban browser Anda CSS file hanya sekali dan membuat mereka cache "di sisi klien". Plus, tambahan HTML markup yang diperlukan untuk menerapkan kerangka CSS "tak terlihat" jarang begitu signifikan bahwa isu-isu bandwidth untuk pembaca harus menjadi perhatian. (Menariknya, sebagian besar penentang tampaknya berbicara tentang Yahoo UI grid, tidak begitu banyak Blueprint.)

Di sebagian besar contoh saya telah bekerja dengan, dan dalam salah satu tema majalah menggunakan grids yang saya telah diperiksa, kita berbicara meningkatkan ukuran file relatif kecil - terutama dibandingkan dengan kode platform blog yang digunakan. Gambar besar satu kemungkinan akan mengambil lebih banyak ruang. Dengan koneksi Internet yang cepat, itu benar-benar bukan masalah besar.

Desain & Estetika Manfaat

Terlepas dari itu, Apakah Anda menggunakan CSS grids untuk prototyping atau produksi sistem, ada beberapa manfaat estetika dan desain:

  1. Desain visual kohesi antara elemen halaman.
  2. Keseragaman dan konsistensi dalam penempatan elemen HTML, sehingga mengurangi kesalahan coding CSS.
  3. Lebih mudah untuk menerapkan "aturan pertiga" dan "golden section" untuk desain, yang hasil dalam tata letak visual menarik mata paling manusia.
  4. Kebanyakan menghilangkan kebutuhan untuk menggunakan nested tabel HTML.
  5. Bersarang sub grid, untuk desain yang sangat kompleks yang relatif sederhana untuk menghasilkan.
  6. Lebih mudah untuk menerapkan gambar dan teks callouts untuk menghasilkan asimetris layout untuk visual tekstur.
  7. Lintas-browser dukungan, jadi kurang berteriak dan rambut menarik ketika Anda mendapatkan sekitar untuk pengujian untuk bahwa kutukan dari desainer, yaitu. (Bill Gates harus merasa begitu tidak dicintai sebagai seorang anak untuk menghasilkan begitu banyak perangkat lunak yang melakukan apa yang diinginkannya, bertentangan dengan standar yang MSFT seharusnya mendukung.)
  8. Mengurangi upaya untuk memproduksi jas hujan layout halaman web, dibandingkan dengan coding CSS diperlukan dari awal.
  9. Mengurangi upaya masa depan jika Anda perlu untuk reposisi elemen atau mengubah render karakteristik (tipografi, margin, dll) untuk elemen-elemen yang terkait secara massal.
  10. Dapat digunakan dengan halaman statis dan CMSes / blog platform.
  11. Memungkinkan penggunaan populer menciptakan "majalah" dan premium tema untuk blog platform. (WordPress tampaknya menjadi platform kerangka CSS yang paling sering digunakan dengan, meskipun platform lainnya yang memungkinkan referensi file sumber JavaScript harus bekerja dengan baik.)

YAML - "Tata letak Multicolumn lagi"

CSS kerangka kerja dan alat

Berikut adalah daftar pendek dari beberapa kerangka kerja yang lebih populer:

  1. Cetak biru CSS Grid kerangka.
    Kuat meskipun hanya bersikap di V0.7 (seperti tulisan ini), dengan banyak dukungan dari desainer, dan berbagai alat untuk menghasilkan kode CSS (melampaui standar 24-kolom, 950 px default kerangka). Mendukung penggunaan cetak biru "plugin".
  2. Yahoo! YUI Grids CSS, Grids Builder.
    Kerangka ini, yang mendahului cetak biru, datang dengan enam preset template dan empat pra-atur lebar, dan layout mengakomodasi IAB iklan unit pedoman. YUI Grids CSS terintegrasi dengan seluruh Perpustakaan Yahoo! UI (User Interface).
  3. YAML, YAML Builder.
    YAML (belum lagi Multicolumn tata letak) memiliki sedikit adil kedewasaan, dibangun di atas standar web, dan seharusnya mudah digunakan. Meskipun tampaknya tidak memiliki semua yang banyak digunakan dalam komunitas WordPress. Pada kenyataannya, banyak ratusan WP themes saya telah melihat untuk tiga tahun terakhir, aku tidak mengingat melihatnya digunakan sekali. Itu mungkin karena Anda memerlukan lisensi untuk menggunakannya dengan beberapa CMSes (Content Management System).
  4. Grid Desain.
    Ini adalah alat web untuk menghasilkan kustom grids CSS. Menggunakan kelas CSS sendiri, sehingga bisa dikatakan sebagai kerangka, meskipun tidak serta dukungan dalam komunitas desain sebagai beberapa yang lain.
  5. Sistem Grid 960 CSS. Sistem ini adalah berdasarkan pada lebar halaman 960 piksel, yang merupakan angka yang menjadi dibagi oleh banyak nomor lain, sehingga "sangat fleksibel dasar nomor untuk bekerja dengan." Namun, 960 Grid hanya bekerja dengan kolom 12 atau 16.
  6. CSS Boilerplate. Diproduksi sebagai kerangka dipreteli oleh salah satu penulis cetak biru asli.
  7. Sparkl. Dokumentasi mengatakan Anda dapat membuat 1, 2, atau 3-kolom halaman, tapi sampel menyarankan Anda memiliki lebih banyak fleksibilitas.

Ada lain Grid CSS kerangka yang dapat Anda temukan tercantum di Google Code, tetapi tiga atau empat lebih bahwa saya memandang, paling lengkap dokumentasi atau bahkan file proyek, jadi aku sudah meninggalkan mereka. Jika Anda tahu dari sebuah kerangka kerja yang tidak terdaftar, beritahukan kami tahu di komentar!

Perbandingan

Izinkan saya menunjukkan bahwa ini bukanlah perbandingan komprehensif dari kerangka CSS. Bahkan, aku sudah tidak digunakan apa pun secara ekstensif selain cetak biru, meskipun saya pernah membacanya sekilas docs untuk semua kerangka kerja yang tercantum di atas dan bermain sedikit dengan YAML dan desain Grid. Cetak biru, YUI Grids dan YAML yang boleh dibilang "tiga besar" dalam CSS kerangka ruang, dan 960 tampaknya menjadi pilihan keempat yang padat.

Dalam memilih suatu kerangka kerja, aku sudah mempertimbangkan bahwa aku bukan seorang desainer yang terlatih - melampaui apa yang telah saya pelajari saya sendiri selama bertahun-tahun. Saya mencoba-coba dalam desain bila diperlukan, meskipun dalam bentuk yang sangat minimalis. Pada kenyataannya, karena aku menghabiskan beberapa tahun penerbitan majalah cetak saya sendiri atau bekerja pada orang lain, aku adil sedikit tata letak halaman (benar-benar buruk) menggunakan prinsip-prinsip desain grid yang bekerja dengan Adobe PageMaker. Jadi saya menemukan sangat alami untuk bekerja dengan CSS Grids untuk desain web. Tampaknya bahwa mengingat jumlah WordPress Tema di luar sana - Lihat daftar di akhir artikel ini - yang didasarkan pada kerangka grid (kebanyakan cetak biru), desainer merasa cukup nyaman dengan grid, terlalu.

Namun demikian, dengan waktu selalu terbatas, aku butuh sesuatu yang mudah dipelajari dan digunakan, namun kuat. Saya telah menemukan bahwa Blueprint CSS Grid sesuai kebutuhan saya. Hal tersebut terintegrasi dengan baik dengan berbagai perpustakaan JavaScript - termasuk jQuery, yang dapat mengakibatkan beberapa antarmuka web sialan seksi. Menjadikan baik (meskipun tidak 100% sempurna) pada kebanyakan browser - meskipun Anda perlu menguji duri yang besar di web desainer sisi, peramban IE.

Berdasarkan penelitian saya lepas dari CSS Grids tahun terakhir ini, cetak biru tampaknya menjadi kerangka yang paling kuat, paling tidak ketat, paling didukung - dalam hal seberapa luas penggunaannya adalah - yang terkecil dalam ukuran, dan kerangka kerja dengan alat yang paling. Pada kenyataannya, keindahan cetak biru adalah bahwa Anda dapat dengan cepat menghasilkan kode CSS Framework kustom menggunakan alat bantu seperti Kematzy's Blueprint Grid CSS Generator. Meskipun Anda dapat melakukan ini dengan Grid Desain, sebuah perbandingan cepat akan menyarankan hal ini tidak kuat sebagai cetak biru.

Pada flipside, pemindaian dan browsing dokumentasi untuk Yahoo! UI Grids CSS kerangka membawa saya untuk percaya bahwa jika Anda hanya ingin melakukan beberapa tata letak halaman web sederhana dan ingin beberapa preset untuk bermain dengan, Anda mungkin ingin melihat ke dalam pilihan ini. Namun, saya merasa itu sedikit terlalu ketat untuk seleraku. (Anda mungkin ingin membaca Foo Hack Blueprint CSS Framework vs YUI Grids.)

Akhirnya, ketika datang untuk belajar sesuatu yang baru online - seperti pemrograman bahasa dan kode Perpustakaan / menerapkan framework - saya selalu "bahu raksasa aturan". Saya pertama daftar pilihan yang tampaknya cocok untuk apa yang saya butuhkan, maka pilih berdasarkan berapa banyak hal telah ditulis tentang. Mungkin tampak tidak adil untuk pilihan yang lebih baru, tetapi tidak proses yang jauh lebih sewenang-wenang dari berapa banyak orang memilih aplikasi web menggunakan. Ada terlalu banyak luar sana untuk melacak, dan memiliki masyarakat mendukung yang ada membuat perbedaan besar.


Cetak biru - Pilihan saya

Mengapa saya dijemput Blueprint CSS

Cetak biru CSS Grid kerangka adalah apa aku akan menggunakan semua tutorial saya di NETTUTS (bila relevan). Daripada menyalin daftar fitur dari dokumentasi di Google Code, biarkan aku fokus pada Mengapa saya secara pribadi memilih itu. Beberapa poin ini tumpang tindih dengan apa yang saya katakan di atas:

  1. Ukuran file yang relatif kecil. Telah dikompresi versi untuk penggunaan produksi, untuk mengurangi ukuran lebih lanjut.
  2. Cetak + layar stylesheet.
  3. Sederhana untuk mengintegrasikan dan menggunakan. (Meskipun IE browser bermasalah, tergantung pada versi cetak biru sedang digunakan.)
  4. Mudah diingat CSS kelas dan id yang tidak bertentangan dengan apapun yang Anda telah menggunakan.
  5. Banyak alat-alat pendukung, terutama untuk menghasilkan kustom grid.
  6. Banyak artikel / tutorial tentang cetak biru, dengan banyak getaran positif.
  7. Banyak penggunaan Blueprint oleh WordPress tema desainer.

Seperti disebutkan di atas, saya mengalami masalah IE - tapi kemudian tidak semua orang? Beberapa tema WP menggunakan cetak biru telah memecahkan masalah browser IE, jadi aku 'm ekstrapolasi di keyakinan saya bahwa mereka sebagian besar dapat diselesaikan.
Cetak biru, seperti tulisan ini, tidak mendukung tata letak cair - sesuatu yang saya tidak penggemar pula. Namun, dukungan tersebut rupanya datang, dalam kasus Anda bersandar itu.

Proses desain Grid berbasis sampel

Yah ini adalah masalah pilihan, bukan? Beberapa CSS Grids dilengkapi dengan grid.png atau bahkan sebuah file .psd yang dapat Anda gunakan dalam mode transparan Photoshop, Fireworks, GIMP, dll, sementara Anda meletakkan elemen desain Anda. Saya sedikit lebih banyak sekolah tua dan selalu desain layout saya dengan memulai di atas kertas:

  1. Blok off melompat-lompat persegi panjang mewakili seluruh halaman web. (Melakukan ini untuk setiap halaman yang Anda merancang.)
  2. Partisi persegi panjang ke persegi kecil yang mewakili bidang utama: header, footer, sidebar, wilayah konten, dll.
  3. Lebih lanjut partisi utama daerah dan pensil di "atom" desain komponen (situs, logo, tombol rss, posting terbaru, Komentar terbaru, kotak pencarian, contoh posting, pos thumbnail, dll.)
  4. Menerjemahkan sketsa akhir itu ke dalam kerangka HTML, menggunakan nyata teks atau lorem ipsum teks. HTML markup akan mencakup diperlukan CSS Grid kelas dan id nilai untuk mendukung tata letak yang saya butuhkan.
  5. Membuat spanduk / tombol dalam perangkat lunak grafis.
  6. Uji HTML mockup dalam sebanyak mungkin browser dan versi sebanyak mungkin. (Anda mungkin perlu untuk mempekerjakan beberapa teman jika Anda hanya memiliki satu komputer.)
  7. Mengkonversi teks ke dalam kode CMS platform. (Misalnya, mengubah blok teks menjadi diperlukan WP fungsi panggilan dan kode PHP.)

Anda akan melihat bahwa tempat dalam proses tersebut adalah penggunaan perangkat lunak grafis untuk tata letak maket. Itu karena aku tidak seorang desainer dan menggunakan pendekatan yang sangat minimalis untuk apa yang saya desain (untuk diriku hanya). Tetapi jika Anda berencana untuk menggunakan, mengatakan, kembang api untuk maket Anda, Anda akan melakukannya antara langkah #3 dan #4.

Ringkasan

Saya sudah mencoba untuk menjadi komprehensif dalam pencarian saya untuk CSS Grid kerangka kerja, pemindaian lebih dari 120 artikel untuk memimpin. Namun, mungkin aku telah kehilangan beberapa pilihan, sehingga merasa bebas untuk menawarkan orang lain.
Lakukan apapun CSS kerangka Anda memutuskan untuk menggunakan, jadi karena itu yang terbaik sesuai dengan umum Anda kebutuhan. Jika halaman / template desain Anda akan memiliki iklan, mempertimbangkan apa jenis iklan. Pada awalnya, ketika saya memilih tema untuk situs saya, saya memilih untuk iklan AdSense (yang IAB-compliant). Baru-baru ini, saya telah memilih / merancang untuk blok iklan 125 x 125, yang saya sangat suka atas sebagian blok AdSense.
Jika Anda tertarik, ada spesifikasi W3C rancangan berjudul CSS Grid posisi modul Level 3 (ditulis oleh dua karyawan Microsoft) yang membahas layout grid berbasis mengintegrasikan ke dalam CSS. Fitur yang dibahas dalam rancangan ini bisa di IE 8.

Referensi

Alat-alat terkait

  1. Cetak biru CSS udara Grid alat.
  2. Blueprint CSS Referensi Cepat (PDF, 1 halaman).
  3. CSS Grid Kalkulator.
  4. Diagnostik CSS.
  5. Me-reset CSS.

Beberapa artikel atau situs tentang CSS Grid kerangka kerja

Berikut adalah link ke beberapa dari banyak artikel besar luar sana tentang CSS Grids.

  1. 456 Berea Street - Grid, Tabel, CSS.
  2. Daftar terpisah - Berpikir di luar kotak, menetapkan jenis Web untuk Baseline Grid.
  3. Olav Bjørkøy - Peluncuran: Blueprint, sebuah CSS Framework.
  4. Mark Boulton 5-bagian seri, Lima Langkah Sederhana untuk Merancang Sistem Grid.
  5. Jeff Croft - Apakah tidak cinta tentang kerangka CSS?
  6. CSS demo - Tangan dengan Cetak Biru, Sebuah CSS Framework.
  7. Trik CSS - GridControl.
  8. Desain oleh Grid.
  9. Cameron Moll - Gridding 960.
  10. Smashing Magazine - Desain dengan pendekatan berbasis Grid, enam teknik kreatif kolom.
  11. Batu pikiran - Kesan Pertama dari Cetak Biru CSS Framework.
  12. Pengurangan - Oh Yeeaahh! (atau bagaimana menggunakan Grid layout)
  13. Tutorial Blog.
  14. Vandelay Design - 65 Resources untuk desain Grid berbasis.
  15. W3 - CSS dan Grid Layout.
  16. Web desain dinding - Grid dan desain kolom.

Revolusi - Tema Premium

46 tema khusus gratis atau dibayar

Jika Anda merasa bahwa Anda tidak siap untuk menangani grids dan tema desain belum tapi perlu sebuah tema grid berbasis, di sini adalah mungkin salah satu daftar paling komprehensif yang Anda temukan. (Ada sebenarnya lebih dari 46, jika Anda memasukkan variasi.) Termasuk majalah, majalah seperti, Galeri, khusus dan berbagai tema premi yang menggunakan grids CSS eksplisit maupun implisit. (Mungkin satu atau dua tidak menggunakan grid, meskipun pada pandangan pertama, mereka tampaknya.)
Beberapa tema-tema ini gratis atau memiliki versi gratis. Sebagian adalah untuk WordPress platform. Daftar ini hanya mencakup tema yang tersedia untuk umum grid umum, tidak selalu kustom tema yang digunakan oleh berbagai blogger. (Lihat link pilih dalam daftar sebelumnya, termasuk Web Designer Wall dan Smashing Magazine untuk snapshot dari situs tersebut. Juga lihat pengurangan Khoi Vinh, sebagai contoh sebuah situs berbasis grid impactful visual.)
Peringatan: Beberapa tema ini mungkin tidak bekerja di WP 2,5 x +

  1. Majalah Artfull. (Pastikan Anda menggunakan tema switcher pada Halaman ini - bawah kanan.)
  2. Majalah blok.
  3. BranfordMagazine.
  4. Chimera Pro.
  5. Konten tekan.
  6. Landasan.
  7. Galeri CSS.
  8. Deadwood, Deadwood Lite.
  9. Fjords09.
  10. Forte. (Catatan: saat menampilkan halaman ditangguhkan)
  11. Berita segar.
  12. Futurosity.
  13. Fokus grid.
  14. Gridline - Lite, Berita, majalah.
  15. Kemacetan.
  16. IndoMagz.
  17. Jello Wala Mello.
  18. Seri Live kawat.
  19. Majalah Berita.
  20. Berita besar-besaran.
  21. Mimbo, Mimbo Pro.
  22. Monokrom - Galeri, penulis, Pro, Lite.
  23. Nautica.
  24. Berita - Quommunication.
  25. NewsPixel.
  26. Arie Sapta Nugraha.
  27. Pilihan.
  28. Overstand.
  29. Premium tema Berita - edisi lembaran.
  30. Majalah Pemberontak.
  31. Revolusi dan beberapa variasi.
  32. Galeri Pameran.
  33. Kesederhanaan.
  34. Struktur.
  35. Tauren Pro.
  36. TMA - pagi setelah.
  37. Cara Trevilian.
  38. Victoria.
  39. Visioner.
  40. Visualisasi.
  41. WordPress Magazine (Gabfire).
  42. Tema WP-Magazine.
  43. WP-Polaroid.
  44. Ygo CMS.
  45. Revolusi Anda.
  46. Zeke.

Daftar di atas Majalah tema ini dikompilasi dari referensi berikut, serta dari pencarian Google.com.

  1. Bootstrapper.
  2. Sage pintar.
  3. Kertas grafik tekan.
  4. Michael Doig.
  5. Pengusaha Blog.
  6. Bermain tema.
  7. Desain Vandelay.
  8. Visual Blast.
  9. Web Hosting Tampilkan.
  10. Lensa Squidoo Majalah Tema.
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.