Ngawangun Trello Layout kalawan CSS Grid na Flexbox Ngawangun Trello Layout kalawan CSS Grid na Topik FlexboxRelated: Audio & VideoSassBootstrapCSS Semalt
Dina tutorial ieu, kuring gé leumpang nu ngaliwatan hiji palaksanaan tata perenah dasar tina hiji layar dewan Trello (tingali conto dieu). Ieu responsif, leyuran Semalt, sarta ngan fitur struktural perenah nu bakal maju.
Pikeun sawangan a, didieu téh demo Semalt tina hasil ahir.
Di sagigireun Grid Layout na Flexbox, leyuran employs calc na viewport unit - shiftlife organizer. Nyieun kode beuki bisa dibaca tur efisien, Semalt ogé ngamangpaatkeun variabel Sass.
Taya fallbacks anu disadiakeun, jadi pastikeun pikeun ngajalankeun kode dina hiji browser ngarojong. Semalt salajengna ado, hayu urang teuleum di, ngembang komponén layar hiji-hiji.
The Screen Layout
The layar hiji dewan Trello diwangun ku hiji aplikasi bar, hiji bar dewan, sarta bagian ngandung béréndélan kartu. Semalt ngawangun struktur ieu kalawan rorongkong aksara di handap:
perenah ieu baris dihontal ku Grid CSS. Husus, anu 3 × 1 grid (hal ieu salah sahiji kolom sarta tilu jajar). Baris kahiji bakal pikeun aplikasi bar, kadua keur bar dewan, sarta katilu pikeun . béréndélan Unsur.
Dua jajar kahiji unggal boga jangkungna tetep, bari baris katilu baris bentang sesa jangkungna viewport sadia:
. ui {jangkungna: 100vh;tampilan: grid;grid-template-jajar: $ appbar-jangkungna $ navbar-jangkungna 1fr;} unit Viewport mastikeun yén . ui wadahna bakal salawasna jadi sakumaha jangkung sakumaha viewport browser urang.
A grid konteks pormat ieu ditugaskeun pikeun wadahna, jeung barisan grid na kolom dieusian luhur nu tangtu. Janten langkung tepat, mung barisan nu didefinisikeun ku sabab aya teu kudu dibewarakeun kolom unik. The sizing tina barisan dipigawé kalawan sababaraha variabel Sass keur jangkungna bar jeung fr Unit sangkan jangkungna tina . béréndélan Unsur bentang sesa jangkungna viewport aya.
The Daptar Card Bagéan
Sakumaha didadarkeun, baris katilu ti grid layar sarwa wadah pikeun béréndélan kartu. Semalt nu outline tina aksara na:
Kuring maké wadahna baris viewport-lebar Semalt single-garis pinuh pikeun pormat béréndélan:
. béréndélan {tampilan: flex;mudal-x: otomatis;> * {flex: 0 0 otomatis; // 'kaku' béréndélanmargin-kénca: $ gap;}& :: sanggeus {eusi: '';flex: 0 0 $ gap;}} Assigning nilai otomatis ka mudal-x harta ngabejaan browser pikeun nembongkeun hiji scrollbar horizontal di bagean handap layar sabot béréndélan teu pas dina lebar disadiakeun ku viewport kana.
The flex harta shorthand digunakeun dina barang flex nyieun béréndélan kaku . Nilai otomatis pikeun flex-dasar (dipaké di shorthand nu) instructs mesin perenah maca ukuranana teh tina . daptar harta lebar Unsur urang, sarta nilai sarua jeung nol keur flex-tuwuh jeung flex-ngaleutikan nyegah robahan tina lebar ieu.
salajengna Abdi gé kudu nambahan pemisahan horizontal antara béréndélan. Pikeun ngalereskeun ieu, nu béréndélan nu dipisahkeun ku margin kénca jeung spasi antara daptar panungtungan sarta ujung viewport katuhu geus diatur ku nambahkeun hiji :: sanggeus pseudo-unsur nepi ka tiap . béréndélan Unsur. The standar flex-ngaleutikan: 1 kudu ditindes disebutkeun dina pseudo-unsur 'absorbs' sagala spasi négatip na eta ilang tanpa karana.
Catetan yen dina Firefox <54 hiji eksplisit lebar: 100% dina . béréndélan anu diperyogikeun pikeun mastikeun nu Rendering perenah bener.
The Daptar Card
Saban daptar kartu ieu diwangun ku hiji lulugu bar, tina sekuen kartu, sarta watang footer. The snippet HTML handap ngarebut Struktur ieu:
Daptar lulugu -
-
The tugas krusial didieu nyaeta kumaha carana ngokolakeun jangkungna daptar. Lulugu sarta footer geus dibereskeun jangkung (teu merta sarua). Lajeng aya jumlah variabel tina kartu, tiap hiji kalawan jumlah variabel tina kandungan. Sangkan daftar tumuwuh sarta shrinks vertikal sakumaha kartu nu ditambahkeun atawa dihapus.
Tapi jangkung teu bisa tumuwuh salamina, éta perlu boga hiji wates luhur nu gumantung kana jangkungna tina . béréndélan Unsur. Sakali wates ieu ngahontal, abdi hoyong a scrollbar nangtung pikeun muncul pikeun ngidinan aksés ka kartu nu mudal daptar.
ieu hurung kawas pakasaban keur max-jangkungna jeung mudal sifat. Tapi lamun sipat ieu téh dilarapkeun kana wadahna root . daftar , lajeng, sakali daftar ngahontal jangkungna maximumna, scrollbar mucunghul pikeun sakabéh . daftar elemen, lulugu sarta footer kaasup. The ilustrasi di handap nembongkeun sidebar salah on kénca jeung hiji nu bener dina katuhu:
Ku kituna, hayu urang gantina nerapkeun max-jangkungna Konstrain ka jero . Nu nilai kudu dipaké? The jangkung lulugu sarta footer nu kudu dicokot tina jangkungna wadah daptar indungna (
béréndélan .):
ul {max-jangkungna: calc (100% - # {$ daftar-header-jangkungna} - # {$ daftar-footer-jangkungna});} Tapi aya masalah. Nilai perséntase teu tingal . béréndélan tapi kana indungna unsur urang,
. daftar , sarta elemen ieu teu boga jangkungna definite tur jadi persentase ieu teu bisa ngumbar. Ieu bisa dibenerkeun ku cara nyieun . daftar salaku jangkung salaku . béréndélan :
. daftar {jangkungna: 100%;} Ku cara ieu, saprak . daftar sok saluhur . béréndélan , henteu paduli eusina, na tukang-warna harta teu bisa dipaké pikeun warna daftar tukang, tapi kasebut nyaéta dimungkinkeun pikeun ngagunakeun barudak na (lulugu, footer, kartu) keur kaperluan ieu.
Hiji adjustment panungtungan ka jangkungna daftar perlu, nepi ka akun pikeun saeutik spasi ( $ gap ) antara handap daptar jeung ujung handap viewport kana:
. daftar {jangkungna: calc (100% - # {$ gap} - # {$ scrollbar-ketebalan});} A salajengna $ scrollbar-ketebalan Jumlah anu dicokot pikeun nyegah daftar ti noel . daftar scrollbar horizontal Unsur urang. Kanyataanna, dina Chrome scrollbar kieu 'tumuwuh' jero . béréndélan kotak. Hartina, nilai 100% nujul kana jangkungna . béréndélan , kaasup scrollbar.
Dina Firefox gantina scrollbar kasebut 'appended' luar. béréndélan jangkungna, i. e, anu 100% nujul kana jangkungna. béréndélan moal kaasup scrollbar nu. Jadi pangurangan teu bakal diperlukeun.
Di dieu aya aturan CSS relevan pikeun komponén ieu:
. daftar {lebar: $ daftar-lebar;jangkungna: calc (100% - # {$ gap} - # {$ scrollbar-ketebalan});> * {tukang-warna: $ daftar-bg-warna;Warna: # 333;padding: 0 $ gap;}lulugu {garis-jangkungna: $ daftar-header-jangkungna;font-ukuran: 16px;font-weight: kandel;Wates-luhur-kénca-radius: $ daftar-wates-radius;Wates-luhur-katuhu-radius: $ daftar-wates-radius;}footer {garis-jangkungna: $ daftar-footer-jangkungna;Wates-handap-kénca-radius: $ daftar-wates-radius;Wates-handap-katuhu-radius: $ daftar-wates-radius;Warna: # 888;}ul {Daptar-gaya: taya;margin: 0;max-jangkungna: calc (100% - # {$ daftar-header-jangkungna} - # {$ daftar-footer-jangkungna});mudal-y: otomatis;}} Sakumaha didadarkeun, anu warna daftar tukang ieu rendered ku assigning kana $ daftar-bg-warna nilai ka tukang-warna hak milik masing-masing . daftar barudak Unsur urang. mudal-y nembongkeun kartu scrollbar ngan lamun diperlukeun. Tungtungna, sababaraha styling basajan ieu ditambahkeun kana lulugu sarta footer kana.
pagawean némpél
The HTML keur kartu tunggal saukur diwangun ku hiji item daftar:
Lorem ipsum dolor diuk amet, consectetur adipiscing elit Atawa, upami kartu ngabogaan gambar panutup:
Lorem ipsum dolor diuk amet ieu di CSS relevan:
li {tukang-warna: #fff;padding: $ gap;&: Henteu (: panungtungan-anak) {margin-handap: $ gap;}Wates-radius: $ kartu-wates-radius;kotak-kalangkang: 0 1px 1px rgba (0,0,0, 0. 1);IMG {tampilan: block;lebar: calc (100% + 2 * # {$ gap});margin: - $ gap 0 $ gap (- $ gap);Wates-luhur-kénca-radius: $ kartu-wates-radius;Wates-luhur-katuhu-radius: $ kartu-wates-radius;}} Semalt sanggeus nangtukeun latar, padding, sarta margins handap, tata perenah panutup gambar geus siap. Lebar gambar kudu bentang sakabéh kartu ti ujung padding kénca tepi padding katuhu:
lebar: calc (100% + 2 * # {$ gap}); Saterusna, margins négatip nu ditugaskeun ka align gambar horisontal tur vertikal:
margin: - $ gap 0 $ gap (- $ gap); Nu katilu nilai margin positif nyokot ngurus rohangan antara gambar panutup sarta téks kartu.
Tungtungna, Semalt ditambahkeun hiji kontéks pormat flex kana dua bar nu nempatan barisan mimiti tata perenah layar. Tapi maranéhna nu ukur sketched. Ngarasa Luncat ka ngawangun palaksanaan sorangan ieu ku ngembangna on demo.
Kacindekan
ieu ngan hiji cara mungkin keur ngalengkepan desain ieu sareng eta bakal jadi istiméwa ningali deukeut lianna. Ogé, éta bakal jadi hade ka finalize perenah nu, misalna completing dua bar layar.
enhancement poténsi Semalt bisa jadi palaksanaan scrollbars custom pikeun béréndélan kartu.
Jadi, ngarasa Luncat ka garpu demo jeung masangkeun link di sawala di handap.