We had a recent update to Project Parfait where we added support for the first preprocessor, SCSS/Bourbon. We plan on adding other preprocessors, but, wanted to get people’s reaction to this workflow and feedback on what is used the most.
To use a preprocessor, go to the Styles tab in Project Parfait. By default, the CSS Inspector displays plain CSS. Mouse down on the down arrow above the CSS Inspector to change to a preprocessor.
That’s all. Your CSS inspector should reflect this change.
In Project Parfait’s in-app chat, I’ve been reading through all the feedback and trying to respond to people’s requests and problems. One question that has come up a lot is, “Can I share my PSD from Project Parfait?”. I’ve answered this question at least a dozen times, so, I thought I’d post an answer here for anyone looking for it.
Right now, Project Parfait does not support any collaboration features like sharing. So, if you are a designer wanting to share a PSD with a developer through Project Parfait…. you can’t really do it. You will need to send the PSD to the developer and they will need to upload to their account to take advantage of measurements, CSS and assets outputted by the tool.
However, sharing and collaboration is on our radar and we plan to have this in the next few months.
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:
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”;
font-family: “Source Sans Pro”;
This is probably not the ideal format, but, hopefully, our users will tell us how they would like inline styles formatted.
I am reposting a great little Adobe forum response from Christopher Bank about how to get text to wrap around an image in Edge Reflow without using CSS Regions.
The first step is to draw a box, and then add an image at the top and then add a text box below that. You can set the width to auto and it will fill the whole box.
After that select the text and make it “float:none”, set the margins to 0, and make sure the clear is none (no buttons selected).
The last step is to change the image to float: right
That should do it. After that you might want to turn the div into a group so it’s easier to move everything as whole. If you try to move the image or text using drag and drop it’s likely the text will go back down below the image again.
Today, we launched an update of Edge Reflow. We recently took a step back and analyzed some of the problems that our users were facing. We found that it was really tough to use Reflow, at the beginning. Once you overcame some of the learning hurdles, you saw the value of creating responsive designs in this environment. But, honestly, a lot of people were just never passing the initial learning obstacles. In the our current release, we hope that a couple of things will ease learning to use the tool. First, we added a sample project that opens with your initial launch of Edge Reflow.
This sample project allows you to explore the various media query breakpoints at 480px, 768px and 960px by clicking on them. The project uses most of the functionality that Reflow has to offer including background images, different types of positioning (fixed and static), borders, text styles, form elements, linking etc. I think the only thing it doesn’t have is multiple pages. Maybe we’ll add this in a future release.
The project also acts as a place to find new content to help you learn, outside of the software itself. If you view the project in the browser, or preview it, by pressing the TAB key, you will be able to click on external links that go to places like tutorials, issue lists, Twitter and Facebook pages. The links don’t work while you are in “design” mode for your project.
This project will not open the second time you open Reflow, so, if you would like to see it again, go to your Help menu and find “Open Welcome Project”.
In the past week, someone asked on our user forums how to send an object to the front or back in Reflow. In Reflow, as elements are placed on the canvas, their default position value is “static”. When items are position: static, they do not support the z-index property which determines stack order.
To change the stack order of elements in your Reflow design, you must first change the position property from static to “absolute”, “relative” or “fixed”. You can do this in the Layout -> Advanced pane.
Once your element is fixed, absolute or relatively positioned, you will see options in this pane for z-index.
Click on the first button to push an element back in the stack order. Or, click the second button to send the object back in the stack order.
While working on a responsive design in Reflow. You may find yourself styling an element while you are in one of your breakpoints. For example, you may have added a background color and image to a box while in your 350px breakpoint like this:
However, you actually want all of these styles on the default breakpoint. To push these styles to the default breakpoint, hover over the right edge of each style. You should see a button show up looking like this: . Pushing this button next to a style will push that region specific style to all breakpoints.
Because CSS Filters and CSS Regions are not yet supported in all the browsers, Edge Reflow doesn’t have support for them turned on, by default. To use CSS Filters or CSS Regions in the tool, you need to go to the menu item: View -> Shiny Web Features. You will get the following dialog describing these features.
Turn these features on.
Now, you will be able to use CSS filters at the bottom of your Styling tab for any element on your canvas.
Or, you will be able to use CSS Regions which I have a tutorial for in an earlier blog post.
Some things are not obvious in Edge Reflow. I’ve always found that modifying breakpoints that you have created is one of those things. By default, Reflow using max media queries. If you want to change your project to use min media queries, do the following:
1. At the very top right of the application long press on the down arrow (to the right of the plus symbol).
This will bring up the orientation dialog.
Here, you can change your project to use min media queries, update breakpoint labels or change the value of each breakpoint.
Simple… but, honestly, hard to find.