CSS Tools

How to Get Out of the Coding Trap with CSS Viewers: Must-Read for Slowpokes

5/5 (2)

Blogging is a passion of many of us, but there always must be time for personal growth. At last, I’ve completed a Photoshop course, learned how not to suck at freelancing, and got down to my first project. It was about designing a landing page for a consulting site that reminded me of our WordPress themes in its look. The project gave me a perfect opportunity to show my worth in design.

What confused me was that the client, John or Mr. Egghead, as I lovingly named him, didn’t provide style guidelines. When you design a landing page, you must keep it in line with the overall aesthetics of the site it’s meant for. The site and landing page is an organic whole, so I had to make sure they would be alike in their looks.

But how was I supposed to figure out object properties on the site? I mean font family, size, line-height, letter spacing, colors… Don’t get me wrong. I can distinguish green from gray. But, as we learned from the overrated BDSM drama, there are 50 shades of gray.

Ash gray (#B2BEB5), blue-gray (#6699CC), slate gray (#708090), cadet gray (#91A3B0), cool gray (#8C92AC), charcoal (#36454F), - that’s just the tip of the Grey Iceberg floating in the Ocean of Endless Color Shades.

I’ve never had vision problems, but even my eagle eye can’t identify the shade used. So how on earth could I design the page corresponding to the style of Mr. Egghead’s site? Hire a mind reader? Or become a telepath myself?

But just like many other clients, Mr. Egghead thought that I had to know it all if I was a pro in my business. And creating style guidelines wasn’t his job. And he had no time for that and gave me dozens of blah-blah-blah excuses…

Being on my own with my problems, I wanted to refuse in the heat of the moment, but then calmed down. The money offered was good, and I was a newcomer after all. My account had no positive feedback. I was like a newcomer at school no one wanted to hang out with. It surprised me; someone decided to deal with me at all and pay me that much. What alternative did I have?

Doing something for the cash that would let me afford a few Snickers… You gotta be kidding me. My stomach needs much more than that.

So, here’s what I did. First, I tried to find out object properties of Mr. Egghead’s site using a browser inspector. When I opened it, I got shivers up my spine.

 

Is it possible not to get lost in this coding mess? After scanning through it back and forth for a few minutes, I thought my eyes would pop out. I’m not that risky, so I closed it. Seriously, I didn’t have much time to wander through that maze of code. It was critical to meet the deadline, as Mr. Egghead wasn’t the one who would want to wait. If he had given me some third-rate feedback, it would have spoilt my Upwork account.   

Sure thing, the browser inspector may be a solution for nerds skilled at coding. But for someone with a humanitarian mindset like me, it’s way too complicated. The necessary info must be a click away.

I couldn’t believe that smart guys hadn't invented a tool to make designers’ life easier. And my instinct didn’t let me down. I found a few browser extensions allowing users to inspect website styles without digging in its code. Just imagine how relieved I was at that moment! Those extensions helped me complete my landing page project on Upwork in the shortest time possible without compromising on the quality.

Mr. Egghead was also surprised to receive the design a few days before the deadline. His kudos and promise to hire me again soon made my day and gave a good start to my Upwork profile.

Want to speed up your workflow like I did and take more projects for higher incomes and less headache? Today, I’ll tell you how to do it without any investment.

Check out a number of life-saving CSS viewers that you can use totally for free.


CSS Peeper

CSS Peeper is the best CSS viewer that I could find. The first thing I liked about this Chrome extension was a simple and user-friendly interface. With a single click on the page element, I could see its full specification on the left:

  • object properties;
  • typeface (font family, font size, line height, text alignment, letter spacing);
  • fill and background colors;
  • effects (box shadow and border radius).

CSS viewers

Besides checking the color of each element one by one, CSS Peeper also lets me view the whole color scheme in a well-organized list. I could copy each color to the clipboard.

CSS viewers

What I also found convenient was an option to download assets (PNGs, SVGs, JPGs, etc.) in a .zip file. On hover, I could also check dimensions of each file and export it individually, but I decided to download all the files in one go.

CSS viewers

This CSS viewer did all the dirty work for me. So I recommended it to everyone who needs a quick glimpse into CSS styles.


CSSViewer

The next Chrome extension I tried out was CSSViewer. It was easy in use just like CSS Peeper. I could inspect CSS by hovering the necessary element. Here are the properties this tool revealed to me about website elements:

  • font & text (font family, font size, font weight, letter spacing, line height, text decoration, text align, text transform, word spacing);
  • color & background;
  • box (height, width, border, padding, etc.);
  • positioning (position, top, bottom, right, left, display, z-index, etc.);
  • miscellaneous (cursor);
  • effects (transform, transition, outline, box sizing, border radius, text overflow, etc.)

CSS viewers

If you use Firefox, this CSS viewer is also available as a Firefox add-on.


WhatFont

CSS Peeper and CSSViewer provide comprehensive information about each element on the page. But while surfing the web, I also found a few extensions focused on one aspect. For example, WhatFont reveals only the data related to fonts. On click, it let me explore the font family, style, weight, size, line height, and color.

CSS viewers

If you are a Mac user, you can download WhatFont for Safari.


ColorPick Eyedropper

The next tool I came across was ColorPick Eyedropper. With its help, I could see the color shade of literally every pixel across the layout. It was as easy as bringing a cursor to a certain screen area.

CSS viewers


Stylebot

Here’s another great finding I’d like to share with you today. While Stylebot is not a CSS viewer, it let me try different fonts, colors, etc. to see how well they would fit into the existing layout style. I could replace the following CSS properties on the site:

  • text (font family, size, weight, style, variant, transform, decoration, line height, letter spacing);
  • color & background;
  • borders (style, color, thickness);
  • layout & visibility (height, width, margins, paddings).

CSS viewers


The life without CSS viewers would be much more complicated for non-coders like me. I’m terrified to imagine what would have happened if I hadn’t found these extensions. I could’ve missed the deadline or screwed up the project with the wrong styling. Mr. Egghead would have mentioned that on Upwork and frightened away other prospects. Who wants to deal with someone who can let you down? Fortunately, these CSS viewers took the pain of working my way through the jungle of code and turned it into a one-click experience.

Do you know any other useful tools to speed up designers’ workflow? Feel free to mention them in the comments to this post and tell us how they made your life easier.

Did you save these CSS viewers to your toolkit? That’s great, but what if your fellows are looking for such a solution right now? Or what if some of them got trapped in the code? Release them from the trap by sharing these tools on social media.

Leave a Reply

Your email address will not be published. Required fields are marked *