UI ფრეიმვორკები

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

რატომ უნდა გამოვიყენოთ UI ფრეიმვორკი?

UI ფრეიმვორკების გამოყენებას აქვს თავისი უპირატესობები, მაგალითად:

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

რომელი UI ფრეიმვორკის გამოყენება შეგვიძლია?

არსებობს მრავალი UI ფრეიმვორკი, მათ შორის პოპულარულებია:

სახელი	აღწერა	უპირატესობები
Bootstrap	ერთ-ერთი ყველაზე პოპულარული ფრეიმვორკი, შექმნილი Twitter-ის მიერ	მზა კომპონენტები, საკუთარი დალაგების სისტემა (გრიდის), აქტიური განახლებები
Tailwind CSS	utility-first სტილზე დაფუძნებული ბიბლიოთეკა	ის არ შეიცავს მზა კომპონენტებს თუმცა თითქმის ყოველი თვისება გაწერილია კლასად, რაც გაძლევთ მაქსიმალურ მორგებადობას. ბიბლიოთეკა არის მცირე ზომის.
Bulma	Flexbox-ზე დაფუძნებული, სუფთა CSS-ფრეიმვორკი	მარტივი სტრუქტურა, არ საჭიროებს JavaScript-ს

Bootstrap-ის გამოყენება

მაგალითად, გამოვიყენოთ Bootstrap.

ინსტალაცია

Bootstrap-ის ინსტალაცია შესაძლებელია ორი გზით:

პაკეტ მენეჯერის გამოყენებით.
CDN-ის გამოყენებით.

განვიხილოთ ყველაზე მარტივი გზა - CDN-ის გამოყენება:

<head> თეგში დავამატოთ შემდეგი კოდის ნაწილი:

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>

არსებული ვერსიები შესაძლებელია იყოს ძველი. უახლესი ვერსიის სანახავად ეწვიეთ Bootstrap-ის გვერდს.

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

პრაქტიკა

მაგალითად ავაწყოთ ავტორიზაციის ფორმა:

HTML

<form class="p-4" action="https://api.everrest.educata.dev/echo/html" method="post">
  <div class="mb-3">
    <label for="email" class="form-label">იმეილი</label>
    <input type="email" class="form-control" id="email" name="email" required />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">პაროლი</label>
    <input type="password" class="form-control" id="password" name="password" required />
  </div>
  <button type="submit" class="btn btn-primary">ავტორიზაცია</button>
</form>

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

შეჯამება

ამ სტატიაში განვიხილეთ თუ რა არის UI ფრეიმვორკები და როგორ დავაინსტალიროთ ყველაზე პოპულარული ფრეიმვორქი - Bootstrap-ი.