Pravítko stránky přidává na libovolnou webovou stránku pravítka ve stylu Photoshopu a přetahovatelné vodítka. Pravítka s přesností na pixel jsou umístěna podél horního a levého okraje výřezu a vodítka lze přetahovat na stránku pro měření vzdáleností, kontrolu zarovnání a ověřování mezer — vše přímo na živé stránce.
Designéři pracující ve Figmě nebo Photoshopu se spoléhají na pravítka a vodítka pro kontrolu mezer a zarovnání. Ale když jsou tyto návrhy implementovány v HTML/CSS, ověřování přesnosti pixelů obvykle znamená otevření DevTools, procházení elementů jeden po druhém a porovnávání vypočítaných hodnot s návrhem. Pravítko stránky přináší obvyklý pracovní postup pravítka a vodítek přímo do prohlížeče. Horizontální pravítko s dílky se rozkládá přes horní část výřezu a vertikální pravítko přes levý okraj — obě zobrazují pozice pixelů. Klikněte a přetáhněte z libovolného pravítka pro vytažení vodítka na stránku. Vodítka jsou barevně označena (modrá pro horizontální, červená pro vertikální) a zobrazují svou pozici pixelů. Vzdálenost mezi jakýmikoliv dvěma paralelními vodítky je automaticky vypočítána a zobrazena. Přetahujte vodítka pro jejich přemístění nebo dvojkliknutím odeberte. Celý překryv je nenápadný — leží na stránce bez ovlivnění rozvržení nebo interakcí.
Přesná pravítka s dílky každých 50 pixelů jsou umístěna podél horního a levého okraje výřezu. Pravítka se posouvají se stránkou a zobrazují přesné pozice pixelů relativně k počátku stránky (0,0). Dílky v intervalech 10 px se popisky každých 50 px.
Klikněte a přetáhněte z horizontálního pravítka pro vytvoření horizontálního vodítka nebo z vertikálního pravítka pro vertikální vodítko. Vodítka se přichytí k pozici kurzoru a zobrazují přesnou souřadnici pixelů (např. y: 200 px). Přetáhněte pro přemístění, dvojkliknutím odeberte.
Když jsou umístěna dvě paralelní vodítka, vzdálenost pixelů mezi nimi je automaticky vypočítána a zobrazena se spojovací závorkou a popiskem. Umístěte dvě horizontální vodítka 120 px od sebe a uvidíte popisek "120 px" mezi nimi.
Horizontální vodítka jsou modrá, vertikální vodítka červená — snadno je od sebe odlišíte na první pohled, když je umístěno více vodítek. Každé vodítko zobrazuje svou pozici v malém popiskovém odznaku.
Pravítka a vodítka jsou vykreslena jako průhledný překryv, který neovlivňuje DOM stránky, rozvržení ani JavaScript. Stále můžete klikat přes stránku a pracovat s elementy stránky. Překryv zachycuje kliknutí pouze na pravítkách a úchytech vodítek.
Umístěte tolik vodítek, kolik potřebujete — bez omezení. Vytvořte kompletní měřicí mřížku s horizontálními a vertikálními vodítky označujícími každý významný bod zarovnání na stránce.
Návrh říká, že záhlaví je 80 px vysoké a obsah začíná 120 px od vrcholu. Umístěte horizontální vodítka na tyto pozice a okamžitě ověřte, zda implementovaná stránka odpovídá specifikacím návrhu.
Umístěte vodítka nahoře a dole opakujících se elementů (karty, položky seznamu, sekce) a ověřte, zda mají všechny stejné mezery. Nekonzistentní mezery mezi položkami se stanou okamžitě zřejmými.
Umístěte vertikální vodítko na levý okraj nadpisu, poté zkontrolujte, zda text odstavce, tlačítka a obrázky níže jsou zarovnány na stejnou linii. Nesrovnalosti i o několik pixelů jsou viditelné vedle vodítka.
Umístěte dvě vertikální vodítka na levý a pravý okraj elementu pro měření jeho šířky. Umístěte dvě horizontální vodítka pro výšku. Automaticky vypočítaná vzdálenost vám dá přesné rozměry pixelů.
Umístěte vertikální vodítko na běžné šířky breakpointů (768 px, 1024 px, 1280 px) a změňte velikost prohlížeče, abyste zkontrolovali, zda se elementy správně přeformátují na každém breakpointu. Vodítka zůstávají pevná jako vizuální referenční body.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Pravítka stránky. Podél horního a levého okraje výřezu se zobrazí pravítka s přesností na pixel.
Klikněte a přetáhněte z horního pravítka pro umístění horizontálního vodítka nebo z levého pravítka pro vertikální vodítko. Vodítko sleduje kurzor a přichytí se k pozici pixelů, kde ho uvolníte.
Každé vodítko zobrazuje svou pozici pixelů (např. y: 200 px). Když jsou umístěna dvě paralelní vodítka, vzdálenost mezi nimi se automaticky zobrazí s popsanou závorkou.
Přetáhněte libovolné vodítko na novou pozici — popisky vzdáleností se aktualizují v reálném čase. Dvojkliknutím vodítko ze stránky odeberte.
Znovu klikněte na ikonu Pravítka stránky pro skrytí všech pravítek a vodítek. Pozice vašich vodítek jsou zachovány, pokud znovu aktivujete během stejné relace.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
