ტოპ 5 ჩატვირთვის ალტერნატივა

Bootstrap ყველგან არის, მაგრამ ეს ყოველთვის არ არის სწორი ინსტრუმენტი სამუშაოსთვის. აქ მოცემულია რამდენიმე შესანიშნავი ალტერნატივა!


თუ ამ დღის განმავლობაში შემთხვევით შეამოწმებთ ვებ – გვერდის საწყის წყაროს კოდს, შანსი გაქვთ იპოვოთ Bootstrap- ის ქვეშ. ჩვენ ყველანი ისე ვიყავით შეჩვეულები, როგორიცაა კონტეინერი სითხე, მწკრივი, col-sm-6 და ა.შ., რომ ძნელი წარმოსადგენი არაა, რომ წინა საფეხურის განვითარების ნებისმიერი სხვა სტილიც კი შესაძლებელია. ასე რომ, როდესაც შემდეგი პროექტი უნდა ავაშენოთ, Bootstrap- ს ქვეცნობიერად მივაღწევთ. ამის თქმით, პოპულარობა არ გახდის Bootstrap- ს ყველა პროექტს და საჭიროებას.

სინამდვილეში, ძალიან მჭლე ფრონტებისთვის, ჩატვირთვა ყველა Bootstrap CSS და JS შეიძლება გამოიწვიოს დიდი bloat.

ამ სტატიას ორი მიზანი აქვს:

  1. უზრუნველყეთ Bootstrap– ის მსგავსი არა-Bootstrap– ის მსგავსი ცოცხალი ალტერნატივები
  2. აუხსენით, თუ რატომ შეიძლება გსურთ Bootstrap- ზე ეს ალტერნატივები განიხილონ

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

და ამის გათვალისწინებით, მოდით განვიხილოთ რა ალტერნატივები გვაქვს.

Flexbox Grid

ერთი წუთის განმავლობაში იფიქრეთ ამაზე: ყველაზე დიდი მიზეზი, რის გამოც Bootstrap- ის გამოყენება დაიწყეთ და ისევ იყენებთ, ეს არის მისი ქსელის სისტემა. რა თქმა უნდა, მას სჩვევია რიგის, col-md-6 და ა.შ., კლასები, მაგრამ ახლა უკვე მეორე ბუნებაა ვიფიქროთ განლაგება სტრიქონების, სვეტების, ოფსეტების და ა.შ..

თუ საკუთარ თავთან გულწრფელი ხართ, აღმოაჩენთ, რომ Bootstrap- ში ყველაფერი დანარჩენი სამუშაოა. ტონის გაკვეთილები უნდა გახსოვდეთ, აკეთებთ თუ არა ფორმებს, ნავიგაციას, ღილაკებს, ცხრილებს თუ სხვა რამეებს. თუ მე მგავხარ, თქვენ ჯერ არ მიეჩვიეთ ყველა კლასს და რას აკეთებენ ისინი, და ხშირად იყენებთ Bootstrap- ს მხოლოდ ქსელისთვის და თავად დაწერეთ ყველა სხვა CSS.

თუ დიახ, შენ ბევრად უკეთესად შეძლებ Flexbox Grid.

Flexbox Grid, როგორც სახელი გვთავაზობს, არის ქსელის სისტემა, რომელიც ემყარება CSS- ს Flexbox თვისებები. ამასთან, CSS ტექნიკისგან განსხვავებით, ყველა სირთულე ლამაზად არის ამოღებული, ასე რომ თქვენ ფოკუსირდებით მხოლოდ ელემენტების განთავსებაზე, როგორც გსურთ. საუკეთესო ნაწილი ის არის, რომ ყველა კოდი და კლასის სახელები ასახავს იმას, რაც გსურთ Bootstrap 4-ში, რაც ნიშნავს, რომ ამ ორ ინსტრუმენტს შორის გადართვა მოითხოვს ნულოვან გონებრივ ხახუნს. მაგალითად, აქ მოცემულია კოდი “Flexbox Grid” – ში “გარშემო გარშემო”:

გარშემო

გარშემო

გარშემო

ამ ქსელის სისტემის მინიმიზებული CSS ფაილი არის მხოლოდ 10.7 KB, რომელიც დაზოგავს რამდენიმე ასეულ კბ-ს გადმოტვირთვის საბოლოო ზომაში. ამ დღეებში Flexbox Grid ჩემი რჩეულია, რადგან არ მსურს Bootstrap- ს ვებრძოლო, რომ ის სრულად მორგდეს. მე მომწონს ვანილის ელემენტებით დაწყება და მათი სტილი სტილი, Flexbox Grid- ის გამოყენებით სადაც არ უნდა დამჭირდეს.

Ვისწავლოთ Flexbox აქ, ონლაინ რეჟიმში.

PureCSS

არ იქნება კარგი, თუ Bootstrap დაიყო მოდულებად და მხოლოდ იმ მოდულის იმპორტი შეძლებდით?

კარგად, PureCSS წინ წავიდა და მხოლოდ ეს გაკეთდა – ეს არის მოდულის ერთობლიობა, რომელიც მოიცავს ვებ – გვერდის სხვადასხვა ფუნქციურ სფეროს. თქვენ შეგიძლიათ ჩამოტვირთოთ ერთი ან ყველა, ხოლო გადმოტვირთვის ზომა არ აღემატება 3.7 KB!

დიახ, თქვენ სწორად წაიკითხეთ.

ყველა მოდული, როდესაც ერთმანეთთან არის დაკავშირებული და gzipped არის 3.7 KB, თუმცა ინდივიდუალურად ისინი უფრო მეტს შეადგენს. ქსელის მოდული არის მხოლოდ 0.8 KB, ხოლო ბაზის მოდული 1.0 KB. გუნდის უკან PureCSS ამბობს, რომ იგი მთლიანად აშენდა მობილური მოწყობილობების გათვალისწინებით და ამიტომ CSS– ის ყველა სტრიქონი ფრთხილად იქნა გადამოწმებული ეფექტურობისთვის, სანამ არ შევიდოდა.

მოდით ვთქვათ, რომ თქვენ გჭირდებათ მხოლოდ ქსელის და ფორმების მოდული. აბა, უბრალოდ გადმოწერეთ ეს ორი (ბაზის მოდულთან ერთად) და თქვენ უნდა გაკეთდეს 3,4 კბელზე ნაკლებ დროში! არ არის საჭირო CSS ჩართვა ღილაკებიდან, მაგიდებიდან და მენიუს მოდულებიდან, თუ არ აპირებთ მათ გამოყენებას.

PureCSS– ს აქვს თავისი კლასები, და ამის შედეგად მიღებული კოდი არ ასახავს Bootstrap- ს, რომელსაც შეიძლება ძალიან მიეჩვიოთ:

ლორემ იფსუმი

დელორ სიტ ამეტი

პროიდული შრომა

სამლოცველო

შეამჩნევთ, რომ 12 – სვეტიანი ქსელი აღარ არის. PureCSS– ს აქვს თავისი ქსელის სისტემა, რომელიც განსაზღვრავს თუ რა სიგანე უნდა მიიღოს სვეტმა. ამრიგად, სუფთა u-lg-1-4 ნიშნავს, რომ ამ ელემენტმა უნდა მიიღოს დიდი ეკრანზე არსებული სიგანის 1/4 ან 25%. სიგანე, როგორც 1/5 მრავლობითი რაოდენობა ასევე შესაძლებელია.

საერთო ჯამში, PureCSS არის გამათავისუფლებელი და გასაოცარი CSS ინსტრუმენტი (ჩარჩო?), რომლის საშუალებითაც შეგიძლიათ აირჩიოთ და აირჩიოთ საჭიროების შემთხვევაში. ამით ნათქვამია, რომ ეს არის შესყიდვისა და სწავლის მრუდი საკმაოდ, რადგან თქვენ უნდა ისწავლოთ ახალი (ოდნავ განსხვავებული) გზა.

PureCSS- ს აქვს ასევე საკუთარი კლასები და ნაგულისხმევი სტილი, ასე რომ, Bootstrap- ისგან ის არც თუ ისე განსხვავდება..

ზმიტი

ზმიტი ჩარჩო ამ სიაში უცნაური ადამიანია. დიახ, ეს არის UI– ს მშენებლობის ჩარჩო, მაგრამ ის მიმართულია UI– ს სპეციფიკური ტიპებისთვის: იმიტირება.

არის დრო, როდესაც პროდუქტის ფუნქციონირების საჩვენებლად ფრონტის განლაგება მოგიწევთ. ამის გაკეთების იდეალური მეთოდი, რა თქმა უნდა, იქნებოდა UI დიზაინერის / დეველოპერის ჩართულობისთვის და შექმნის მაკეტების გაკეთება ერთ – ერთ მოწინავე მავთულხლართების ინსტრუმენტზე (Moqups, Blasmic და ა.შ., გონს მოვიდა). გვერდები პიქსელით სრულყოფილი იქნება, ფერების სქემა დახვეწილი და კარგად შერჩეული, ხოლო გვერდები ღია იქნება მონაწილეობისთვის, მიმოხილვები, კომენტარები და ა.შ..

მაგრამ რეალურ ცხოვრებაში არ არის იდეალური და ხშირად შენ ერთადერთი ადამიანი ხარ სამსახურზე და უნდა ატარო ყველა ქუდი და დაასრულო საქმე. იმ დროს, გსურთ ჩარჩო, რომელიც:

  • საშუალებას გაძლევთ კოდირება HTML / CSS
  • მსუბუქი წონაა
  • ფუნდამენტური კომპონენტების ფართო კოლექცია აქვს
  • აქვს წესიერი და თანმიმდევრული სტილის ენა
  • თუ ეს შესაძლებელია, ჰგავს wireframe დიზაინის ”რუხი” ტონს
  • მარტივია სწავლა
  • გააჩნია CSS წინამორბედის რამდენიმე ინტეგრირებული

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

ხის ხედი

პური

ჩანართები

კიდევ ბევრი სიკეთის შესასწავლად. შეამოწმეთ ისინი აქ.

მოდით, გადახედოთ რას გამოიყურება კოდი. აქ მოცემულია, თუ როგორ შეგიძლიათ გამოიყენოთ ქსელის სისტემა Zimit:

4 სვეტი
4 სვეტი

4 სვეტი
4 სვეტი

აქ “c” ნიშნავს “სვეტს”, ასე რომ “c4” ნიშნავს სვეტს, რომელიც მოიცავს ოთხ ერთეულს (ქსელი 12-ზომისაა, ისევე როგორც Bootstrap- ის მსგავსი). Bootstrap- ის მსგავსი და ძალიან ინტუიციურია ჩემი აზრით.

მთლიანობაში, Zimit არის სრული და მარტივი ჩარჩო, რომ შემუშავდეს UI პროტოტიპები, რომლებიც საპასუხოა და სწრაფად გამოიყურება კარგად. ეს უკეთესია ვიდრე Bootstrap (როდესაც საქმე პროტოტიპიზაციას ეხება), რადგან Bootstrap გაცილებით დიდი ჩამოტვირთვაა და შედეგად მიღებული დიზაინი კარგად არის tacky.

HTML KickStart

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

HTML KickStart გთავაზობთ ალტერნატივას.

Მარტივად რომ ვთქვათ; ეს მართლაც გლუვი კომპონენტების კოლექციაა, რომელიც შეგიძლიათ უბრალოდ შეხვიდეთ თქვენს პროექტებში და მკვეთრად შეამციროთ განვითარების დრო. აქ მოცემულია რამდენიმე ლამაზი კომპონენტი:

Ძირს დაგდება

ღილაკები

ჩანართები (ცენტრში და ხატებით)

მატერიალიზაცია

თუ მოგწონთ Bootstrap ის ფაქტი, რომ მას აქვს მზა გამოსავალი ვებ – დიზაინის ყველა პრობლემის შესახებ, მაგრამ მასალების დიზაინის სტილის თაყვანისმცემელი ხართ, უნდა სცადოთ მატერიალიზაცია.

მატერიალიზაცია ძირითადად Bootstrap- ის მსგავსია – 12 – ბალიანი ქსელის სისტემა, ოფსეტური ელემენტები და ნაცნობი კომპონენტები, როგორიცაა ფორმები, ბარათები და ა.შ., თუმცა, მას აქვს გარკვეული სიკეთეები, რომლებიც შეიძლება ბევრს მიმართოს..

Push-pull

Materialize CSS- ის ზრდის / გასვლის თვისება საშუალებას გაძლევთ ხელახლა სვეტების განლაგება. ეს ახსენებს CSS Grid– ის ახალ სტანდარტს, სადაც განლაგება განსხვავდება ელემენტის რიგისგან.

ეს div არის 7-სვეტი ფართო, რომელიც მარჯვნივ 5-სვეტით არის დატანილი.
5-სვეტი განიერია მარცხნივ 7-სვეტით.

ეს შედეგი შემდეგია:

შეამჩნევთ, რომ სვეტები შეიცვალა ადგილები, რაც, ალბათ, მიუწვდომელია ტრადიციულ Bootstrap– ზე დაფუძნებულ CSS– ში.

JavaScript სიკეთე

არსებობს JavaScript– ის საკმაოდ ბევრი თვისება და ეფექტი, რომლითაც ხდება Materialize. სახელმძღვანელო ინსტრუქციები, სადღეგრძელოები (Android- ის მსგავსი ეფერმენტული შეტყობინებები), Parallex, Pushpin და ა.შ., რამდენიმე მათგანია. ერთი მართლაც საოცარი ეფექტი მე მომეწონა FeatureDiscovery, რომელიც ძირითადად საშუალებას გაძლევთ ხაზი გავუსვა ელემენტს გვერდზე რაიმე ღონისძიებაზე (ვთქვათ, ღილაკზე დაჭერით), რომ მომხმარებლის ყურადღება ამ ელემენტზე მოვიყვანოთ. ძნელია აღწეროთ ეს სიტყვებით, ასე რომ გადადით https://materializecss.com/feature-discovery.html, რათა ნახოთ რას ვგულისხმობ.

საერთო ჯამში, Materialize არის Bootstrap- ის შესანიშნავი ალტერნატივა ან მათთვის, ვინც ეძებს მიიღოს სრული მხატვრული მასალის CSS ჩარჩო..

დასკვნა

Bootstrap არის საპასუხო დიზაინის სინონიმი. ეს იყო Bootstrap- მა პოპულარიზაცია ტერმინი “მობილური პირველი დიზაინით” და აჩვენა, თუ როგორ შეიძლება ამის გაკეთება. მაშინ, როდესაც Bootstrap იღებს სამუშაოს უმეტესი დროით, სამუშაოს შესრულება ყოველთვის არ არის საკმარისი. თუ ფიქრობთ, რომ Bootstrap აკრძალავს თქვენ და რომ თქვენი საჭიროებები განსაკუთრებულია, აქ ჩამოთვლილი ერთ – ერთი ვარიანტი დაგეხმარებათ. ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map