Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML & CSS
Code

Rangka Kerja Grid CSS Yang Harus Anda Gunakan untuk Reka Bentuk Web?

by
Difficulty:BeginnerLength:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Pernah terfikir bagaimana semua orang licin "majalah" tema WordPress dan platform lain dicipta? Kebanyakan, jika tidak semua, telah direkabentuk menggunakan rangka Grid CSS - sekurang-kurangnya dalam intipati jika tidak sebenarnya. Iaitu anda boleh menggunakan rangka CSS yang sedia ada atau membina anda sendiri dari awal. Walaupun ia adalah mungkin untuk mereka bentuk susun-atur yang kompleks laman web tanpa rangka, ianya boleh dikatakan perbuatan di masochism. Dalam artikel ini, anda akan mendapat satu gambaran menyeluruh tentang kelompok semasa dan rangka kerja yang perlu anda memilih untuk menggunakan.

Apakah Rangka Grid CSS

Susunatur grid digunakan dalam cetakan penerbitan lama sebelum di Web. Mereka mudah untuk tidak kelihatan asas yang digunakan untuk mencapai perpaduan visual dalam majalah dan akhbar Laman Reka bentuk dan susun atur. Mereka pada dasarnya berjumlah kekisi yang membahagikan melintang dan menegak ruang dalam unit-unit yang konsisten di mana teks, tajuk berita, gambar, dan iklan boleh diletakkan.

Konsep yang sama telah disesuaikan untuk Reka bentuk laman web bagi banyak alasan yang sama, menggunakan kod CSS (stylesheet melata) untuk elemen HTML kedudukan. Malah, banyak tempat penerbitan yang diusahakan oleh penerbit media cetak yang menggunakan grid besar untuk mencapai lihat di laman web mereka yang menyerupai kandungan cetakan mereka.
Ambil perhatian bahawa paksi menegak tidak juga disokong dalam sistem CSS Grid, kerana ketinggian Laman web yang tidak seberapa banyak isu bagi halaman bercetak. (Masih, itu adalah masalah kecil dalam reka bentuk laman web, kecuali anda mengharapkan ciri yang sama seperti dengan penerbitan Desktop - aka DTP - sistem, yang sukar untuk menyokong tanpa bahasa seperti PostScript untuk pelayar untuk melaksanakan dan menyokong.)


960 CSS Grid System - salah satu reka bentuk yang lebih baik untuk laman web rangka kerja :-)

Kenapa Gunakan Rangka Kerja Grid CSS?

Bukan semua pereka menyokong penggunaan menggunakan rangka-kerja grid melalui Jadual, atau walaupun sekali. Tetapi mari kita hadapi; Terdapat susun-atur yang anda hanya tidak boleh dibuat dengan hanya jadual HTML tanpa banyak usaha menyakitkan - dan banyak menyarang yang sukar untuk mentafsirkan, harus sentiasa perlu membuat perubahan.

Pasti, jika anda menggunakan grid, anda perlu menambah beberapa markup tag HTML yang diperlukan untuk kandungan anda, dengan itu meningkatkan saiz fail halaman. Juga, ini bermakna bahawa markup dan gaya tidak benar-benar dipisahkan - satu prinsip yang banyak pereka web ingin mematuhi. (Sesetengah orang rasa, betul atau salah, bahawa naysayers rangka kerja CSS adalah pereka yang bimbang bahawa perlunya perkhidmatan mereka akan menolak. Walaupun, dengan logik ini, coders yang dalam kesusahan, terlalu, terutamanya dengan peningkatan dalam Kod cross-browser Perpustakaan seperti jQuery.)

Hakikatnya, menggunakan rangka grid CSS bermakna beban pelayar anda CSS fail hanya sekali dan memastikan mereka cache "di pihak pelanggan". Plus, penanda HTML tambahan yang diperlukan untuk memohon rangka CSS "ghaib" adalah jarang jadi penting bahawa isu-isu lebar jalur untuk pembaca harus menjadi kebimbangan. (Menariknya, kebanyakan naysayers ini seolah-olah akan bercakap tentang Yahoo UI grid, rangka tindakan tidak begitu banyak.)

Dalam kebanyakan contoh yang saya telah bekerja dengan, dan dalam mana-mana tema majalah menggunakan grids yang telah diperiksa, kita berbicara kenaikan saiz fail yang agak kecil - terutamanya berbanding kod platform blog yang sedang digunakan. Imej besar satu mungkin akan mengambil lebih banyak ruang. Dengan sambungan Internet yang lebih pantas, ia benar-benar tidak apa-apa masalah besar.

Reka Bentuk & Manfaat Estetik

Apapun, sama ada anda menggunakan CSS grids untuk sistem prototaip atau pengeluaran, Terdapat pelbagai manfaat estetik dan reka bentuk:

  1. Reka bentuk visual perpaduan antara elemen halaman.
  2. Keseragaman dan konsistensi dalam penempatan elemen HTML, dengan itu mengurangkan CSS pengekodan ralat.
  3. Lebih mudah untuk memohon "pemerintahan pertiga" dan "golden bahagian" dengan perundingan rekabentuk, yang mengakibatkan susun atur yang paling menarik mata Tempahan manusia.
  4. Kebanyakan menghilangkan keperluan untuk menggunakan jadual HTML bersarang.
  5. Bersarang sub grid, bagi Reka bentuk yang sangat kompleks yang agak mudah melahirkan.
  6. Lebih mudah untuk menggunakan imej dan teks petikan untuk menghasilkan pelan susun atur yang asimetri untuk tekstur visual.
  7. Cross-browser sokongan, jadi kurang menjerit dan Tukang menarik apabila anda mendapat sekitar untuk ujian itu bane pereka, IE. (Bill Gates mesti berasa begitu disayangi sebagai seorang anak untuk menghasilkan perisian yang begitu banyak yang melakukan apa yang ia mahu, dengan tidak ada alasan standard yang MSFT kononnya menyokong.)
  8. Usaha mengurangkan pengeluaran slicker susun atur Laman web, berbanding kod CSS perlu dari awal.
  9. Mengurangkan usaha masa depan jika anda perlu mengubah semula elemen-elemen atau menukar memberikan ciri-ciri (typography, margin, dan sebagainya) bagi elemen-elemen berkaitan beramai-ramai.
  10. Boleh digunakan dengan halaman statik dan platform CMS/blog.
  11. Membolehkan penggunaan popular dalam mencipta tema "majalah" dan premium untuk blog platform. (WordPress seolah-olah menjadi platform yang rangka kerja CSS yang paling sering digunakan, walaupun mana-mana platform yang membolehkan rujukan fail sumber JavaScript harus bekerja saja.)

YAML - "Susun-atur Multicolumn lagi"

Rangka Kerja CSS dan Alat

Berikut adalah senarai pendek daripada beberapa rangka lebih popular:

  1. Rangka Tindakan CSS Grid CSS.
    Mantap walaupun hanya berada di V0.7 (seperti tulisan ini), dengan banyak sokongan daripada pereka, dan pelbagai alat untuk menjana kod CSS (di luar dalam standard 24-kolum, rangka kerja lalai sgt 950). Menyokong penggunaan rangka tindakan "plugin".
  2. Yahoo! YUI Grids CSS, Pembina Grid.
    Rangka kerja ini, yang mendahului Blueprint, dilengkapi dengan template pratetap yang enam dan lebar pratetap yang empat, dan susun-atur yang memuatkan garis panduan unit IAB iklan. YUI Grids CSS bersepadu dengan seluruh perpustakaan UI Yahoo! (User Interface).
  3. YAML, YAML Builder.
    YAML (belum lagi Multicolumn susun atur) mempunyai sedikit saksama kematangan, dibina di atas piawaian web, dan kononnya mudah untuk digunakan. Walaupun ia tidak kelihatan untuk semua yang banyak digunakan dalam komuniti WordPress. Malah, dalam beratus-ratus tema WP yang saya cari selama tiga tahun yang lalu, saya tidak ingat melihatnya digunakan sekali. Itu mungkin kerana anda memerlukan lesen untuk menggunakannya dengan beberapa CMS (Sistem Pengurusan Kandungan).
  4. Reka bentuk Grid.
    Ini adalah alat web untuk menjana adat grids CSS. Ia menggunakan kelas CSS sendiri, jadi ia boleh dikatakan sebagai satu rangka kerja, walaupun ianya tidak dan sokongan dalam komuniti Reka bentuk sebagai sebahagian daripada yang lain.
  5. Sistem Grid 960 CSS. Sistem ini adalah berdasarkan selebar Laman 960 piksel, yang merupakan nombor yang dibahagi oleh banyak nombor yang lain, menjadikannya "amat fleksibel asas nombor untuk bekerja dengan." Walau bagaimanapun, 960 Grid hanya bekerja dengan tiang 12 atau 16.
  6. CSS Boilerplate. Dihasilkan sebagai satu rangka kerja yang stripped turun oleh salah satu daripada pelan tindakan penulis asal.
  7. Sparkl. Dokumentasi yang berkata anda boleh mencipta 1-, 2, atau 3-kolum halaman, tetapi sampel mencadangkan anda mempunyai lebih banyak fleksibiliti.

Terdapat Grid CSS lain rangka kerja yang anda boleh mencari disenaraikan dalam Kod Google, tetapi tiga atau empat lebih saya memandang, tempahan telah lengkap dari segi dokumentasi atau bahkan projek fail, jadi saya telah tinggalkan mereka. Jika anda tahu satu rangka kerja yang tidak tersenarai, sila beritahu kami tahu dalam komen!

Perbandingan

Biarkan aku menunjukkan bahawa ini bukanlah perbandingan komprehensif rangka kerja CSS. Malah, saya telah tidak menggunakan apa-apa secara meluas selain daripada pelan tindakan, walaupun saya telah diimbas untuk semua rangka-kerja tadi dan bermain sedikit dengan YAML dan reka bentuk Grid. Pelan tindakan, YUI Grids dan YAML boleh dikatakan "tiga besar" dalam ruang rangka kerja CSS, dan 960 seolah-olah menjadi pilihan keempat yang kukuh.

Dalam memilih rangka kerja, saya telah mengambil kira bahawa saya bukan seorang pereka terlatih - melebihi apa yang saya telah mengkaji pada saya sendiri selama bertahun-tahun. Saya meramal Reka bentuk apabila diperlukan, walaupun dalam bentuk yang sangat minimalis. Malah, kerana saya telah menghabiskan beberapa tahun sama ada penerbitan majalah bercetak saya sendiri atau bekerja di lain-lain, saya melakukan sedikit layout Laman (benar-benar buruk) yang menggunakan prinsip-prinsip reka bentuk grid yang bekerja dengan Adobe PageMaker saksama. Oleh itu saya merasa sangat wajar untuk bekerja dengan Grid CSS untuk reka bentuk web. Ia seolah-olah bahawa memandangkan bilangan WordPress themes sana - melihat senarai di akhir artikel ini - yang berdasarkan grid rangka kerja (Blueprint kebanyakannya), pereka berasa cukup selesa dengan grid, terlalu.

Walau bagaimanapun, masa sentiasa terhad, saya perlukan sesuatu yang mudah untuk belajar dan menggunakan, lagi mantap. Saya dapati bahawa rangka tindakan CSS Grid sesuai dengan keperluan saya. Ia mengintegrasikan baik dengan pelbagai perpustakaan JavaScript - termasuk jQuery, yang boleh mengakibatkan beberapa antara muka web sialan seksi. Ia membuat baik (walaupun tidak 100% sempurna) dalam kebanyakan pelayar - walaupun anda perlu menguji thorn yang besar di sisi Pereka web, IE browser.

Berdasarkan penyelidikan saya longgar dari CSS Grids tahun terakhir ini, rangka tindakan seolah-olah rangka Tempahan teguh, -kurangnya ketat, yang Tempahan disokong - dari segi berapa meluas penggunaannya sangat - terkecil dalam saiz, dan rangka kerja dengan alat-alat yang paling. Malah, keindahan Blueprint adalah bahawa anda boleh dengan cepat menghasilkan kod CSS rangka tersuai yang menggunakan alat seperti Kematzy dan Blueprint Grid CSS Generator. Walaupun anda boleh melakukan ini dengan reka bentuk Grid, perbandingan cepat ingin mencadangkan ia bukanlah seperti teguh sebagai rangka tindakan.

Di sebaliknya pula, mengimbas dan melayari dokumentasi untuk Yahoo! Rangka kerja UI Grids CSS membawa saya untuk percaya bahawa jika anda hanya mahu melakukan beberapa susun atur Laman web mudah dan mahu segelintir ada untuk bermain dengan, anda mungkin mahu untuk meneliti opsyen ini. Walau bagaimanapun, saya rasa ianya agak terlalu menyekat suka saya. (Anda mungkin mahu membaca Foo Hack vs Rangka Kerja Pelan Tindakan CSS YUI Grids.)

Akhirnya, Bilakah ia datang untuk belajar sesuatu yang baru dalam talian - seperti Perpustakaan Bahasa dan kod pengaturcaraan/rangka kerja - saya selalu memohon "bahu gergasi kaedah". Aku pendek pertama pilihan yang seolah-olah sesuai untuk apa yang saya perlukan, kemudian pilih berdasarkan berapa banyak ia telah menulis tentang. Mungkin kelihatan adil untuk pilihan yang lebih baru, tetapi proses tidak bahawa lebih sewenang-wenangnya daripada berapa ramai orang memilih aplikasi web untuk menggunakan. Terdapat terlalu banyak luar sana untuk mengesan dan mempunyai komuniti menyokong yang sedia ada membuat satu perbezaan yang besar.


Blueprint - Pilihan saya

Mengapa| Memilih Blueprint CSS

Rangka kerja pelan tindakan CSS Grid adalah apa aku akan menggunakan semua tutorial saya di NETTUTS (jika yang berkenaan). Bukan meniru senarai ciri-ciri dari dokumentasi pada kod Google, Izinkan saya memberi tumpuan mengapa saya secara peribadi memilih ia. Di antara titik-titik ini bertindih dengan apa yang telah saya katakan di atas:

  1. Saiz fail yang agak kecil. Telah dimampatkan versi untuk kegunaan pengeluaran, untuk mengurangkan lagi saiz.
  2. Cetak +  skrin stylesheet.
  3. Mudah untuk mengintegrasikan dan gunakan. (Meskipun pelayar IE bermasalah, bergantung kepada yang versi Blueprint digunakan.)
  4. Mudah untuk diingati kelas CSS dan ID yang tidak mungkin pertembungan dengan apa-apa yang anda telah gunakan.
  5. Banyak alat-alat sokongan, terutamanya untuk menjana grids adat.
  6. Banyak artikel-artikel/Tutorial tentang pelan tindakan, dengan banyak positif vibe.
  7. Banyak penggunaan Rangka Tindakan oleh pereka tema WordPress.

Seperti yang dinyatakan di atas, saya menghadapi masalah IE - tetapi tidak semua orang? Beberapa tema WP yang menggunakan pelan tindakan telah diselesaikan masalah pelayar IE, jadi saya saya extrapolating dalam kepercayaan saya bahawa mereka kebanyakannya boleh diselesaikan.
Pelan tindakan, seperti tulisan ini, tidak menyokong susun atur cair - sesuatu yang saya bukan peminat besar juga. Walau bagaimanapun, sokongan itu nampaknya akan datang, sekiranya anda bersandar dengan cara itu.

Proses Reka Bentuk Grid Sampel

Nah ini satu perkara yang pilihan, bukan? Sesetengah Grids CSS dilengkapi dengan grid.png satu atau lebih fail .psd yang boleh anda gunakan dalam mod telus dalam Photoshop, bunga api, GIMP, dll, walaupun anda sedang berbaring unsur-unsur Reka bentuk anda. Saya agak lebih banyak sekolah lama dan sentiasa Reka bentuk susun atur saya dengan memulakan atas kertas:

  1. Menyekat segi empat tepat bounding mewakili seluruh halaman web. (Lakukan ini untuk setiap halaman yang anda sedang mendesain.)
  2. Pemisahan segi empat ke segi empat yang lebih kecil mewakili bidang utama: header, footer, sidebar, area content, dll.
  3. Sekatan kawasan utama dan pensil dalam komponen Reka bentuk "atom" (Laman web, logo, butang rss, kiriman terbaru, komen terkini, kotak carian, contoh jawatan, post thumbnail, dll)
  4. Menterjemah lakaran akhir itu ke dalam rangka HTML, menggunakan teks ipsum teks atau Perisik Telefon sebenar. Penanda HTML termasuk perlu CSS Grid kelas dan id nilai untuk menyokong susun-atur yang saya perlukan.
  5. Mencipta banner/butang dalam perisian grafik.
  6. Uji HTML mockup dalam seberapa banyak pelayar dan versi yang mungkin. (Anda mungkin perlu mengambil beberapa kawan jika anda hanya mempunyai satu komputer.)
  7. Menukar teks ke dalam Kod CMS/platform. (Contohnya, menukar blok teks ke perlu WP fungsi panggilan dan kod PHP.)

Anda akan perasan bahawa mana-mana dalam bahawa proses adalah penggunaan perisian grafik untuk mockup susun atur. Ini kerana saya bukan seorang pereka dan menggunakan pendekatan yang sangat minimalis untuk apa yang saya Reka bentuk (untuk diri sendiri sahaja). Tetapi jika anda merancang untuk menggunakan, berkata, bunga api untuk mockup anda, anda akan melakukannya antara langkah #3 dan #4.

Ringkasan

Saya telah cuba untuk menjadi komprehensif dalam pencarian saya untuk rangka kerja Grid CSS, imbasan artikel lebih 120 untuk membawa. Walau bagaimanapun, mungkin saya telah terlepas beberapa pilihan, jadi merasa bebas untuk menawarkan lain-lain.
Adakah mana-mana rangka kerja CSS yang anda memutuskan untuk menggunakan, jadi kerana itu yang terbaik sesuai dengan Ketua anda memerlukan. Jika halaman/Reka bentuk anda akan mempunyai template pengiklanan, mempertimbangkan Apakah jenis-jenis iklan. Pada peringkat awal, apabila saya memilih tema untuk laman web saya, saya memilih untuk iklan AdSense (yang mana IAB-patuh). Baru-baru ini, saya telah telah memilih/merekabentuk untuk blok iklan 125 x 125, yang saya amat suka ke atas kebanyakan AdSense blok.
Jika anda tertarik, ada spesifikasi W3C draf yang bertajuk CSS Grid Kedudukan Modul Tahap 3 (ditulis oleh dua pekerja-pekerja Microsoft) yang membincangkan susunatur grid berasaskan gandingan ke CSS. Ciri-ciri yang dibincangkan dalam draf ini boleh di IE 8.

Rujukan

Alat-alat Berkaitan

  1. Rangka Tindakan CSS AIR Grid Tool.
  2. Rangka tindakan CSS Quick Reference (PDF, Laman 1).
  3. Kalkulator Grid CSS.
  4. Diagnostik CSS.
  5. Set semula CSS.

Beberapa Artikel atau Tapak Mengenai CSS Frameworks CSS

Berikut adalah pautan ke beberapa banyak artikel hebat di luar sana mengenai CSS Grids.

  1. 456 Berea Street - Grid, Jadual, CSS.
  2. Satu Senarai Selain - Berfikir Di Luar Grid, Menetapkan Jenis di Web ke Grid Baseline.
  3. Olav Bjørkøy-Pelancaran: Blueprint, Rangka CSS.
  4. Siri 5 bahagian Mark Boulton, Lima Langkah Mudah untuk Merancang Sistem Grid.
  5. Jeff Croft - Apa Yang Tidak Suka Mengenai Kerangka CSS?
  6. CSS Demo - Tangan dengan Blueprint, Rangka CSS.
  7. Trik CSS - GridControl.
  8. Design by Grid.
  9. Cameron Moll - Gridding 960 itu.
  10. Majalah Smashing - Reka Bentuk Dengan Pendekatan Berasaskan Grid, Enam Teknik Kolum Kreatif.
  11. Minda Batu - Tayangan Pertama Rangka Kerja CSS Blueprint.
  12. Penolakan - Oh Yeeaahh! (atau Bagaimana Menggunakan Grid dalam Susun Atur)
  13. Tutorial Blog.
  14. Reka Bentuk Vandelay - 65 Sumber untuk Reka Bentuk Berasaskan Grid.
  15. W3 - Layout CSS dan Grid.
  16. Wall Designer Web - Reka Bentuk Grid dan Tiang.

Revolusi - Sebuah Tema Premium

46 Tema Khas Bebas atau Berbayar

Jika anda merasakan bahawa anda tidak bersedia untuk menangani grid dan rekabentuk tema lagi tetapi perlu tema berasaskan grid, berikut adalah mungkin salah satu daripada senarai paling menyeluruh yang anda akan dapati. (Ada sebenarnya lebih daripada 46, jika anda memasukkan variasi.) Ia merangkumi majalah, majalah seperti, Galeri, khusus dan pelbagai tema premium yang menggunakan grids CSS sama ada tersurat atau tersirat. (Ianya mungkin satu atau dua tidak menggunakan grid, walaupun pada pandangan pertama, mereka kelihatan.)
Sebagai sebahagian daripada tema-tema bebas atau mempunyai versi percuma. Kebanyakan adalah untuk WordPress platform. Senarai ini hanya merangkumi tema-tema yang disediakan untuk tema grid awam, tidak semestinya adat yang umum digunakan oleh blogger yang pelbagai. (Lihat pautan yang dipilih dalam senarai sebelumnya, termasuk Majalah Web Designer Wall dan Smashing untuk snapshot laman-laman web tersebut. Lihat juga Pengurangan Khoi Vinh, sebagai contoh tapak berasaskan grid secara visual.
Amaran: Sesetengah tema ini mungkin tidak berfungsi di WP 2.5 x+

  1. Majalah Artfull. (Pastikan anda menggunakan penukar tema pada halaman ini - sudut kanan bawah.)
  2. Majalah Blok.
  3. BranfordMagazine.
  4. Chimera Pro.
  5. Kandungan Tekan.
  6. Cornerstone.
  7. Galeri CSS.
  8. Deadwood, Deadwood Lite.
  9. Fjords09.
  10. Forte. (Nota: paparan halaman digantung buat masa ini)
  11. Berita Segar.
  12. Futurosity.
  13. Grid Focus.
  14. Gridline - Lite, berita, majalah.
  15. Gridlock.
  16. Indomagz.
  17. Jello Wala Mello.
  18. Siri wayar Live.
  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. NewsPress.
  27. Pilihan.
  28. Mengatasi.
  29. Tema Berita Premium - Edisi Warta.
  30. Majalah Pemberontak.
  31. Revolusi dan beberapa variasi.
  32. Galeri Pameran.
  33. Kesederhanaan.
  34. Struktur.
  35. Tauren Pro.
  36. TMA - The Morning After.
  37. Trevilian Way.
  38. Victoria.
  39. Penglihatan.
  40. Visualisasi.
  41. Majalah WordPress (Gabfire).
  42. Tema WP-Majalah.
  43. WP-Polaroid.
  44. Ygo CMS.
  45. Revolusi Anda.
  46. Zeke.

Senarai tema majalah di atas disusun dari rujukan berikut, serta daripada mencari Google.com.

  1. Bootstrapper.
  2. Sage Pandai.
  3. Tekan Kertas Graf.
  4. Michael Doig.
  5. Blog Usahawan.
  6. Taman Permainan Tema.
  7. Reka Bentuk Vandelay.
  8. Blast Visual.
  9. Web Hosting Show.
  10. Lensa Majalah Squidoo Tema.
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.