Page Ruler dodaje ravnale u stilu Photoshopa i povlačive guide lines na bilo koju web-stranicu. Pixel-precizni ravnali protežu se duž gornjeg i lijevog ruba viewporta, a možete povlačiti guide lines na stranicu kako biste mjerili udaljenosti, provjeravali poravnanje i verificirali razmak — sve izravno na živoj stranici.
Dizajneri koji rade u Figmi ili Photoshopu oslanjaju se na ravnale i vodilice za provjeru razmaka i poravnanja. No kada se ti dizajni implementiraju u HTML/CSS, verificiranje pixel preciznosti obično znači otvaranje DevToolsa, lebdenje nad elementima jednim po jednim i uspoređivanje izračunatih vrijednosti s predloškom. Page Ruler donosi poznati tijek rada s ravnalima i vodilicama izravno u preglednik. Horizontalni ruler s oznakama raspona proteže se duž vrha viewporta, a vertikalni duž lijevog ruba — oba prikazuju pozicije u pixelima. Kliknite i povucite s bilo kojeg ravnala kako biste izvukli guide line na stranicu. Vodilice su obojene (plave za horizontalne, crvene za vertikalne) i prikazuju svoju pixel poziciju. Udaljenost između bilo koje dvije paralelne vodilice automatski se izračunava i prikazuje. Povucite vodilice za premještanje ili dvaput kliknite za uklanjanje. Cijeli overlay je nenametljiv — sjedi povrh stranice bez utjecaja na raspored ili interakcije.
Precizni ravnali s oznakama svakih 50 pixela protežu se duž gornjeg i lijevog ruba viewporta. Ravnali se pomiču zajedno sa stranicom i prikazuju točne pixel pozicije relativno na ishodište stranice (0,0). Oznake na intervalima od 10px s natpisima svakih 50px.
Kliknite i povucite s horizontalnog ravnala za stvaranje horizontalne vodilice, ili s vertikalnog ravnala za vertikalnu. Vodilice se priljube uz poziciju kursora i prikazuju svoju točnu pixel koordinatu (npr. y: 200px). Povucite za premještanje, dvaput kliknite za uklanjanje.
Kada su postavljene dvije paralelne vodilice, pixel udaljenost između njih automatski se izračunava i prikazuje s povezujućom zagradom i natpisom. Postavite dvije horizontalne vodilice na razmaku od 120px i vidite "120px" označen između njih.
Horizontalne vodilice su plave, vertikalne su crvene — čineći ih lako razlučivima na prvi pogled kada je postavljeno više vodilica. Svaka vodilica prikazuje svoju poziciju u maloj natpisnoj znački.
Ravnali i vodilice prikazani su kao prozirni overlay koji ne utječe na DOM stranice, raspored ni JavaScript. I dalje možete klikati kroz overlay i interagirati s elementima stranice. Overlay hvata klikove samo na ravnalima i hvatištima vodilica.
Postavite koliko god vodilica trebate — nema ograničenja. Stvorite kompletnu mrežu mjerenja s horizontalnim i vertikalnim vodilicama koje označavaju svaku značajnu točku poravnanja na stranici.
Predložak kaže da je zaglavlje visoko 80px i da sadržaj počinje na 120px od vrha. Postavite horizontalne vodilice na te pozicije i odmah verificirajte odgovara li implementirana stranica specifikacijama dizajna.
Postavite vodilice na vrh i dno ponavljajućih elemenata (kartice, stavke popisa, sekcije) kako biste verificirali da svi imaju identičan razmak. Nedosljedni razmaci između stavki odmah postaju vidljivi.
Postavite vertikalnu vodilicu na lijevi rub naslova, a zatim provjerite poravnavaju li se tekst odlomka, gumbi i slike ispod na isti pravac. Kriva poravnanja i od svega par pixela vidljiva su uz vodilicu.
Postavite dvije vertikalne vodilice na lijevi i desni rub elementa za mjerenje njegove širine. Postavite dvije horizontalne vodilice za visinu. Automatski izračunata udaljenost daje vam točne pixel dimenzije.
Postavite vertikalnu vodilicu na uobičajene širine prijelomnih točaka (768px, 1024px, 1280px) i promijenite veličinu preglednika kako biste provjerili preuređuju li se elementi ispravno na svakoj prijelomnoj točki. Vodilice ostaju fiksne kao vizualne referentne točke.
Otvorite DevSuite Pro plutajući dock i kliknite ikonu Page Rulera. Pixel-precizni ravnali pojavljuju se duž gornjeg i lijevog ruba viewporta.
Kliknite i povucite s gornjeg ravnala za postavljanje horizontalne guide line, ili s lijevog ravnala za vertikalnu. Vodilica prati vaš kursor i priljubljuje se na pixel poziciju gdje je otpustite.
Svaka vodilica prikazuje svoju pixel poziciju (npr. y: 200px). Kada su postavljene dvije paralelne vodilice, udaljenost između njih automatski se prikazuje s označenom zagradom.
Povucite bilo koju vodilicu na novu poziciju — natpisi udaljenosti ažuriraju se u stvarnom vremenu. Dvaput kliknite vodilicu za njezino uklanjanje sa stranice.
Kliknite ikonu Page Rulera opet kako biste sakrili sve ravnale i vodilice. Pozicije vaših vodilica čuvaju se ako ih reaktivirate tijekom iste sesije.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
