Foundation 6 - 10 Fitur Baru Yang Luar Biasa

Pengembang kerangka front-end Foundation tidak hanya berpuas diri sementara tim Bootstrap telah mengerjakan rilis besar baru mereka yang mengesankan. Tahun lalu mereka mengadakan World Tour yang luar biasa untuk berbagi pengetahuan mereka dengan pengguna mereka dan bertanya kepada mereka tentang bagaimana mereka menggunakan Foundation dalam pekerjaan nyata mereka..

Setelah kembali ke meja mereka, mereka mengumpulkan kebutuhan dan keinginan pengguna mereka, dan memulai merencanakan rilis besar baru kerangka kerja: Yayasan 6.

Masih dalam pengembangan, tetapi rencananya sangat menjanjikan. Fitur yang akan datang fokus pada 3 bidang utama: kinerja, kemampuan penyesuaian, dan aksesibilitas. Mari kita lihat 10 fitur ini sekarang.

1. Alur Kerja yang Efisien

Berdasarkan pengalaman penggunanya, tim Foundation mengembangkan slogan baru, yaitu “Prototipe ke Produksi”, untuk Foundation 6. Ini berarti alur kerja baru yang disederhanakan yang akan memungkinkan para desainer dan pengembang langsung dari prototipe ke produksi.

Tujuan dari Foundation 6 yang baru adalah untuk menyediakan kerangka kerja yang fleksibel dan mudah disesuaikan yang memungkinkan untuk dilakukan tulis kode semantic dan bersih dari awal. Versi saat ini, Foundation 5 juga memungkinkan pembuatan prototipe cepat, tapi kami bisa mengharapkan pengoptimalan alur kerja lebih lanjut dalam rilis mendatang.

2. Proses Pengaturan Sederhana untuk Versi Sass

Salah satu hal paling mengagumkan tentang kerangka kerja Foundation adalah bahwa ia dibangun dengan bahasa stylesheet Sass, jadi mungkin saja cepat sesuaikan aturan gaya default dengan kebutuhan aktual kita.

Proses setup Sass telah sedikit mengintimidasi bagi banyak pengguna, jadi rilis utama baru akan dapatkan proses pengaturan yang disederhanakan untuk versi Sass. Ini berarti bahwa pengaturan Sass akan membutuhkan dependensi yang jauh lebih sedikit daripada sebelumnya. Tentu saja, jika Anda lebih suka versi vanilla CSS, Anda masih bisa memilih untuk itu.

3. Susunan Pengaturan Baru, Dipenuhi untuk Para Maksimalis

Selain versi reguler Sass, Foundation 6 akan hadir dengan sup Versi Sass yang akan memberikan pengembang dengan opsi penyesuaian yang kuat.

ZURB, pencipta Foundation akan membuka tumpukan pengembangan mereka sendiri untuk publik, termasuk milik mereka sendiri generator situs statis, server live-reload dan banyak teknik optimasi batin termasuk integrasi UnCSS untuk menghapus gaya yang tidak digunakan, dan UglifyJS untuk kompresi JavaScript.

Jadi pada dasarnya kita akan dimungkinkan untuk bekerja di lingkungan pengembangan yang sama dengan yang digunakan ZURB secara internal.

4. Waktu Muat Halaman yang Diperkecil

Tim Foundation harus menghadapi beberapa kritik konstruktif yang mengklaim bahwa di sebagian besar proyek Foundation, sekitar 90% dari kode CSS tidak dapat digunakan. Ini tidak hanya berlaku untuk Foundation, tetapi juga untuk kerangka kerja CSS utama lainnya seperti Bootstrap dan TopCoat. Sebagai bagian dari balasan mereka, Zurb memutuskan untuk secara signifikan memotong ukuran file dari CSS yang dikeluarkan dengan menerapkan pengurangan kode sekitar 40-50%.

Sangat menarik untuk dicatat bahwa mereka mencoba untuk membedakan diri dari Bootstrap dengan menyatakan "Foundation bukan kerangka kerja yang akan memiliki margin gaya bahasa dan padding atau bulat dan jari-jari". (Untuk referensi, lihat Kelas Utilitas baru Bootstrap 4 di pos kami sebelumnya).

5. Gaya Dasar Bertindak sebagai Wireframes

Bagian lain dari upaya peningkatan kinerja adalah buat gaya dasar yang bertindak sebagai bingkai gambar alih-alih desain akhir. Ini terutama mengarah pada tema yang lebih ringan, tetapi juga memiliki keuntungan besar lainnya. Karena lebih banyak aturan gaya akan dipindahkan ke komponen individu, pengembang akan memiliki kesempatan untuk melakukannya lebih mudah mendesain desain mereka.

Semoga ini berarti bahwa situs yang berdasarkan pada Foundation akan melakukannya kurang memiliki tampilan yang mirip dan standar, dan desainer akan memiliki lebih banyak ruang untuk experosi dengan solut yang indah dan unikion yang akan membantah kekhawatiran baru-baru ini tentang web yang tampak membosankan.

6. Impor Selektif Yang Difasilitasi

Foundation 5 memungkinkan pengembang untuk hanya memilih komponen yang ingin mereka gunakan. Foundation 6 akan membawa upaya ini ke level selanjutnya memindahkan fitur impor selektif ke file Sass _settings.scss.

Dengan cara ini _settings.scss akan menjadi file konfigurasi yang benar-benar universal, karena kami tidak hanya dapat menyesuaikan fitur seperti lebar baris atau font default dengan bantuannya, tetapi juga dengan mudah memilih keluar dari komponen yang tidak kita butuhkan. Jika kami melakukannya, kami dapat mencapai peningkatan kinerja lebih lanjut.

7. Leaner dan Cleaner Sass

Dalam proses desain ulang, tim Foundation memikirkan kembali setiap aspek kerangka kerja, jadi mereka juga mengubah cara mereka menggunakan bahasa stylesheet Sass. Mereka menemukan bahwa dalam beberapa kasus, mereka terlalu sering menggunakan Sass yang mengarah pada komplikasi berlebihan dari output CSS. Dengan tujuan basis kode yang lebih ramping dan lebih bersih dalam pikiran mereka, mereka telah merasionalisasi struktur Sass mereka juga.

Di Yayasan 6 kita bisa mengharapkan penurunan sarang dan spesifisitas, kueri media yang disederhanakan (mereka menggabungkan kode berulang), dan komponen mixin yang diskalakan kembali. Yang terakhir berarti bahwa akan ada lebih sedikit komponen mixin, dan yang tersisa akan memiliki lebih sedikit parameter, yang akan mengarah pada kode yang lebih sederhana, dan lebih logis

Jika Anda menyukai mixin, jangan khawatir, setiap komponen akan tetap memilikinya, hanya saja mereka akan didesain ulang agar lebih efisien dan berguna daripada yang ada sekarang..

8. Peningkatan Grid Mixin

Sambil mengurangi mixin komponen, Foundation 6 akan datang dengan mixin grid yang ditingkatkan itu akan memungkinkan kita untuk buat kisi yang lebih dikustomisasi.

Zurb berjanji bahwa kita akan bisa dengan mudah membangun sistem grid yang rumit seperti yang kita inginkan, termasuk baris ubahsuaian yang lebih canggih dan grid bersarang, dan kemampuan mengkonversi kelas default ke semantik markup. Campuran grid yang ditingkatkan akan membuat arus pembuatan kisi lebih intuitif, fleksibel dan lebih cepat.

9. Integrasi Seamless dari Custom JavaScript Plugin

Foundation 5 saat ini memiliki banyak komponen JavaScript seperti dialog modal yang keren, tooltips, sticky navigation bar, lightboxes, dan banyak lainnya yang dibutuhkan oleh sebuah situs web modern, tetapi rilis utama yang akan datang memungkinkan kita untuk tulis plugin JavaScript khusus kami mengambil keuntungan dari inti Foundation. Ini adalah langkah besar ke depan di keduanya keramahan dan kinerja pengguna.

Di masa depan, kita akan bisa mengakses metode inisialisasi bawaan, beralih pemicu dan breakpoints, dan memanfaatkan semua fitur lain dari JavaScript global Foundation.

10. Aksesibilitas Penuh

Mungkin fitur yang paling menakjubkan dari Foundation 6 yang baru adalah dapat diakses sepenuhnya. Setiap komponen dan cuplikan kode akan datang dengan atribut WAI-ARIA dan peran tengara yang sesuai. Terlebih lagi, bahkan para pengembang disediakan dengan panduan pengguna tentang cara menggunakan standar web a11y.

Jadi, jika kita ingin menyediakan situs web yang sepenuhnya dapat diakses oleh klien, kita tidak perlu melakukan apa pun selain membangun desain kita dengan Foundation 6. Harap dicatat bahwa kita masih perlu tambahkan aturan ARIA yang sesuai ke halaman HTML kami sendiri, meskipun buku petunjuk Zurb yang akan datang pasti akan memudahkan proses pembelajaran.