This week, we launched a new service in my organization called Project Parfait. Here are a couple of the things you can do with Project Parfait that hopefully make a front end developer’s life easier:

1. Get Measurements from a PSD.  

No more ruler tool or using the marquee tool in PS to eyeball the distance from the top of your site to your logo!

In Project Parfait, you can SHIFT+CLICK two elements on your canvas and get the relative distance between them. Here, I have selected the main document and the top header. The measurements in Project Parfait show me a top margin of 134px and left margin of 349px. While the tool only gives you pixels right now, we want to support % and ems soon.

2. Get the CSS for a Gradient

In PS, some people just  use the colorpicker to grab colors from the top and bottom of a gradient. But, what if the gradient actually has more stops than that? There are other ways to get all the colors, but, in Project Parfait, it’s one step.

Select the element with the gradient and see the CSS in the CSS Inspector. This example had three gradient stops.

You can also get vendor prefixes by clicking on the checkbox “Show vendor-prefixed CSS”.

3. Determine your CSS classes for font styles from a PSD design.

In Project Parfait, you can see, at a glance, what fonts, sizes and weights are being used throughout the design you’ve been given. This is displayed in the Styles tab:

By clicking on any of the font sizes, you will get an indicator in your design where this font style will be used as well as a pop up with the CSS.

This allows you to write a CSS class like:

.activityTitles {

font-family: AmaticSC;
font-size: 24px;
font-weight: 700;

}

4. Create assets from a single or multiple layers.

From the canvas or the layers tab, you can select the layers that you want to make an image asset from. For example, in this design, I may want this kayaking man icon and the circle behind it. So, I’d select both.

After making this selection, I would click on the download arrow icon in the blue popup box. This will extract your asset and you can see it in the Assets tab.

From the Assets tab, you can click on any image to download it to your local machine once you have verified this is the image you want.

5. Get Inline text CSS styles

In some PSD designs, you will have one text layer with multiple styles. If you try to pull the CSS from PS, you will only get the first set of styles for that layer. If you select a text layer in Project Parfait that includes more than one set of styles, the CSS inspector will give you the “inline” styles. Here is an example:

When you copy the CSS, you’ll get something like this which you will need to break out into separate classes:

font-family: “Source Sans Pro”;
color: #0b0a0a;
font-size: 36px;
font-weight: 700;
line-height: 1;
font-family: “Source Sans Pro”;
color: #ed0505;
font-size: 18px;
font-weight: 700;
line-height: 2;
width: 97px;
height: 99px;

This is probably not the ideal format, but, hopefully, our users will tell us how they would like inline styles formatted.