Peep Your Way to Better CSS

One of the most useful methods for learning web design is to look through the source code of existing websites. You can gain so much insight into best practices just by seeing how the pros code their sites. Wading through thousands of lines of CSS, though, tends to be a little tedious.

Thanks to a new Google Chrome plugin, that process just got more efficient.

I recently stumbled upon a fantastic little application known as CSSPeeper, and its usefulness makes up 100% of what it lacks in a good name. The application allows designers to view (or “peep”) which CSS styles are being applied to an element on a page and to the page as a whole. I haven’t yet had the opportunity to use it extensively, but I can say that it will definitely be part of my toolbox on my next web project.

If you like how Medium styles their buttons and want to include something similar in your new design, use CSSPeeper to see which CSS properties you need to add. Wondering what font Apple is using for their headings? CSSPepper can tell you. Just launch the plugin and click on the element on the page.

Screen Shot 2017-03-25 at 3.36.11 PM

CSSPeeper tells you what CSS properties are styling an element.

CSSPeeper will also show you the entire color palette used on a page. It even tells you if colors are being used at less than 100% opacity. Just head over to your favorite site, launch the plugin, and click the “Colors” button at the bottom to try it out.

Screen Shot 2017-03-25 at 3.39.51 PM.png

CSSPeeper shows you a page’s color palette.

Lastly, CSSPeeper also compiles all assets used on a page and makes it easy to download them. This is possibly my favorite feature, as it saves from having to dive deep into complex code just to extract a single asset. CSSPeeper makes it easy: launch the plugin, click the “Assets” button at the bottom, and click the asset of your choice to download. It doesn’t get much easier than that.

Screen Shot 2017-03-25 at 3.48.03 PM

CSSPeeper gathers assets used on a page and lets you download them with a single click.

CSSPeeper functions as a plugin for Google Chrome and can be installed in just a few clicks through the Chrome Web Store.

In a previous post I suggested honing your design skills by redesigning an existing website. This is a great opportunity to use CSSPeeper to expedite that process. Use the plugin to quickly grab the site’s color palette and maintain brand consistency in your new design. Use the assets feature to export and reuse all the existing images on a page with just one click.

CSSPeeper is a great resource for web designers of any skill level. I recommend giving it a try to see if there’s a spot for it in your toolbox.

Featured image credit: Dawid Młynarz on Medium
Body images credit: CSSPeeper


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s