Isi
Flexbox adalah alat yang hebat untuk mengurangi pembengkakan CSS, dan memiliki beberapa gula bawaan untuk menangani hal-hal seperti urutan sumber dan penyelarasan. Tapi itu tidak menawarkan bantuan untuk melakukan matematika yang membuat ukuran kolom dan talang. Seperti yang berulang kali dikatakan oleh banyak pakar: Flexbox memang bagus, tetapi ini bukan sistem kisi.
Kita harus menggunakan Flexbox, tetapi kita tidak boleh membuang konsep dasar di balik sistem kisi yang menarik kita keluar dari desain 'era GeoCities':
- Buat kolom proporsional dengan sesuatu
- Gunakan talang yang konsisten di seluruh desain Anda
Kita dapat menggunakan salah satu dari banyak sistem grid Flexbox di luar sana, tetapi sejujurnya, gaya di balik ini sebagian besar sama dengan grid berbasis float. Penulis hanya menambahkan display: flex ke container, bersama dengan beberapa class helper yang mengaburkan properti Flexbox (misalnya, class seperti .grid-vertical-align-mid adalah kebingungan align-items: center).
Satu-satunya perbedaan adalah, sekarang kolom 'dilenturkan', yang berarti kita mendapatkan gula yang saya sebutkan sebelumnya. Tapi ini masih belum menyelesaikan masalah utama yang dihadapi grid saat ini: sistem grid masih menghasilkan banyak CSS yang membengkak, dan grid masih membosankan.
- 25 templat situs web kelas atas
Masalah dengan grid
Penulis kisi biasanya mendistribusikan paket besar CSS yang dapat mengimbangi, mengurutkan sumber, menyelaraskan, dan mengubah ukuran sesuai dengan beberapa ukuran perangkat yang berubah-ubah. Mereka mengandalkan gzip untuk mengurangi beberapa kerusakan, tetapi belum semuanya. Bagaimana jika Anda tidak membutuhkan fitur tambahan tersebut?
Dengan asumsi kerangka kerja yang Anda gunakan saat ini menawarkan mixin kisi, solusi terbaik mungkin adalah mempelajarinya dan membuat kolom Anda sendiri. Ini menghasilkan sedikit pembengkakan, tetapi membatasi kisi Anda menjadi pecahan dan tidak menawarkan banyak mobilitas di antara kerangka kerja yang berbeda.
Lanjut ke edisi kedua. Desainer telah menjadi terkunci secara mental untuk membuat semua keputusan mereka berdasarkan kombinasi tertentu dari kolom berukuran sama. Akibatnya, seluruh internet mulai kabur menjadi satu 'tumpukan di seluler; 1/12 kombinasi kolom tentang distopia apa pun.
Flexbox diperkenalkan flex-grow, yang sedikit membebaskan kami. Sekarang kita dapat menyetel ukuran yang terlihat bagus dan mengisi ruang yang tersisa dengan elemen yang direntangkan, tetapi apakah talang berbaris secara konsisten di seluruh laman? Apakah area konten diatur dengan proporsi apa pun dalam pikiran, atau apakah kita kembali ke hanya sekedar mengepakkannya?
Masukkan naga
Solusi untuk kedua masalah ini dibungkus dalam fungsi yang disebut postcss-ant. Plugin PostCSS dapat digunakan dengan berbagai alat build seperti webpack, gulp, atau cukup dengan baris perintah. semut bercampur dengan mulus ke dalam CSS biasa (atau praprosesor apa pun) dengan API sederhana yang menyamarkan banyak hal yang membingungkan kalk rumus. Ini membutuhkan dua parameter seperti mixin untuk mengambil sejumlah besar ukuran ramah jaringan.
Sebuah contoh mungkin membuat ini lebih jelas: lebar: ukuran (1/2) dapatkan (1) kembali kalk (99,99% * 1/2 - (30px - 30px * 1/2)). Mari kita uraikan ini:
- ukuran () adalah daftar ukuran yang dipisahkan spasi. Ini bisa berupa kombinasi dari berbagai ukuran: angka tetap dalam bentuk panjang CSS yang valid (px, em, %); pecahan atau bilangan float (yang mengembalikan apa pun yang tersisa, tanpa bilangan tetap); dan mobil kata kunci (yang mengembalikan berapa pun ukuran yang tersisa, tanpa pecahan dan bilangan tetap)
- memetik() adalah indeks berbasis 1 yang mengambil ukuran ramah petak dari daftar Anda. Begitu ukuran (1px 2px 3px) dapatkan (2) akan kembali 2px
- Itu kalk rumusnya adalah ukuran yang ramah grid
Kami mendapatkan lebar untuk setiap kolom dalam kisi dua kolom dengan selokan 30px tunggal di antara mereka:
.grid {display: flex; flex-wrap: bungkus; } .half {width: size (1/2) get (1); / * mengembalikan kalk (99,99% * 1/2 - (30px - 30px * 1/2)) * / margin-right: 30px; / * menempatkan selokan di sisi kanan setiap kolom * /} .half: nth-child (2n + 2) {/ * dimulai pada elemen ke-2 dan mulai menghitung dengan 2s * / margin-right: 0 ; / * menghapus selokan terakhir dari setiap baris * /}
Ini sudah memberi desainer kekuatan untuk menggunakan ukuran ini di mana pun mereka mau, tetapi mari selami lebih dalam.
ukuran (100px 1/2) dapatkan (1) kembali 100px. Cukup sederhana, tetapi mengapa kita perlu menggunakan semut untuk kembali 100px ? Kita akan membahasnya sebentar lagi.
ukuran (100px 1/2) dapatkan (2) kembali kalk ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)). Sial. semut mencari tahu ukuran total bilangan tetap, lalu kembali 1/2 apa pun yang tersisa - dengan cara yang ramah jaringan.
Kita bisa menggunakan ini kalk rumus untuk membuat kisi dengan a 100px kolom dan dua 1/2 kolom seperti itu (saya akan menghilangkan .grid gaya untuk menyelamatkan pohon, tapi pastikan untuk memasukkannya ke dalam kode Anda):
.fixed-size {width: size (100px 1/2) get (1); / * mengembalikan 100px (Saya tahu ini tampak konyol tapi bersabarlah sedikit lebih lama) * / margin-right: 30px; } .half {width: size (100px 1/2) get (2); / * mengembalikan kalk ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * / margin-right: 30px; } .half: n-anak (3n + 3) {margin-right: 0; }
Sekarang kami bisa mendapatkan beberapa ukuran yang sebelumnya tidak dapat dicapai, tetapi ini belum super-fleksibel dan dapat membutuhkan banyak tulisan saat menangani banyak ukuran.
Perulangan preprocessor
Preprocessor dan PostCSS tidak selalu cocok - terutama jika sintaks kustom dilibatkan. Untungnya, API semut ramah praprosesor. Kita dapat menggunakan pengurai PostCSS seperti postcss-scss dengan plugin PreCSS, tetapi pendekatan ini menggunakan banyak plugin PostCSS yang tidak selesai / tidak dikelola yang meniru fungsi Sass dengan buruk. Menurut saya, alur kerja terbaik adalah:
- Gunakan preprocessor cepat seperti node-sass untuk menonton in.scss untuk out.css
- Gunakan PostCSS untuk menonton out.css untuk final.css
- tautan> untuk final.css di markup Anda
Ini memberi Anda sintaks preprocessor terbaik dengan semua plugin PostCSS yang Anda inginkan.
Sekarang untuk hal-hal keren. Praprosesor biasanya memiliki cara untuk mengulang sejumlah kali tertentu sambil menyediakan iterator:
@untuk $ i dari 1 sampai 3 {konten: $ i; // mengembalikan konten: 1; isi: 2; isi: 3; }
Dengan sedikit pengetahuan tentang praprosesor, Anda dapat mulai menggunakan semut dengan cara yang sangat menarik ...
$ ukuran: 100px 1/2 1/2; $ selokan: 30px; $ length: panjang ($ ukuran); .column {margin-right: $ gutter; @untuk $ i dari 1 sampai $ length {&: nth-child (# {$ length} n + # {$ i}) {width: size ($ size) get ($ i) gutter ($ gutter); }} &: n-anak (# {$ length} n + # {$ length}) {margin-right: 0; }}
Sekarang kolom berukuran tidak beraturan kami membungkus ke baris baru tanpa markup tambahan. Silakan bermain-main dengan kode ini. Coba berbagai ukuran, talang, dan tambahkan ukuran baru (seperti 100px otomatis 100px).
Ini adalah pola yang cukup umum dengan semut, jadi saya telah membungkusnya menjadi properti yang bekerja dengan vanilla CSS juga:
.grid {generate-grid: size (100px 1/2 1/2); / * Anda dapat memberikan opsi tambahan, tetapi pluck () tidak lagi diperlukan. * /}
Banyak sekali pilihan
Kisi n sangat bagus saat Anda mengetahui ukuran dan jumlah elemen yang akan diteruskan, tetapi terkadang Anda ingin membuat penampung dan membuang beberapa elemen berukuran acak di sana. Dalam kasus-kasus ini, margin negatif grid adalah taruhan terbaik Anda. Cukup lewat margin negatif semut seperti ini:
.grid {margin: 0 -15px; } .kolom {lebar: ukuran (1/3) dapatkan (1) kisi (margin negatif); margin: 0 15px; }
Kesimpulan
Contoh-contoh ini hanyalah sekilas tentang semua hal keren yang dapat dilakukan postcss-semut. Ia memiliki beberapa parameter opsional dan banyak penanganan kesalahan deskriptif, tetapi kekuatan semut sebenarnya adalah Anda.
Alat 'Bodoh' yang hanya mengembalikan sedikit data selalu merupakan alat terbaik, karena mengembalikan kekuatan ke tangan pengembang. Itulah yang dirancang untuk dilakukan postcss-ant. Jika Anda tertarik, kunjungi corysimmons.github.io/postcss-ant untuk melihat demo yang memukau dan dokumen yang menarik.
Artikel ini pertama kali tayang di majalah net terbitan 286, beli disini.
