ZURB Vəqfi: Həssas bir cəbhə üçün İstifadəçi İnterfeysi CSS çərçivəsi

2010-cu ildə ZURB dizayn agentliyi xidmətə başlamaq məqsədi ilə CSS çərçivəsini yaratdı. prototiplərin yaradılmasını asanlaşdırır e inkişaf müddətlərini qısaldır. Bunu etmək üçün, 2011-ci ildə açıq mənbə layihəsi kimi nəşr edilən və o vaxtdan bəri ictimaiyyət üçün pulsuz olaraq davam edən Fond çərçivəsində onları bir araya gətirmək üçün ən yaxşı fraqmentlər, naxışlar və şablonlar seçildi.

Foundation UI konfiqurasiyası üçün səmərəli HTML və CSS komponentlərindən ibarət olan cavab verən qabaqcıl çərçivədir (User Interface), müxtəlif fraqmentlər və şablonlar, həm də çoxsaylı isteğe bağlı JavaScript genişləndirmələri. Veb çərçivəsi var modul quruluşu və müxtəlif cihazlardan əldə edilə bilən layihələrin konfiqurasiyası üçün nəzərdə tutulmuşdur; ilə paylanır MIT lisenziyası və hər ikisindən yükləmək olar rəsmi ana səhifə olmaq Github. Fondun 4.0 versiyasından işçi əsas tətbiq edilir "Əvvəlcə Mobil", buna görə də o vaxtdan biz performansı optimallaşdırmaq və çərçivə daxilində faylların ölçüsünü yüngülləşdirmək üçün bir neçə yeni modulun köməyi ilə işləyirik. Fondun standart versiyasına əlavə olaraq, ZURB e-poçt xəbər bülletenlərinin hazırlanması üçün digər variantları da dərc etmişdir (E-poçt üçün fond) və bir səhifəli saytlar (Proqramlar üçün təməl).

Fond, modul quruluşu ilə xarakterizə olunan həssas veb çərçivə, hər şeydən əvvəl çeviklikdən faydalanır. Yükləmədən əvvəl hansı komponentləri seçmək və hansını etməmək barədə qərar vermək imkanınız var: beləliklə, ehtiyacınız olmayan modulları yükləmək məcburiyyətində qalmadan veb kod kolleksiyasının öz fərdiləşdirilmiş variantını tərtib edə bilərsiniz. Yükləmə zamanı seçmədiyiniz komponentə ehtiyacınız olduğunu başa düşsəniz, onu daha sonra asanlıqla çərçivəyə əlavə edə bilərsiniz. Eyni şəkildə, artıq sizin üçün faydalı olmayan modulları silmək də mümkündür: beləliklə, sizə həmişə yalnız həqiqətən zəruri hesab etdiyiniz funksiyalara sahib olmaq imkanı verilir. veb layihənizin həyata keçirilməsi.

Foundation 6.0 üçün daha çox seçiminiz var 40 komponent aşağıdakı yeddi sektora aiddir:

• tor: Həssas veb dizaynı üçün həlledici komponent 1200 piksel standarta uyğun eni olan Şəbəkənin çevik tərtibatıdır. Siz həmçinin bu modulun seçimini ləğv edə bilərsiniz, lakin sistem müxtəlif cihazlardan əldə edilə bilən və müxtəlif ayırdetmə miqyasında uyğun gələn veb layihəsinin dizaynı üçün əsas təşkil edir. Bundan əlavə, 6.0 versiyasından başlayaraq, CSS flexbox modeli (məsələn, üfüqi və ya şaquli) əsasında işləyərək elementlərin daha çevik yerləşdirilməsinə imkan verən "Flex Grid" modulunu seçmək imkanı da var. obyektlərin təşkili).

• Ümumi: Ümumi modullar arasında (rəsmi olaraq Grid də bir hissəsidir) ilk növbədə siniflər var. axıtma e görünmə dərəcəsi, bunun sayəsində edə bilərsiniz defivahid elementlərin yerləşdirilməsi və görünməsi ilə bağlı davranış qaydalarını müəyyən etmək; Bundan əlavə, bu sahədə siz həm də formaların yaradılması komponentini, həmçinin yazı və mətn üçün əsas formatları özündə birləşdirən mətbəə modulunu tapa bilərsiniz.

• Nəzarət: Veb layihənizin bütün ən vacib interaktiv elementləri buradadır. Məsələn, bunlar istifadəçini kliklə başqa yerə istiqamətləndirən və ya seçilmiş elementləri bağlayan düymələrdir. Sürgüləri birləşdirə biləcəyiniz modullar da var düymələr açma / söndürmə rejimi ilə.

• naviqasiya: Ön tərəfin konfiqurasiyasında naviqasiya elementləri, şübhəsiz ki, əskik ola bilməz, belə ki, layihənizin ZURB Fondu ilə həyata keçirilməsi üçün belə, quraşdırmaq üçün çox sayda modulunuz var. menyu barları və menyular (açılan, açılan siyahı, açılan), naviqasiya yolları əlavə edin (çörək qırıntıları) və ya nömrəni səhifələrə əlavə edin.

• Konteyner: Konteynerlər mətn, şəkillər və ya videolar kimi müxtəlif elementləri ümumi məkana daxil etmək üçün əla fürsətdir. Burada siz açılan menyular, nişanlar, kaskad sektorlar və ya modal dialoqlar kimi klassik məzmun vidjetləri üçün üslubları tapa bilərsiniz.

• media: “Media” bölməsində siz multimedia elementlərinin birləşdirilməsi üçün faydalı olacaq çərçivə modullarını tapa bilərsiniz. Məsələn, "Flex Video" komponenti sizi dəstəkləyirvideoların daxil edilməsi və məzmunun müxtəlif displey ölçülərinə və ayırdetmə növlərinə uyğunlaşdırılmasını təmin edir. Bundan əlavə, şəkillərin önizləməsi üçün komponentlər və alətlərdən istifadə üçün faydalı məsləhətlər də var.

• Plug-in: Nəhayət, ZURB Fondu üçün veb çərçivə ilə işləməyinizi asanlaşdıran çox faydalı genişləndirmələr seçə bilərsiniz. Məsələn, “Motion UI” kitabxanası ilə siz çox faydalı kitabxana yükləmək imkanınız var, hətta yalnız Sass variantı üçün mövcud olsa belə, bu, UI keçidlərinin və animasiyaların yaradılmasını asanlaşdırır.

Həmçinin, yükləməzdən əvvəl, olub olmadığını seçə bilərsiniz defibəzilərini bitir çərçivə üçün standart parametrlər. Bunlara sütunların sayını və ya qalınlığını və Grid sisteminin maksimum enini dəyişdirmək üçün seçimlər, həmçinin müxtəlif rəng parametrləri və mətnin istiqamətini təyin etmək (soldan sağa və ya sağdan sola) daxildir. Fərdi modulların işləməsini öyrənmədən əvvəlcə çərçivəni sınamaq istəyirsinizsə, Foundation-u tam versiya kimi yükləyə bilərsiniz (tam) və ya alternativ olaraq daha yüngül əsas variant kimi (əsas).

Əgər CSS-nin təklif etdiyi imkanlardan razısınızsa və sonra sadəcə yüklənmiş CSS faylındakı üslubları transkripsiya etsəniz, şübhəsiz ki, düzgün qərar verdiniz. Bununla belə, Foundation çərçivəsinin daha bir xüsusi xüsusiyyəti var: CSS kodunun əsası Sass stil cədvəli dilində yazılmışdır (Sintaktik Awesome Stil Cədvəlləri), CSS üçün sözdə preprosessordur. Sass stil vərəqləri üzərində işləməyinizə imkan yaradır .scss sonradan populyar .css fayllarına yığıla və ya transkripsiya edilə bilər və sonra brauzerlər tərəfindən oxunur və şərh edilir.

ZURB çərçivəsinin Sass variantından istifadə etsəniz, aşağıdakı üstünlüklərdən istifadə edəcəksiniz:

• Sadələşdirilmiş sintaksis (Sass və ya CSS) üslub vərəqlərinin yazılmasını asanlaşdırır

• İmkanı defibitir dei modellər (Mixins) təkrarlanan formatları mərkəzləşdirilmiş şəkildə saxlamaq və onları öz istəyi ilə inteqrasiya etmək üçün

• Müxtəlif üslub vərəqlərinin sadə birləşməsi HTTP sorğularını minimuma endirmək üçün

• Istifadə olunur dəyişənlər və funksiyalar mərkəzləşdirilmiş şəkildə rəngləri, məsafələri, şriftləri və s. mübadilə etmək

• Kod sayəsində sadəcə strukturlaşdırıla bilər Yuva iyerarxik qaydada, çoxlu kod sətirləri olmadan daha təmiz işləməyə imkan verir

Sass tərtibçisi əvvəlcə Ruby dilində yazılmışdır. Bununla belə, bu proqramlaşdırma dilindən istifadə etmirsinizsə, onu Sass üçün quraşdırmaq məcburiyyətində deyilsiniz, çünki LibSass ilə sizin C dilində yazılmış alternativiniz olacaq. LibSass istifadə edilən bütün əməliyyat sistemləri ilə işləyir və onu Node.js-də asanlıqla quraşdıra bilərsiniz. iş axını, yəni Sass-da kodda dəyişikliklər etmək və onları avtomatik olaraq CSS-ə tərcümə etmək.

5-ci versiyadan Foundation 6.0-a keçidlə ZURB bütün çərçivənin fayl ölçüsünü bir daha kiçildmişdir: 60 KB CSS və 84 KB JavaScript ilə Fond proqram təminatı reputasiyasına malikdir. ən sadələşdirilmiş inkişaf platformalarından biridir və orada olduğunu oxuyun. Yuxarıda qeyd olunan modul quruluş və müəyyən bir fərdiləşdirmə azadlığı sayəsində siz hətta çərçivənin ölçüsünü daha da kiçilədə bilərsiniz. Çevik Grid və müxtəlif ilə birlikdə atributlarıARIA ZURB tərəfindən həyata keçirilən (məsələn, effektiv klaviatura naviqasiyasının köçürülməsi üçün) müxtəlif platformalarda və cihazlarda uyğun gələn veb-layihənin həyata keçirilməsi üçün zəruri olan əsas şərtlər tamamilə təmin edilmiş hesab edilə bilər. ARIA atributları ən yaxşı sənədləşdirilmişdir və veb saytınızın əlçatanlığını əhəmiyyətli dərəcədə optimallaşdırmaq niyyətində olduğunuz yerlərdə mövcuddur.

Çərçivənin Sass versiyası ilə işləyirsinizsə, daxil etdiyiniz dizayn elementlərini və planlarını konfiqurasiya etmək üçün seçimlərinizi genişləndirdiyinizə əmin olun. Bu xüsusi üslub vərəqlərindən istifadə yeni başlayanlar üçün heç də asan deyil və müəyyən bir öyrənmə müddəti tələb edir, bu, ümumiyyətlə platforma üçün də doğrudur. Mən də həmçinin'xarici komponentlərin inteqrasiyası, eləcə də başqa bir çərçivədə və ya CMS-də modullar və Vəqf layihələri çox mürəkkəbdir. Twitter Bootstrap kimi digər CSS çərçivələri ilə müqayisədə ZURB Fondunun göstərdiyi kiçik zəif cəhətlər şablonların məhdud çeşidi və Internet Explorer-in köhnə versiyaları üçün dəstəyin olmamasıdır.

ZURB Fondu tərtibatçıları ilk prototipdən istifadəyə hazır veb-sayta qədər müşayiət edir və hər şeydən əvvəl özünəməxsusluğu ilə xarakterizə olunur. səmərəlilik. Bəzi komponentlərin artıq olduğunu görsəniz, digər elementlərin funksionallığına təsir etmədən onların seçimini ləğv etmək seçiminiz var. Sonda, CSS çərçivəsi ZURB "Mobile First" tərəfindən seçilmiş leytmotivi vurğulayan xüsusilə incə kodla xarakterizə olunur. Birlikdə son dərəcə çevik Grid sistemi, isteğe bağlı olaraq Sass ilə uyğunlaşdıra biləcəyiniz çərçivə inkişaf etdirmək üçün idealdır cavab verən ön hissə məlumatların yüklənməsində yüksək sürətə və əla əlçatanlığa malik olmaq, həmçinin müxtəlif ekran ölçülərinə uyğunlaşma üstünlüyü var.

Siz həmçinin ZURB çərçivəsini fərdiləşdirilmiş və bəlkə də daha mürəkkəb veb-layihələrin yaradılması üçün istifadə edə bilərsiniz, lakin bu, enerjinin xeyli yüklənməsi ilə bağlıdır və fraqmentlərin yaxşı başa düşülməsini tələb edir.