Sidelineal tilføjer Photoshop-lignende linealer og trækkbare vejledningslinjer til enhver webside. Pixel-præcise linealer løber langs toppen og venstre kant af viewporten, og du kan trække vejledningslinjer ind på siden for at måle afstande, kontrollere justering og verificere afstand — alt direkte på den live side.
Designere, der arbejder i Figma eller Photoshop, er afhængige af linealer og guider til at kontrollere afstand og justering. Men når disse designs implementeres i HTML/CSS, kræver verificering af pixel-nøjagtighed typisk at åbne DevTools, svæve over elementer et for et og sammenligne beregnede værdier med mockuppen. Sidelineal bringer den velkendte lineal-og-guide-arbejdsgang direkte til browseren. En vandret lineal med markstreger spænder over toppen af viewporten, og en lodret lineal spænder over venstre kant — begge viser pixelpositioner. Klik og træk fra en af linealerne for at trække en vejledningslinje ind på siden. Guider er farvekodede (blå for vandrette, røde for lodrette) og viser deres pixelposition. Afstanden mellem to parallelle guider beregnes automatisk og vises. Træk guider for at omplacere dem, eller dobbeltklik for at fjerne dem. Hele overlayet er ikke-forstyrrende — det sidder oven på siden uden at påvirke layout eller interaktioner.
Præcise linealer med markstreger for hver 50 pixels løber langs toppen og venstre kant af viewporten. Linealerne ruller med siden og viser nøjagtige pixelpositioner i forhold til sidens oprindelse (0,0). Markstreger med 10px mellemrum med etiketter for hver 50px.
Klik og træk fra den vandrette lineal for at oprette en vandret guide, eller fra den lodrette lineal for en lodret guide. Guider klikker til markørpositionen og viser deres præcise pixelkoordinat (f.eks. y: 200px). Træk for at omplacere, dobbeltklik for at fjerne.
Når to parallelle guider er placeret, beregnes pixel-afstanden mellem dem automatisk og vises med en forbindende parentes og etiket. Placer to vandrette guider 120px fra hinanden og se 120px mærket imellem dem.
Vandrette guider er blå, lodrette guider er røde — det gør det nemt at skelne dem på et øjeblik, når flere guider er placeret. Hver guide viser sin position i et lille etiketmærke.
Linealer og guider gengives som et gennemsigtigt overlay, der ikke påvirker sidens DOM, layout eller JavaScript. Du kan stadig klikke igennem for at interagere med sideelementer. Overlayet fanger kun klik på linealerne og guidehåndtagene.
Placer så mange guider, du har brug for — der er ingen grænse. Opret et komplet målegitter med vandrette og lodrette guider, der markerer hvert væsentligt justeringspunkt på siden.
Mockuppen siger, at headeren er 80px høj og indholdet starter ved 120px fra toppen. Placer vandrette guider ved disse positioner og verificer øjeblikkeligt, om den implementerede side stemmer overens med designspecifikationerne.
Placer guider øverst og nederst på gentagne elementer (kort, listeelementer, sektioner) for at verificere, at de alle har identisk afstand. Uensartede mellemrum mellem elementer bliver straks synlige.
Placer en lodret guide ved en overskrifts venstre kant, og tjek derefter om afsnitstekst, knapper og billeder nedenunder er justeret til samme linje. Fejljusteringer på selv få pixels er synlige mod guiden.
Placer to lodrette guider ved et elements venstre og højre kant for at måle dets bredde. Placer to vandrette guider for højde. Den automatisk beregnede afstand giver dig de præcise pixeldimensioner.
Placer en lodret guide ved almindelige breakpoint-bredder (768px, 1024px, 1280px) og ændr størrelse på browseren for at kontrollere, om elementer reflowes korrekt ved hvert breakpoint. Guiderne forbliver faste som visuelle referencepunkter.
Åbn den flydende DevSuite Pro-dock, og klik på Sidelineal-ikonet. Pixel-præcise linealer vises langs toppen og venstre kant af viewporten.
Klik og træk fra den øverste lineal for at placere en vandret vejledningslinje, eller fra den venstre lineal for en lodret guide. Guiden følger din markør og klikker til den pixelposition, hvor du slipper.
Hver guide viser sin pixelposition (f.eks. y: 200px). Når to parallelle guider er placeret, vises afstanden mellem dem automatisk med en mærket parentes.
Træk en guide for at flytte den til en ny position — afstandsetiketterne opdateres i realtid. Dobbeltklik på en guide for at fjerne den fra siden.
Klik på Sidelineal-ikonet igen for at skjule alle linealer og guider. Dine guidepositioner bevares, hvis du genaktiverer under den samme session.
Installer DevSuite Pro gratis og lås opp 39+ utviklerverktøy for nettleseren din.
