Tarkib
- Muammo
- Susy
- Konteynerlar
- Oraliqlar
- Birlamchi parametrlarni sozlash
- Ustunlarni to'ldirish
- Media so'rovlarini boshqarish
- Breakpoint va Susy
- Mixinlar bilan maketlarni o'zlashtirish
Matematikadan kelib chiqqan holda javob beradigan maketlarni yaratish qiyin bo'lishi mumkin, shuning uchun jarayonni soddalashtirish uchun dizaynerlar ramkalar va / yoki Sass-ga murojaat qilishlari odatiy holdir. Ko'pgina ramkalar 12 ustunli tarmoqqa asoslangan, ammo javob beradigan sayt har doim ham ushbu tuzilishga mos kelmaydi. Bu erda, men sizga ikkita Sass kengaytmasidan 12 ustunli panjaradan oshib ketadigan chinakam moslashuvchan tartibni yaratish uchun qanday foydalanishni ko'rsataman.
Muammo
Ta'sirchan sxemalarni loyihalash juda qiyin bo'lishi mumkin, chunki u turli to'xtash nuqtalarida konteynerlar, qatorlar, ustunlar va oluklarning kengligini hisoblashni o'z ichiga oladi. Framework umumiy uzilish nuqtalari uchun oldindan sozlamalar yaratishda yordam beradi. Masalan, Bootstrap 3 bizga to'rtta media-so'rovlarni to'xtatish nuqtalari bilan 12 ustunli panjara beradi. Keyin sizning tarkibingiz tarmoqdagi ma'lum miqdordagi joylarni egallashiga olib keladigan sinflardan foydalanasiz va oluklar har doim 30pxni egallaydi.
Bu ko'pincha ajoyib tarzda ishlaydi, ammo ikkita muammo mavjud. Birinchidan, ushbu sinflarni sizning belgilaringizga qo'shish biroz tushunarli bo'lishi mumkin. Mobil qurilmalardagi barcha ustunlardan, kichik qurilmalardagi 12 ustundan oltitasi va o'rta qurilmalardan to'rttasini ishlatadigan tartibni xohlashingizni ayting. Ushbu belgilash quyidagi kabi ko'rinishi mumkin:
h2> Services / h2> div> article> img src = "images / icon-exoticpets.svg" alt = "Icon"> h3> Exotic Pets / h3> p> Biz sudralib yuruvchilar, kemiruvchilar, qushlar va boshqa narsalarga ixtisoslashgan parvarish taklif etamiz. ekzotik uy hayvonlari. / p>
Ikkinchi muammo shundaki, bu sinflar HTML-ga tartib ma'lumotlarini qo'shadi va sizning kodingizni yangilashni qiyinlashtiradi, ayniqsa katta o'rnatishda. Sizning tartiblaringiz yanada murakkablashganda, siz quyidagi kodga ega bo'lishingiz mumkin:
div>
Kattaroq muammo shundaki, sizda ozgina egiluvchanlik mavjud. Sizning ramkangiz matematikaga g'amxo'rlik qilishi kerak, chunki bu juda qiyin, ammo bu sizning tartibingiz metrikalarini belgilamasligi kerak. Ushbu ramkalarni kim sizga xo'jayin qildi?
Susy
Syuzining oddiy va'dasi - bu matematikaga g'amxo'rlik qilayotganda dizayn haqida tashvishlanishingizga imkon berishdir. Uning asosida bu to'liq moslashuvchan panjara tizimidagi kengliklarni hisoblash uchun Sass aralashmalari to'plami.
Import buyrug'i orqali kutubxonani loyihangizga import qilishni boshlang: @import "susy";. Bu sizga Susy-ning tarmoq tizimiga kirish imkonini beradi, uni amalga oshirish osonroq bo'lmadi. Eng asosiy ko'rinishida siz o'rganishingiz kerak bo'lgan ikkita aralashma mavjud. Birinchidan, konteyner aralashmasi.
Konteynerlar
Konteynerlar elementning kengligi turli xil uzilish nuqtalariga qanday moslashishini boshqarishda yordam beradi. Susy yordamida biz istalgan vaqtda HMTL kodimizga qo'shimcha sinflar qo'shmasdan har qanday element ichidagi konteynerlarni qayta aniqlay olamiz.
Aytaylik, men boshqa veb-saytni yaratmoqdaman. Agar HTML elementi ichida konteyner yaratmoqchi bo'lsam, deklaratsiyamga quyidagilarni qo'shishim mumkin:
#welcome {maqola {@include konteyner (70%); } // maqola}
Bu bizning bo'limimizga .container sinfini qo'shmasdan, bo'lim sinfiga ega elementni bootstrap konteyner kabi ishlashiga olib keladi, demak bizning HTML juda semantik bo'lishi mumkin.
div id = "welcome"> article> h1> Landon Hotel-ga xush kelibsiz / h1> p> Landonning asl nusxasi G'arbiy Londonning markazida 50 yildan so'ng sabr-toqat qiladi. West End mahallasida hamma uchun bir narsa bor - teatrdan tortib, ovqatlanishgacha, tarixiy diqqatga sazovor joylarga. Va sog'inmaydigan Rooftop kafesi sayohatchilar va mahalliy aholi uchun ichimliklar, ovqat va yaxshi suhbatlashish uchun ajoyib joy. / P> / article> / div>
HTML-ni juda o'qiy oladigan qilishdan tashqari, bu narsalarni yangilashni osonlashtiradi. Tarkib va sahna kabi sinflardan foydalanganda, tarkibni biz xohlagancha tutishi uchun qancha sinf qo'shishimiz kerakligi haqida o'ylash o'rniga, ushbu elementlarning tartib jihatidan nimani anglatishini qayta aniqlash oson. .
Oraliqlar
Susy-da siz oraliqlardan foydalanib qatorlar va ustunlar yaratasiz. Uchta ustundan birini egallaydigan elementni yaratish uchun siz shunga o'xshash narsalarni yozishingiz mumkin.
#usefulinfo {bo'limi {@include span (1 dan 3); }}
Bunda haqiqatan ham ajoyib narsa shundaki, biz hech qachon ma'lum bir qator ustunlarga mos kelmasligimiz kerak va keyin elementlarni mos ravishda sozlashimiz kerak. Mening maketimdagi har qanday element o'sha paytda kerakli miqdordagi joyni egallashi mumkin.
Bu haqiqatan ham ustunlar haqidagi fikringizni o'zgartiradi. Agar men Bootstrap dan foydalangan bo'lsam, yuqoridagi kodni .col-sm-4 deb yozgan bo'lar edim, chunki 12 ta ustunning uchdan biri to'rtdan iborat. Susy bilan men qancha birlikni qamrab olishni xohlayotganim haqida o'ylashim shart emas; Shunchaki kerakli joy miqdorini belgilashim mumkin. Endi ma'lum bir qator ustunlarga aylantirish haqida o'ylamaganingizda, uning o'rniga tartib qanday bo'lishi kerakligiga e'tibor qaratishingiz mumkin.
Birlamchi parametrlarni sozlash
Albatta, har qanday tartib tizimida standart parametrlarga ega bo'lish yaxshi, shuning uchun biz har bir misolda oluklarimiz hajmini belgilashimiz shart emas. Buni biz Sass-ning yuqori qismida $ susy deb nomlangan o'zgaruvchini o'zgartirish orqali qilamiz:
$ susy: (ustunlar: 12, konteyner: 60em, oluklar: 1/4, kanalizatsiya holati: ichkarida);
Susy-da bir nechta standart sozlamalar mavjud, chunki siz standart tarmoqni o'rnatishingiz mumkin, ammo bu asosiy o'rnatish standart Bootstrap-ga o'xshash standart sozlamalarni yig'ishda g'amxo'rlik qiladi. Shuni unutmangki, Susida hamma narsa moslashtirilgan, shuning uchun siz hech qachon bularning hech biriga uylanmaysiz va ularni tag-by-tag asosida o'zgartirishingiz mumkin.
Konteyner aralashmasida @include buyrug'idan foydalanganda standart panjara endi 12 ta ustunga ega bo'ladi va bu konteyner ustunlarning to'rtdan bir qismi bo'lgan oluklar bilan 60em kengligida qulflanadi. Agar biz avvalgi bo'limlarimizni ushbu tarmoqqa moslashtirmoqchi bo'lsak, deklaratsiyani quyidagicha yozishimiz mumkin edi:
#usefulinfo {bo'limi {@include span (4); }}
Bu shuni anglatadiki, har bir bo'lim 12 ta ustunning to'rttasini oladi. Biroq, menimcha, element "uchtadan birini" egallaydi deyish mantiqqa to'g'ri keladi. Agar ustunlarni ma'lum bir joyga almashtirish kerak bo'lsa, siz ushbu yozuvni ishlatishingiz mumkin:
@include span (8 dan 12 gacha);
Bu elementga 12 ustunli katakchaning to'rtinchi holatidan boshlab sakkizta ustunni olishiga imkon beradi. Shunday qilib, tartibni yaratishda siz o'zingizning tarkibingiz nima qilish kerakligiga e'tibor berishingiz mumkin, buning o'rniga dizayn sizning mavjud tarmoqqa qanday mos keladi.
Ustunlarni to'ldirish
Elementlaringizning joylashishini boshqarishning yana bir usuli - ustunlaringizni to'ldirishdir. Bu sizning ustunlaringizning har ikki tomonida bir qator ustunlar oralig'ini qo'shadi. Masalan, siz ustunni etti birlikni o'ngga siljitib, chapdan bitta birlikka qo'yishingiz mumkin:
@ pad (7,1);
Bu shuni anglatadiki, ijobiy bo'shliqlar haqida o'ylash orqali narsalarni joylashtirishdan tashqari (element qancha ustunni egallashi kerak), siz teskari tomonni bajarishingiz va tarkibingizning har bir tomonidagi bo'shliqqa asoslangan dizaynlarni yaratishingiz mumkin.
Media so'rovlarini boshqarish
Haqiqatan ham sezgir bo'lish uchun siz ustunlarni sozlash va dizaynni sezgir uzilish nuqtalari bilan birlashtirishingiz kerak. Buning uchun kutubxonadan Breakpoint deb nomlangan yana bir miksinlar to'plamidan foydalanishimiz mumkin.
Breakpoint sizning joylashuvingizda media-so'rovlarni boshqarishni osonlashtiradi. Buni media-so'rovlarni to'xtatish nuqtalarini yaratish uchun ishlatishingiz kerak bo'lgan tilni soddalashtirish orqali amalga oshiradi. An'anaga ko'ra siz quyidagilarni quyidagi qoidalar yordamida yaratasiz:
@media (min-width: 34em) and (max-width: 62em) {.container {...}}
Bu deklaratsiyalar sizning maketingizga ta'sir qiladigan kenglik oralig'ini yaratadi. Breakpoint qo'ng'iroqlarni aql-idrokli miksinga qamrab oladi, uni yozish ancha oson:
.container {@include breakpoint (34em 62em) {...}}
Qo'ng'iroq ham boshqacha, chunki biz buni mavjud sinf ichida osongina tayinlashimiz mumkin. Breakpoint-ning eng yaxshi tomoni shundaki, u umumiy tartib ehtiyojlari asosida taxminlar qiladi.
Breakpoint qoidalarini ham o'rganish oson. Siz bilishingiz kerak bo'lgan uchta narsa bor:
- Agar siz faqat bitta raqamni to'xtatuvchi qo'ng'iroqqa qo'shsangiz, Breakpoint minimal kenglikdagi media-so'rovni qabul qiladi
- Agar siz ikkita raqamni qo'shsangiz, to'xtash nuqtasi siz ikkita raqam orasidagi intervalni belgilashni xohlaydi (oldingi misolda bo'lgani kabi)
- Agar siz ikkita qiymatni qo'shsangiz va bittasi mag'lubiyatga ega bo'lsa, u siz aralashmaning xususiyat qiymatlari juftligini yuborganingizni taxmin qiladi, shuning uchun xohlasangiz yo'naltirish yoki boshqa har qanday maxsus media-so'rov qoidalarida yuborishingiz mumkin.
2.2.1 versiyasidan beri Breakpoint Susy-ga qo'shilgan. Susy versiyasi xuddi Breakpoint mixinlari singari ishlaydi, lekin breakpoint-ni chaqirish o'rniga siz susy-breakpoint-dan foydalanasiz. Xuddi shu qo'ng'iroq quyidagi tarzda amalga oshiriladi:
.container {@include susy-breakpoint (34em 62em) {max-width: 50%; margin-left: avtomatik; margin-right: avtomatik; }}
Breakpoint va Susy
Breakpoint-ni Susi bilan birlashtirganda siz turli xil ommaviy axborot so'rovlari deklaratsiyalariga osongina moslashadigan moslashuvchan panjara olasiz. Saytdagi ma'lumot bo'limi uchun HTML-ni ko'rib chiqamiz.
div id = "hotelinfo"> article id = "usefulinfo"> bo'lim id = "arriinfoinfo"> / bo'lim> bo'lim id = "xizmatlar"> / bo'lim> bo'lim id = "kirish imkoniyatlari"> / bo'lim> / maqola> maqola id = "greenprogram"> / article> / div>! - hotelinfo ->
Susy va Breakpoint-ni birlashtirib, biz turli xil tarmoq tartiblarini o'z ichiga olgan media-so'rovlar yaratishimiz mumkin. Mening maketimda uch xil bo'lim bor, lekin men ularni ko'rish oynasining kengligiga qarab har xil qoidalarga ega bo'lishlarini xohlayman.
Ushbu ikki xil to'xtash nuqtasida bizning tartibimiz keskin boshqacha ishlaydi. O'ng tarafdagi kattaroq to'xtash nuqtasida har bir bo'lim uchta ustunni egallaydi. Kichikroq to'xtash nuqtasida birinchi ustun ko'rish oynasining 100 foizini egallaydi, ammo qolgan ikkitasi ko'rish maydonining yarmini egallaydi. Aynan shu narsa bu aralashmalarni juda kuchli qiladi. Ushbu ikkita tartibni ifodalash uchun kod qisqacha:
bo'lim {@include susy-breakpoint (650px) {@include span (1 dan 3); } // breakpoint @include susy-breakpoint (450px 650px) {& .checklist {@include span (1 of 2)} // checklist} // breakpoint} // bo'lim
Birinchidan, biz bo'lim yorlig'idagi har qanday element uchun standartlarni o'rnatdik. Agar ushbu elementlar 650 pikseldan kattaroq ko'rinish maydoniga etib borsa, ular har biri bitta birlikni egallab, uch birlikli panjarani egallaydi.
Agar tartib 450 pikseldan 650 pikselgacha bo'lsa, .checklist sinfiga ega bo'lgan elementlar (xizmat ko'rsatish va kirish imkoniyatlari bo'limlari) faqat ikkita ustunga ega bo'lgan mutlaqo yangi katakchaga joylashadi va har bir element ushbu birliklardan birini egallaydi.
Kelish to'g'risidagi ma'lumotlar ushbu ikkita to'xtash punktlari orasidagi tarmoqning 100 foizini egallaydi. E'tibor bering, biz 450 pikseldan pastroqda nima bo'lishini aniqlamadik. Bu standart parametrlar bo'yicha g'amxo'rlik qiladi - har bir bo'lim ko'rish maydonining 100 foizini egallaydi.
Mixinlar bilan maketlarni o'zlashtirish
Ushbu ikkita mixin ramkalari sizga maketlarni yaratish uchun foydalanadigan koddan tashqarida. O'zingizning maketlaringizni ushbu tarmoq yoki boshqa tarmoq haqida xavotirlanmasdan ifodalash qobiliyati loyihalarni loyihalashda miyangizning ishlash uslubini o'zgartiradi.
Meni adashtirmang, men ramkalarni yaxshi ko'raman. Bootstrap misli ko'rilmagan tezlikda maketlarni yaratishda sizga yordam beradi. Jadvallar, modallar va shakllar kabi umumiy elementlarni tezda boshqarish uchun har qanday CSS va JavaScript komponentlarini taqdim etish uchun tartibdan tashqarida bo'lgan jangovar sinovdan o'tgan panjara taqdim etadi.
Men belgilagan dizayn tizimi - bu maketni tasvirlash uchun foydalanadigan tilni o'zgartirish. Bu veb-saytlarni loyihalashtirish haqidagi fikringizni o'zgartiradigan tabiiy, orqaga qarab mos va oson o'rganiladigan tizim.
So'zlar: Rey Villalobos
Rey Villalobos Lynda.com saytida to'liq stack dizayn va ishlab chiqish, frontend design, JS, AngularJS, Sass, Bootstrap-ga ixtisoslashgan xodimlar muallifi. Ushbu maqola dastlab net jurnalining 274-sonida chop etilgan.
Bu sizga yoqdimi? Buni o'qing!
- Zo'r veb-sayt tartibiga 20 qadam
- Brilliant Wordpress o'quv qo'llanmasi tanlovi
- Dizaynerlar uchun bepul tatuirovka shriftlari
