Quick Start

Once Pixels is hosted on the Chrome Web Store you'll be able to install the packed extension (.crx).

If you're comfortable with the bleeding edge, experimental version, try the unpacked extension (.zip).

If you don't know how to install an unpacked Chrome extension... maybe reconsider. This extension has access to all of your tabs and data, so while I know that it's safe, you'd have to read the source code to verify that yourself.

How do I pixel-match?

Pixels packages the tools that you need in a browser extension.

Here's what you'll need to do:

  1. Drag and drop your mocks into new browser tabs.
  2. Open up Chrome Dev tools and navigate to the "Pixels" tab.
  3. Drop guidelines on your mocks.
  4. View those guidelines on your development website.
  5. Tweak the CSS to your heart's content.
  6. Profit. Seriously. People pay good money for pixel-perfect websites.

Greetings!

This extension is dedicated to my fellow pixel pushers.

You've got designers. Your designers have needs. You fulfill those needs, sometimes at great personal expense.

I've been a front-end dev for a few weeks now, and I'm sick and tired of guess-and-check workflows when matching my designer's mocks. The finished product needs to be indistinguishable from the designs, and that's nearly impossible to achieve with current tools.

I'm building the tools that I wish existed. I hope you like them.

Let me know what you think by messaging me on my Twitter page: @ChrisEsplin

Sincerely,

Chris Esplin

Contribute

The code is hosted on GitHub. Go check it out, fork it, modify it to your heart's content... and let me know how it goes!

GitHub icon

Terms of Service

I don't charge anything, so you don't get any special guarantees. I'll be honest and not mess with your browser. That's about it.

Please don't repackage and sell this app just because the code is open source. That would be lame. Please email me at chris@chrisesplin.com if you're interested in re-purposing my code in any way.

Privacy Policy

What information do I collect?

The only personally-identifiable information that this application collects is your email address.

It only collects your email because you sign in with Google.

How do I use the information?

I don't use your information at the moment. I may send you an email in the future. If I do decide to send email, it will be respectful and will contain a one-click opt-out link.