lobppaabcohnidngcdoncoipifpfmpcg
Grid overlay for responsive designs
Designer Tools
A collection of tools to help you design and develop websites with precision. Designer Tools helps web designers and developers achieve pixel-perfect results with ease. It includes features like rulers, guidelines, and multiple ways of measuring elements and spacing. You can customize your setup with grids, move or remove guides, and tweak settings to match your workflow. PLUS subscribers gain access to extra tools and resources to enhance their design process.
Screen Sizes
This extension displays grid and measurement overlays for a design grid system. A tool for designers to measure screen dimensions. This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. This extension is great for designers who need to ensure their website/app designs are pixel perfect. Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser. Try it out today. To begin using the software, here is what you need to do Install our software extension Navigate to the website where you wish to begin using the software Click on the extension icon at the top right corner to activate the software Begin measuring the dimensions of the image/button etc.
Dimensions Inspect | Gridman
Swiss army knife for front-end developers Gridman is the must-have Chrome extension for every front-end developer. This toolkit is crafted to boost your productivity and enhance your coding experience. DOM INSPECTION Instantly inspect DOM elements. Just hover to reveal details of the target and its parent elements, simplifying your analysis and debugging process. PERSISTENT Gridman uniquely persists between host reloads. Click on an element, and maintain your insights even after a page refresh, saving you valuable time and effort. TAILWIND Tailwind developers, rejoice! Easily inspect class sets and see how Tailwind CSS is bringing your designs to life. LAYOUTS Whether you're working with CSS Grid or Flexbox, Gridman displays rows, columns, paddings, margins, and more. Understand and manipulate complex layouts with ease. ANYWHERE Simply click the extension icon to activate this toolkit on any webpage. HOVER Unveil the intricacies of the DOM structure with a mere mouse hover. Visualize and understand how elements are nested and related. JOIN With Gridman you're not just using a tool; you're upgrading your entire development process. Download now and experience a revolution in your front-end development journey! REVIEW Your experience with Gridman matters to me deeply. If you've found it helpful, I'd be incredibly grateful if you could take a moment to share your thoughts in a review. Your feedback not only helps to improve but also assists fellow developers in discovering the benefits of this extension. Thank you for your support and for being a vital part of Gridman supporters! NOT WORKING If something didn't work as expected, I kindly request that you consider reaching out with any questions or issues you might have. I understand that each review, whether positive or negative, offers me an opportunity to learn and improve. However, I also believe in the importance of understanding and resolving any issues through communication. Please feel free to ask me anything at: https://fenvox.com/gridman#ask-section. I'm always here to assist you! LOCAL FILES You are trying it towards local file like 'file:///...' - but nothing shows up? > ANSWER: Gridman , like any chrome extension, will not work on local files. Chrome is not allowing it due to security reasons. And it is correct. You can imagine implications if any chrome extension would be able to access file system on your computer. To use Gridman on local files i'd recommend a tiny http-server which you can get here https://www.npmjs.com/package/http-server
PixelParallel by htmlBurger
PixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers PixelParallel is a completely free, super handy and light HTML vs Design comparison tool for front-end developers that will help you code pixel perfect websites with ease. Built from developers to developers, PixelParallel is a tool working in favor of the ultimate precision in front-end coding. How it works: 1. Simply upload your image and compare the semi-transparent overlay with the web page below. 2. Customize the opacity, scale and position of the image as you wish. You can also hide it or lock it. 3. Perform color difference for a strong pixel perfect precision. 4. Use the vertical and horizontal grids to achieve a pixel perfect web design. - Bootstrap grid with customizable width, number of columns, gutter and opacity - Horizontal lines with customizable space between - Draggable rulers (Photoshop-like) + Reset option - Inversion (Color difference) - Separate overlays for each web page - Overlay scaling - Customizable overlay opacity - Saving overlays between sessions - All image sizes supported - Draggable overlay - Quick hide / show image - Shortcuts + customizable keyboard hotkeys - Works with local files - Intuitive UI: clean and simple; draggable; minimizable PixelParallel does not collect any personal data. Uploaded images are saved locally in the browser storage.
