საიტის განლაგების ანალიზი - „ზემოდან ქვემოთ“
შესავალი
როცა ვებგვერდს რაიმე დიზაინისა თუ ნიმუშის მიხედვით ვაწყობთ, აუცილებელია მასში არსებული ელემენტების განლაგების სწორად ვიზუალიზაცია და გააზრება, რათა თავიდანვე ისეთი მარკაპი შევიმუშავოთ, რომელიც რესპონსიულობის პრობლემებს მოგვიანებით არ შეგვიქმნის. დამწყები ფრონტენდ დეველოპერების ერთ-ერთი უმთავრესი პრობლემა სწორედ განლაგების სწორი ანალიზი და მისი კოდში გადატანაა. ამ სტატიაში განვიხილავ ჩემ მიდგომას, ამ პრობლემის მოსაგვარებლად.
„ზემოდან ქვემოთ“ ანალიზი
„ზემოდან ქვემოთ“ მიდგომაში ვგულისხმობ ელემენტების სივრცეში განაწილების ვიზუალიზაციის თანმიმდევრობას. განვიხილოთ შემდეგი სარეგისტრაციო გვერდი:
რათა დემონსტრაცია მარტივი იყოს, ისე მოვიქცეთ, თითქოს მარჯვენა ზედა კუთხეში “sign in”-თან დაკავშირებული შეკითხვა არ არსებობს.
აქ საკმაოდ ბევრი ცალკეული ელემენტია, მაგრამ დავიწყოთ ზემოდან - შევეცადოთ დავყოთ გვერდი ყველაზე
ზოგად და უდიდეს ელემენტებად. ასე ჩვენ შეიძლება დავინახოთ ორი სვეტი. მარცხნივ გვაქვს სექცია ტექსტითა
და სურათით (მწვანე ჩარჩოებში) ხოლო მარჯვნივ - სარეგისტრაციო სექცია ფორმით (ცისფერ ჩარჩოებში).
მაშასადამე დოკუმენტის <body>-ში (ან თუნდაც <main>-ში) გვექნება ორი <section> ან <div>.
დავაკვირდეთ მათ ზომებს. მარჯვენა (ცისფერი) ელემენტი მარცხენაზე (მწვანე) დაახლოებით სამჯერ დიდია.
მათი ზომები შეგვიძლია გავანაწილოთ ფლექსბოქსით.
მშობელ ელემენტს (იქნება ეს <main>, <body> თუ სხვა)
გადავაქცევთ ფლექსბოქსად, ხოლო შვილ ელემენტთა შორის მარცხენას ერგება flex-grow: 1, ხოლო
მარჯვენას - flex-grow: 2. რა თქმა უნდა, შედარებით პატარა ეკრანზე იგივე სტილები ცუდად გამოჩნდება.
ამ შემთხვევაში შესაძლებელია მარცხენა სექციის ერთბაშად გაქრობა.
ჩავიდეთ ერთი ნაბიჯით ქვემოთ. მარჯვენა სექციაში ჩვენ გვაქვს ინფორმაციის შესაყვანი ველები, შესაბამისად ეს ყველა
ელემენტი უნდა მოექცეს <form>-ის შიგნით, რომელიც მშობელი ელემენტის ცენტრში მოთავსდება margin: auto-ს
საშუალებით და რაღაც მაქსიმალურ სიგანეს მიიღებს max-width თვისებით.
კიდევ ერთი ნაბიჯით დაბლა შეგვიძლია უფრო კონკრეტული სტრიქონები გამოვყოთ. ესენი შეიძლება იყოს უშუალოდ ტექსტური ელემენტები
(<h1>, <p>), სურათები (<img>), ან სულაც კონტეინერი ელემენტები (<div>). მათ მხოლოდ ის აერთიანებთ,
რომ ისინი ბლოკი ელემენტები არიან, რომლებიც ვერტიკალურად, ერთმანეთზე ლაგდებიან.
ოდნავ უფრო პრობლემური იქნება “name”-სა და “username”-ის ველების განლაგება. ამ ველებსა (<input>) და
იარლიყებს (<label>) ერთი მხრივ დასჭირდებათ კონტეინერი (მწვანე ჩარჩო), ისევე როგორც სხვა ველებსა და მათ იარლიყებს, მაგრამ,
მეორე მხრივ ეს მშობელი ელემებტები უნდა მოექცნენ კიდევ ერთ საერთო მშობელ ელემენტში (წითელი ჩარჩო), რომელიც ფლექსბოქსი იქნება.
ასე მათი შვილები (მწვანე ჩარჩო), ანუ ის <div>-ები, რომლებშიც უშუალოდაა <input> და <label> ელემენტები, სათითაოდ
მიიღებენ flex-grow: 1 თვისებას, რათა თანაბრად განაწილდნენ.
ყველა <input> ელემენტი მშობელი კონტეინერის მაქსიმალურ სიგანეს დაიკავებს width: 100%-ით და რა თქმა უნდა padding
კედლებს შორის თავისუფალ სივრცეს დატოვებს.
კონკერტული ელემენტების გამოყოფა და მათთვის ზომების მინიჭება შემდგომ უკვე მეორეხარისხოვანია, მთავარია განლაგებისთვის საჭირო ფუნდამენტური ბლოკების გამოყოფა.
შეჯამება
ამ მოკლე სტატიაში ვცადე ჩემი ანალიზის პროცესის დემონსტრაცია, როცა კონკრეტული დიზაინისა თუ ნიმუშის მიხედვით გვერდის აწყობას ვცდილობ. ამ დროს მე ვიყენებ „ზემოდან ქვემოთ“ მიდგომას, რათა ჯერ გვერდი დავყო ყველაზე დიდ და ზოგად ბლოკებად, ხოლო შემდეგ ეტაპობრივად ეს ბლოკები ჩავშალო უფრო პატარა ელემენტებად. ეს არ არის უნივერსალური და ძალზედ ზუსტი მეთოდი, მაგრამ ყველაზე ხშირად სწორედ ამ მიდგომით ვიწყებ საიტის აწყობას. დეველოპმენტის პროცესში შეიძლება ბევრი რამე შეიცვალოს, მაგრამ ამ მიდგომით თითქმის არასდროს დამჭირვებია, რომ თავიდან დაწერილი კოდი სრულიად გადამეკეთებინა.