Yayasan ZURB: Rangka kerja CSS Antara Muka Pengguna untuk bahagian hadapan yang responsif

Pada tahun 2010 agensi reka bentuk ZURB mencipta rangka kerja CSS dengan tujuan untuk memulakan perkhidmatan untuk memudahkan penciptaan prototaip e memendekkan masa pembangunan. Untuk melakukan ini, coretan, corak dan templat terbaik telah dipilih untuk menggabungkannya dalam Foundation, rangka kerja yang diterbitkan sebagai projek sumber terbuka pada tahun 2011 dan yang sejak itu terus bebas kepada orang ramai.

Foundation ialah rangka kerja bahagian hadapan yang responsif, yang terdiri daripada komponen HTML dan CSS yang cekap untuk konfigurasi UI (Antara Muka Pengguna), pelbagai coretan dan templat tetapi juga pelbagai sambungan JavaScript pilihan. Rangka kerja web mempunyai a struktur modul dan telah direka bentuk untuk mengkonfigurasi projek yang boleh diakses daripada peranti yang berbeza; diedarkan dengan lesen MIT dan boleh dimuat turun daripada kedua-duanya laman utama rasmi berada di GitHub. Daripada Yayasan versi 4.0, premis kerja terpakai "Mudah Alih Didahulukan", jadi sejak itu kami telah bekerja dengan bantuan beberapa modul baharu untuk mengoptimumkan prestasi dan meringankan saiz fail dalam rangka kerja. Sebagai tambahan kepada versi standard Yayasan, ZURB juga telah menerbitkan varian lain untuk pembangunan surat berita e-mel (Yayasan untuk E-mel) dan tapak satu halaman (Asas untuk Apl).

Foundation, rangka kerja web responsif yang dicirikan oleh struktur modularnya, mendapat manfaat di atas semua dalam fleksibiliti. Anda mempunyai kemungkinan untuk memutuskan sebelum memuat turun komponen mana yang hendak dipilih dan mana yang tidak: dengan cara ini anda boleh mengarang varian tersuai anda sendiri bagi koleksi kod web tanpa dipaksa untuk memuat turun modul yang anda tidak perlukan. Dan jika berlaku bahawa anda menyedari bahawa anda memerlukan komponen yang anda tidak pilih pada masa muat turun, anda boleh menambahkannya dengan mudah pada rangka kerja kemudian. Dengan cara yang sama ia juga mungkin untuk mengalih keluar modul yang tidak lagi berguna kepada anda: jadi anda sentiasa dijamin kemungkinan mempunyai hanya fungsi yang anda anggap benar-benar perlu untuk merealisasikan projek web anda.

Untuk Foundation 6.0 anda mempunyai pilihan lebih 40 komponen tergolong dalam tujuh sektor berikut:

• Grid: Komponen penentu untuk reka bentuk web responsif ialah susun atur Grid yang fleksibel, dengan lebar pematuhan standard 1200 piksel. Anda juga boleh menyahpilih modul ini, namun sistem menjadi asas untuk mereka bentuk projek web yang boleh diakses daripada peranti yang berbeza dan serasi pada skala resolusi yang berbeza. Di samping itu, bermula dari versi 6.0 terdapat juga kemungkinan untuk memilih modul "Flex Grid", yang membolehkan kedudukan elemen yang lebih fleksibel dengan beroperasi berdasarkan model CSS flexbox (seperti mendatar atau menegak organisasi objek).

• Umum: Antara modul umum (yang secara rasminya juga Grid adalah sebahagian daripada) terdapat kelas pertama dan terpenting terapung e penglihatan, terima kasih kepada yang anda boleh defimentakrifkan peraturan kelakuan mengenai kedudukan dan keterlihatan elemen individu; Tambahan pula, dalam sektor ini anda juga akan menemui komponen untuk mencipta borang, serta modul tipografi yang mengandungi pemformatan asas untuk penulisan dan teks.

• Mengawal: Semua elemen interaktif yang paling penting dalam projek web anda terkandung di sini. Sebagai contoh, ini adalah butang yang membimbing pengguna di tempat lain dengan satu klik atau menutup elemen yang dipilih. Terdapat juga modul yang anda boleh mengintegrasikan peluncur dan butang dengan mod hidup/mati.

• navigation: Dalam konfigurasi bahagian hadapan, elemen navigasi pastinya tidak akan hilang, jadi walaupun projek anda dijalankan dengan ZURB Foundation, anda mempunyai pelbagai jenis modul yang boleh digunakan untuk menetapkan bar menu dan menu (drop-down, drop-down list, drilldown), tambahkan laluan navigasi (breadcrumbs) atau tambahkan nombor pada halaman.

• Bekas: Bekas adalah peluang yang hebat untuk memasukkan elemen berbeza seperti teks, imej atau video dalam ruang bersama. Di sini anda akan menemui gaya untuk widget kandungan klasik seperti menu lungsur turun, tab, sektor lata atau dialog modal.

• Media: Di dalam bahagian “Media” anda akan menemui modul rangka kerja yang berguna untuk penggabungan elemen multimedia. Komponen "Flex Video", sebagai contoh, menyokong andamemasukkan video dan memastikan bahawa kandungan disesuaikan dengan saiz paparan dan jenis peleraian yang berbeza. Selain itu, terdapat juga komponen untuk imej pratonton serta petua berguna untuk menggunakan alatan tersebut.

• Pasangkan: Akhirnya anda boleh memilih beberapa sambungan yang sangat berguna untuk ZURB Foundation yang memudahkan anda bekerja dengan rangka kerja web. Dengan perpustakaan "Motion UI", sebagai contoh, anda mempunyai kemungkinan untuk memuat turun perpustakaan yang sangat berguna, walaupun hanya tersedia untuk varian Sass, yang menjadikan penciptaan petikan UI dan animasi menjadi mudah.

Selain itu, sebelum memuat turun, anda boleh memilih sama ada defiselesaikan beberapa tetapan standard untuk rangka kerja. Ini termasuk pilihan untuk menukar bilangan atau ketebalan lajur dan lebar maksimum sistem Grid, serta pelbagai tetapan warna dan menentukan arah teks (kiri ke kanan atau kanan ke kiri). Jika anda mula-mula ingin menguji rangka kerja tanpa mengkaji fungsi modul individu, anda juga boleh memuat turun Foundation sebagai versi penuh (Selesai) atau sebagai alternatif sebagai varian asas yang lebih ringan (Perlu).

Jika anda berpuas hati dengan peluang yang ditawarkan oleh CSS dan kemudian hanya menyalin gaya pada fail CSS yang dimuat turun, anda pastinya telah membuat keputusan yang tepat. Walau bagaimanapun, rangka kerja Yayasan mempunyai satu lagi ciri istimewa: asas kod CSS ditulis dalam bahasa helaian gaya Sass (Lembaran Gaya Hebat Secara Sintaksis), yang merupakan prapemproses yang dipanggil untuk CSS. Sass membolehkan anda bekerja pada helaian gaya .scss yang kemudiannya boleh disusun atau ditranskripsikan ke dalam fail .css yang popular dan yang kemudiannya dibaca dan ditafsirkan oleh penyemak imbas.

Jika anda menggunakan varian Sass rangka kerja ZURB, anda akan menikmati kelebihan berikut:

• Sintaks yang dipermudahkan (Sass atau CSS), yang memudahkan untuk menulis helaian gaya

• Kemungkinan untuk defiselesai daripada model (Mixins) untuk menyimpan format berulang secara berpusat dan menyepadukannya sesuka hati

• Gabungan ringkas helaian gaya yang berbeza untuk meminimumkan permintaan HTTP

• Menggunakan pembolehubah dan fungsi untuk bertukar warna, jarak, fon dan sebagainya, secara berpusat

• Kod ini boleh distrukturkan dengan mudah terima kasih kepada bersarang dalam susunan hierarki, membolehkan anda bekerja dengan lebih bersih tanpa terlalu banyak rentetan kod

Pengkompil Sass pada asalnya ditulis dalam Ruby. Walau bagaimanapun, jika anda tidak menggunakan bahasa pengaturcaraan ini, anda tidak dipaksa untuk memasangnya untuk Sass kerana dengan LibSass anda akan mempunyai alternatif yang ditulis dalam C. LibSass berfungsi dengan semua sistem pengendalian yang digunakan dan boleh dipasang dengan mudah pada Node.js aliran kerja, iaitu, untuk membuat perubahan pada kod dalam Sass dan menterjemahkannya secara automatik ke dalam CSS.

Dengan peralihan daripada versi 5 kepada Foundation 6.0, ZURB telah sekali lagi mengecilkan saiz fail keseluruhan rangka kerja: dengan 60 KB CSS dan 84 KB JavaScript, Foundation menikmati reputasi sebagai salah satu platform pembangunan yang paling diperkemas dan baca yang ada. Terima kasih kepada struktur modular yang disebutkan di atas dan kebebasan penyesuaian tertentu, anda malah dapat mengurangkan lagi saiz rangka kerja. Dalam kombinasi dengan Grid yang fleksibel dan yang berbeza sifat-sifatARIA (contohnya untuk transposisi navigasi papan kekunci yang berkesan) yang dilaksanakan oleh ZURB, syarat asas, yang sangat diperlukan untuk merealisasikan projek web yang serasi pada platform dan peranti yang berbeza, boleh dianggap benar-benar berpuas hati. Atribut ARIA didokumentasikan dengan terbaik dan tersedia di mana anda berhasrat untuk mengoptimumkan kebolehcapaian tapak web anda dengan ketara.

Jika anda menggunakan rangka kerja versi Sass, pastikan anda mengembangkan pilihan anda untuk mengkonfigurasi elemen reka bentuk dan reka letak yang anda masukkan. Menggunakan helaian gaya khas ini sama sekali tidak mudah untuk orang baru dan memerlukan tempoh pembelajaran tertentu, yang biasanya berlaku untuk platform juga. Saya juga'integrasi komponen luaran, serta modul dan projek Yayasan dalam rangka kerja lain atau dalam CMS adalah sangat rumit. Kelemahan kecil yang ditunjukkan oleh ZURB Foundation berbanding rangka kerja CSS lain, seperti Twitter Bootstrap, ialah kepelbagaian templat yang terhad dan kekurangan sokongan untuk versi Internet Explorer yang lebih lama.

Yayasan ZURB mengiringi pembangun dari prototaip pertama hingga ke tapak web sedia untuk digunakan dan dicirikan di atas semua dengan cirinya sendiri kecekapan. Jika anda mendapati bahawa beberapa komponen tidak diperlukan, anda mempunyai pilihan untuk menyahpilihnya tanpa menjejaskan kefungsian elemen lain. Kesimpulannya, rangka kerja CSS dicirikan oleh kod yang sangat langsing yang menonjolkan leitmotif yang dipilih oleh ZURB "Mobile First". Bersama dengan sistem Grid yang sangat fleksibel, yang boleh anda sesuaikan secara pilihan dengan Sass, rangka kerja ini sesuai untuk dibangunkan bahagian hadapan yang responsif yang mempunyai kelebihan mempunyai kelajuan tinggi dalam pemuatan data dan kebolehcapaian yang hebat, serta menyesuaikan diri dengan saiz skrin yang berbeza.

Anda juga boleh menggunakan rangka kerja ZURB untuk mencipta projek web tersuai dan mungkin lebih kompleks, namun ini disambungkan kepada beban tenaga yang banyak dan memerlukan pemahaman yang baik tentang coretan.