ZURB Foundation: მომხმარებლის ინტერფეისის CSS ჩარჩო საპასუხო წინა ნაწილისთვის

2010 წელს დიზაინერულმა სააგენტომ ZURB-მ შექმნა CSS ჩარჩო, რომლის მიზანი იყო სერვისის დაწყება ხელი შეუწყოს პროტოტიპების შექმნას e შეამცირეთ განვითარების დრო. ამისათვის არჩეულ იქნა საუკეთესო ფრაგმენტები, შაბლონები და შაბლონები, რათა ისინი გაერთიანდეს ფონდში, ფრეიმვორი, რომელიც გამოქვეყნდა, როგორც ღია კოდის პროექტი 2011 წელს და რომელიც მას შემდეგ აგრძელებს თავისუფალი საზოგადოებისთვის.

ფონდი არის პასუხისმგებელი წინა ბოლო ჩარჩო, რომელიც შედგება ეფექტური HTML და CSS კომპონენტებისგან UI კონფიგურაციისთვის (მომხმარებლის ინტერფეისი), სხვადასხვა ფრაგმენტები და შაბლონები, მაგრამ ასევე მრავალი სურვილისამებრ JavaScript გაფართოება. ვებ ჩარჩოს აქვს ა მოდულის სტრუქტურა და შექმნილია სხვადასხვა მოწყობილობიდან ხელმისაწვდომი პროექტების კონფიგურაციისთვის; ნაწილდება ერთად MIT ლიცენზია და ჩამოტვირთვა შესაძლებელია ორივედან ოფიციალური მთავარი გვერდი იყოს GitHub. ფონდის 4.0 ვერსიიდან მოქმედებს სამუშაო ადგილი "პირველ რიგში მობილური", ამიტომ მას შემდეგ ჩვენ ვმუშაობთ რამდენიმე ახალი მოდულის დახმარებით მუშაობის ოპტიმიზაციისთვის და ფაილების ზომის შემსუბუქების მიზნით ჩარჩოში. ფონდის სტანდარტული ვერსიის გარდა, ZURB-მა ასევე გამოაქვეყნა სხვა ვარიანტები ელექტრონული ფოსტის საინფორმაციო ბიულეტენების განვითარებისთვის (ელფოსტის ფონდი) და ერთგვერდიანი საიტები (აპლიკაციების ფონდი).

ფონდი, საპასუხო ვებ ჩარჩო, რომელიც ხასიათდება მოდულური სტრუქტურით, უპირატესობას ანიჭებს უპირველეს ყოვლისა მოქნილობას. თქვენ გაქვთ შესაძლებლობა ჩამოტვირთვამდე გადაწყვიტოთ რომელი კომპონენტები აირჩიოთ და რომელი არა: ამ გზით თქვენ შეძლებთ შეადგინოთ ვებ კოდების კოლექციის თქვენი მორგებული ვარიანტი ისე, რომ იძულებული გახდეთ ჩამოტვირთოთ მოდულები, რომლებიც არ გჭირდებათ. და თუ ისე მოხდა, რომ მიხვდებით, რომ გჭირდებათ კომპონენტი, რომელიც არ გქონდათ შერჩეული ჩამოტვირთვის დროს, შეგიძლიათ მარტივად დაამატოთ ის მოგვიანებით ჩარჩოში. ანალოგიურად, ასევე შესაძლებელია მოდულების ამოღება, რომლებიც აღარ გამოგადგებათ: ასე რომ თქვენ ყოველთვის გარანტირებული გაქვთ შესაძლებლობა გქონდეთ მხოლოდ ის ფუნქციები, რომლებსაც ნამდვილად საჭიროდ მიიჩნევთ თქვენი ვებ პროექტის განხორციელება.

ფონდი 6.0-ისთვის თქვენ გაქვთ მეტი არჩევანი 40 კომპონენტი მიეკუთვნება შემდეგ შვიდ სექტორს:

• Grid: საპასუხო ვებ დიზაინისთვის გადამწყვეტი კომპონენტია Grid-ის მოქნილი განლაგება, სტანდარტების შესაბამისი სიგანე 1200 პიქსელით. თქვენ ასევე შეგიძლიათ გააუქმოთ ეს მოდული, თუმცა სისტემა ქმნის საფუძველს ვებ-პროექტის შესაქმნელად, რომელიც ხელმისაწვდომია სხვადასხვა მოწყობილობიდან და თავსებადია სხვადასხვა გარჩევადობის მასშტაბით. გარდა ამისა, 6.0 ვერსიიდან დაწყებული, ასევე არის შესაძლებლობა აირჩიოთ "Flex Grid" მოდული, რომელიც საშუალებას იძლევა ელემენტების კიდევ უფრო მოქნილი განლაგება CSS flexbox მოდელის საფუძველზე (როგორიცაა ჰორიზონტალური ან ვერტიკალური). ობიექტების ორგანიზაცია).

• ზოგადი: ზოგად მოდულებს შორის (რომელთაც ოფიციალურად ასევე Grid-ის ნაწილია) უპირველეს ყოვლისა არის კლასები float e ხილვადობას, რომლის წყალობითაც შეგიძლიათ defiგანსაზღვროს ქცევის წესები ცალკეული ელემენტების განლაგებასა და ხილვადობასთან დაკავშირებით; გარდა ამისა, ამ სექტორში ასევე ნახავთ კომპონენტს ფორმების შესაქმნელად, ასევე ტიპოგრაფიის მოდულს, რომელიც შეიცავს წერისა და ტექსტის ძირითად ფორმატირებას.

• კონტროლის: თქვენი ვებ პროექტის ყველა ყველაზე მნიშვნელოვანი ინტერაქტიული ელემენტი შეიცავს აქ. მაგალითად, ეს არის ღილაკები, რომლებიც მომხმარებელს სხვაგან უხელმძღვანელებს დაწკაპუნებით ან ხურავს არჩეულ ელემენტებს. ასევე არის მოდულები, რომლებთანაც შეგიძლიათ სლაიდერების ინტეგრირება და ღილაკები ჩართვის/გამორთვის რეჟიმით.

• ნავიგაცია: წინა ნაწილის კონფიგურაციაში, ნავიგაციის ელემენტები, რა თქმა უნდა, არ შეიძლება გამოტოვოთ, ასე რომ, თქვენი პროექტის განხორციელებისთვისაც კი, ZURB Foundation-თან ერთად, თქვენ გაქვთ მოდულების დიდი არჩევანი, რომლითაც უნდა დააყენოთ მენიუს ზოლები და მენიუები (ჩასაშლელი, ჩამოსაშლელი სია, საბურთალო), დაამატეთ ნავიგაციის ბილიკები (ბრაუდკრაბები) ან დაამატეთ ნომერი გვერდებზე.

• კონტეინერი: კონტეინერები არის ფანტასტიკური შესაძლებლობა, რომ ჩართოთ სხვადასხვა ელემენტები, როგორიცაა ტექსტი, სურათები ან ვიდეო საერთო სივრცეში. აქ ნახავთ კლასიკური შინაარსის ვიჯეტების სტილებს, როგორიცაა ჩამოსაშლელი მენიუები, ჩანართები, კასკადური სექტორები ან მოდალური დიალოგები.

• მედია: "მედია" განყოფილების შიგნით ნახავთ ჩარჩო მოდულებს, რომლებიც გამოგადგებათ მულტიმედიური ელემენტების ჩასართავად. მაგალითად, "Flex Video" კომპონენტი გეხმარებათვიდეოების ჩასმა და დარწმუნდება, რომ კონტენტი ადაპტირებულია ეკრანის სხვადასხვა ზომებსა და გარჩევადობის ტიპებზე. გარდა ამისა, ასევე არის კომპონენტები გადახედვის სურათებისთვის, ასევე სასარგებლო რჩევები ხელსაწყოების გამოყენებისთვის.

• ჩართვა შეერთება: საბოლოოდ შეგიძლიათ აირჩიოთ რამდენიმე ძალიან სასარგებლო გაფართოება ZURB Foundation-ისთვის, რომლებიც გაგიადვილებთ ვებ ჩარჩოსთან მუშაობას. მაგალითად, „Motion UI“ ბიბლიოთეკით, თქვენ გაქვთ შესაძლებლობა ჩამოტვირთოთ ძალიან სასარგებლო ბიბლიოთეკა, თუნდაც ხელმისაწვდომი იყოს მხოლოდ Sass ვარიანტისთვის, რაც აჩქარებს ინტერფეისის პასაჟებისა და ანიმაციების შექმნას.

გარდა ამისა, ჩამოტვირთვამდე შეგიძლიათ აირჩიოთ თუ არა defiდაასრულეთ ზოგიერთი ჩარჩოს სტანდარტული პარამეტრები. ეს მოიცავს სვეტების რაოდენობის ან სისქის და Grid სისტემის მაქსიმალური სიგანის შეცვლის ვარიანტებს, ასევე სხვადასხვა ფერის პარამეტრებს და ტექსტის მიმართულების განსაზღვრას (მარცხნიდან მარჯვნივ ან მარჯვნივ მარცხნივ). თუ პირველ რიგში გსურთ ფრეიმურის ტესტირება ცალკეული მოდულების ფუნქციონირების შესწავლის გარეშე, ასევე შეგიძლიათ ჩამოტვირთოთ ფონდი, როგორც სრული ვერსია (სრული) ან ალტერნატიულად, როგორც უფრო მსუბუქი ძირითადი ვარიანტი (Essential).

თუ კმაყოფილი ხართ CSS-ის მიერ შემოთავაზებული შესაძლებლობებით და შემდეგ უბრალოდ გადმოწერეთ სტილები გადმოწერილი CSS ფაილზე, თქვენ ნამდვილად მიიღეთ სწორი გადაწყვეტილება. თუმცა, ფონდის ჩარჩოს აქვს კიდევ ერთი განსაკუთრებული თვისება: CSS კოდის საფუძველი დაწერილია Sass style sheet ენაზე (სინტაქსურად გასაოცარი სტილის ფურცლები), რომელიც არის ე.წ. წინასწარი პროცესორი CSS-ისთვის. Sass საშუალებას გაძლევთ იმუშაოთ სტილის ფურცლებზე .scss რომელიც შემდგომში შეიძლება იყოს შედგენილი ან ტრანსკრიბირებული პოპულარულ .css ფაილებში და რომლებიც შემდეგ იკითხება და ინტერპრეტირდება ბრაუზერების მიერ.

თუ იყენებთ ZURB ჩარჩოს Sass ვარიანტს, ისარგებლებთ შემდეგი უპირატესობებით:

• გამარტივებული სინტაქსი (Sass ან CSS), რაც აადვილებს სტილის ფურცლების დაწერას

• შესაძლებლობა defiდასრულება სულ მოდელები (Mixins) განმეორებადი ფორმატების ცენტრალურად შესანახად და მათი სურვილისამებრ ინტეგრირებისთვის

• სხვადასხვა სტილის ფურცლების მარტივი კომბინაცია HTTP მოთხოვნების მინიმიზაციისთვის

• გამოყენებით ცვლადები და ფუნქციები ფერების, დისტანციების, შრიფტების და ა.შ. ცენტრალურად გაცვლა

• კოდი შეიძლება უბრალოდ სტრუქტურირებული იყოს წყალობით ბუდეს იერარქიული თანმიმდევრობით, რაც საშუალებას გაძლევთ უფრო სუფთად იმუშაოთ კოდის ძალიან ბევრი სტრიქონის გარეშე

Sass-ის შემდგენელი თავდაპირველად რუბიშია დაწერილი. თუმცა, თუ თქვენ არ იყენებთ ამ პროგრამირების ენას, არ ხართ იძულებული, დააინსტალიროთ იგი Sass-ისთვის, რადგან LibSass-ით გექნებათ ალტერნატივა დაწერილი C-ზე. სამუშაო მიმდინარეობა, ანუ Sass-ში კოდში ცვლილებების შეტანა და მათი ავტომატურად თარგმნა CSS-ში.

მე-5 ვერსიიდან Foundation 6.0-ზე გადასვლისას, ZURB-მა კიდევ ერთხელ შეამცირა ფაილის ზომა მთელი ფრეიმერის საშუალებით: თავისი 60 KB CSS და 84 KB JavaScript, ფონდი სარგებლობს რეპუტაციით, როგორც განვითარების ერთ-ერთი ყველაზე გამარტივებული პლატფორმა და წაიკითხე რომ არსებობს. ზემოხსენებული მოდულური სტრუქტურისა და პერსონალიზაციის გარკვეული თავისუფლების წყალობით, თქვენ შეგიძლიათ კიდევ უფრო შეამციროთ ჩარჩოს ზომა. მოქნილ გრიდთან და განსხვავებულთან ერთად ატრიბუტებიARIA (მაგალითად, ეფექტური კლავიატურის ნავიგაციის ტრანსპოზიციისთვის) ZURB-ის მიერ განხორციელებული ძირითადი პირობები, რომლებიც შეუცვლელია სხვადასხვა პლატფორმებზე და მოწყობილობებზე თავსებადი ვებ პროექტის რეალიზაციისთვის, შეიძლება ჩაითვალოს სრულიად დაკმაყოფილებულად. ARIA ატრიბუტები საუკეთესოდ არის დოკუმენტირებული და ხელმისაწვდომია იქ, სადაც აპირებთ თქვენი ვებსაიტის ხელმისაწვდომობის მნიშვნელოვნად ოპტიმიზაციას.

თუ თქვენ მუშაობთ ჩარჩოს Sass-ის ვერსიასთან, დარწმუნდით, რომ გააფართოვეთ თქვენი ვარიანტები დიზაინის ელემენტებისა და განლაგების კონფიგურაციისთვის, რომლებიც ჩადეთ. ამ სპეციალური სტილის ფურცლების გამოყენება სულაც არ არის ადვილი დამწყებთათვის და მოითხოვს სწავლის გარკვეულ პერიოდს, რაც ზოგადად პლატფორმისთვისაც ასეა. Მეც'გარე კომპონენტების ინტეგრაცია, ისევე როგორც მოდულები და ფონდის პროექტები სხვა ჩარჩოში ან CMS-ში ძალიან რთულია. მცირე სისუსტე, რომელსაც ZURB Foundation აჩვენებს სხვა CSS ჩარჩოებთან შედარებით, როგორიცაა Twitter Bootstrap, არის შაბლონების შეზღუდული მრავალფეროვნება და Internet Explorer-ის ძველი ვერსიების მხარდაჭერის ნაკლებობა.

ZURB Foundation თან ახლავს დეველოპერებს პირველი პროტოტიპიდან მზა ვებსაიტამდე და ხასიათდება უპირველეს ყოვლისა საკუთარი ეფექტურობის. თუ აღმოაჩენთ, რომ ზოგიერთი კომპონენტი ზედმეტია, თქვენ გაქვთ შესაძლებლობა გააუქმოთ მათი არჩევა სხვა ელემენტების ფუნქციონირებაზე ზემოქმედების გარეშე. დასასრულს, CSS ჩარჩო ხასიათდება განსაკუთრებით სუსტი კოდით, რომელიც ხაზს უსვამს ZURB "მობილური პირველის" მიერ არჩეულ ლაიტმოტივს. Ერთად უკიდურესად მოქნილი Grid სისტემა, რომელიც შეგიძლიათ სურვილისამებრ მოერგოთ Sass-ს, ჩარჩო იდეალურია განვითარებისთვის საპასუხო წინა ნაწილი რომლებსაც აქვთ მონაცემთა ჩატვირთვის მაღალი სიჩქარის და დიდი ხელმისაწვდომობის უპირატესობა, ასევე ეკრანის სხვადასხვა ზომის ადაპტაცია.

თქვენ ასევე შეგიძლიათ გამოიყენოთ ZURB ჩარჩო მორგებული და შესაძლოა უფრო რთული ვებ პროექტების შესაქმნელად, თუმცა ეს დაკავშირებულია ენერგიის მნიშვნელოვან გადატვირთვასთან და მოითხოვს ფრაგმენტების კარგად გაგებას.