Simulating the CSS Box Model in Illustrator

Illustrator is a great tool for mocking up websites. In Illustrator CS5, Adobe added an Align to Pixel feature that ensures crisp antialiasing, and in a recent episode of Fridays with Mordy, we spoke about using Illustrator for various web design projects.

When designing for the web -- specifically for sites that will be built with CSS -- it's a good idea to get into the right mindset, so that you can easily translate what you create in Illustrator into code later on. In a previous post, I spoke about limited CSS export from Illustrator, but today, I'd like to share a way that you can simulate the CSS box model in Illustrator, which will ultimately help you create better design mockups.


Before you get started, I would suggest that you first activate the Use Preview Bounds preference setting in Illustrator, as this will ensure that the values you see in the Transform panel are accurate (by default, values are only of the vector path itself). In addition, it will also ensure that you can use the Align functions in Illustrator and get the results you want.

1. Start by using the Rectangle tool to create a shape. For web design, I rarely eyeball it, and choose to click once with the tool on the artboard. This brings up the Rectangle dialog box where you can specify the exact width of your rectangle. As we'll see, the length isn't important right now.
2. Select the Type tool and click anywhere along the path of the rectangle to convert it to an Area Text object. When you see the text cursor blinking, you can add some text. 
3. At this point, we have a regular box that contains text within. However, we often don't want the text to come right up to the edge of the text frame, which we can control with the Inset command in Illustrator. In CSS, we refer to this as Padding. With the Rectangle selected, choose Type > Area Type Options. In the Offset section, specify a padding setting by modifying the Inset value, and click OK.
4. When positioning boxes with CSS, you can also specify an attribute called Margin. To simulate this value, do the following: With the text frame selected, click the Add New Fill button in the Appearance panel. Apply a color to the fill and then drag the fill so that it appears beneath the Characters in the Appearance panel. With the fill still targeted, choose Effect > Convert to Shape > Rectangle. You'll want to work with the Relative values, and choose both Width and Height values to simulate the margin attribute. Click OK.

It's important to realize that margins can be set independently on all sides of the box, and here, we've only been able to specify extra width and height, and these values are distributed evenly. In other words, if you specified a margin width of 20px, then you'd see 20px added to either side of your box. What if you only wanted 20px on one side, but not the other? Well, first, you'd specify an extra width of just 10px, and then, with the same fill still targeted, choose Effect > Distort & Transform > Transform. In the Move section of the Transform Effect dialog box, specify a Horizontal value of 10px and click OK.

(Click image to enlarge)

Since we're working with an Area Text object, you can use the Selection tool to simply adjust the height of the frame to match the amount of text you have. Here is some more information on scaling Area Text frames in Illustrator.

If you use Character and Paragraph styles to simulate CSS for styling the text, you can take this to the next level. What would be really cool is if Illustrator could be able to export all of this as a CSS stylesheet. But for now, at least, you have a better way to visualize how you might build your mockup with CSS.