DISCLAIMER: To have it work properly, set:
Pointer events: none
Ruler is a Framer component that recreates the ruler and guide system from Adobe Illustrator — drop it over any frame and you get draggable guide lines. Everything is click-through by default so it sits on top of your existing content without blocking anything.
Features:
Dark/Light Mode Support — toggles the ruler strips between dark and light mode
Show Guides — shows or hides all placed guide lines. Useful if you want the rulers visible without the guides cluttering the view.
Horiz. Ruler — turns the horizontal ruler strip on or off entirely.
Horiz. Side — when the horizontal ruler is on, choose whether it sits at the top or bottom of the frame.
Vert. Ruler — turns the vertical ruler strip on or off entirely.
Vert. Side — when the vertical ruler is on, choose whether it sits on the left or right side of the frame.
Potential Use Cases:
UI/UX or graphic designer portfolio — Could be used as a landing page element to add a subtle "WOW" factor.
Design educator or course creator — if you're teaching design tools or any sort of visual principles, having this on your site immediately establishes some context.
Creative agency or design studio — These types of businesses are always pushing the envelope of interactivity on their site, and this turns a normal webpage into something like a working environment.
Support:
If you ever run into any issues with this component, text me at 478-334-8505, and we'll get it resolved as quick as possible (:
DISCLAIMER: To have it work properly, set:
Pointer events: none
Ruler is a Framer component that recreates the ruler and guide system from Adobe Illustrator — drop it over any frame and you get draggable guide lines. Everything is click-through by default so it sits on top of your existing content without blocking anything.
Features:
Dark/Light Mode Support — toggles the ruler strips between dark and light mode
Show Guides — shows or hides all placed guide lines. Useful if you want the rulers visible without the guides cluttering the view.
Horiz. Ruler — turns the horizontal ruler strip on or off entirely.
Horiz. Side — when the horizontal ruler is on, choose whether it sits at the top or bottom of the frame.
Vert. Ruler — turns the vertical ruler strip on or off entirely.
Vert. Side — when the vertical ruler is on, choose whether it sits on the left or right side of the frame.
Potential Use Cases:
UI/UX or graphic designer portfolio — Could be used as a landing page element to add a subtle "WOW" factor.
Design educator or course creator — if you're teaching design tools or any sort of visual principles, having this on your site immediately establishes some context.
Creative agency or design studio — These types of businesses are always pushing the envelope of interactivity on their site, and this turns a normal webpage into something like a working environment.
Support:
If you ever run into any issues with this component, text me at 478-334-8505, and we'll get it resolved as quick as possible (:
eyezayuh
