Styling/Properties

Macaw allows you to apply various styles to your elements using the Inspector Pane. To set an element's styles, select it and pick choose the desired styles from the Inspector. Some styles can be applied to multiple elements at once. Hold SHIFT to select multiple elements for styling.

Some elements have default styles applied:

  • Element - elements have their background color set to gray: rgb(222, 222, 222).
  • Text - font is set to black 16px Helvetica with 1.38em line height and a weight of 400. Paragraph spacing is set to 1em.
  • Button - font is set to black 16px Helvetica with 1.38em line height and a weight of 400. Background color set to rgb(222, 222, 222), with a border radius of 3px.
  • Input - font is set to black 13px Helvetica with 1.38em line height and a weight of 400. Background is set to a lighter gray rgb(242, 242, 242), with left and right paddings set to 10px.
  • Text area - font is set to black 16px Helvetica with 1.38em line height and a weight of 400. Background is set to a lighter gray rgb(242, 242, 242), with all paddings set to 5px and a 1px gray rgb(119, 119, 119) border.
  • Select - font is set to black 13px Helvetica with 1.38em line height and a weight of 400. Background is set to a lighter gray rgb(242, 242, 242), with left padding set to 10px, a 1px gray rgb(119, 119, 119) border and a border radius of 3px. Additionally this element has a SVG background (select-arrows.svg).
  • Checkbox and Radio Button - font is set to black 16px Helvetica with 1.38em line height and a weight of 400.

Borders and Border Radius

Border and border radius can be set on all elements except images. Images require that you wrap the image in a container and apply the border properties to the containing element.

Adding/Editing Borders

Borders can be applied to an element using the border palette. Select the sides you wish to apply borders to using the selector on the left side of the palette. You can select the center selector to add a border to all sides or you can select one or more of the top, right, bottom and left selectors by holding Shift while you select them. Once you select the sides you can specify border width, style and color. Each setting can be set separately per side.

Example of an element with borders on all sides.

Example of an element with the same border styles only applied to the top and left.

Example of an element with different border styles on the top and left.

Using the side selectors you can toggle to the different sides to see/edit that border.

Adjusting Border Radius

The border radius palette works very similar to the borders palette. You can select different sides using the selectors on the left side of the palette. Once you select the sides you want to set the border radius on type in or change the value in the input to set the border radius. Just like the borders palette you can select multiple sides at a time by holding Shift while you select sides.

Backgrounds

Macaw allows for setting background colors, images and even setting a gradient background. One element can have multiple background images/gradients applied, that can be managed inside the Backgrounds section of Inspector pane. Backgrounds can also be changed per breakpoint.

Background Color

Background color can be set through the Background Color value field. Supported values are HEX, RGB and HSL. You can also use the keyword 'transparent', which will convert to rgba(0, 0, 0, 0) (the same will happen if the value is deleted). Macaw also supports semi-transparent background colors, which can be entered as RGBA and HSLA.

Background colors can be also chosen through the Color Picker dialog, by clicking on the color well near the background color value field. This will launch Macaw's Color Picker in which you can adjust the color and set transparency as well as the color's format.

Background Images and Gradients

Adding

To add a background, click the + button in the Backgrounds Palette and select the type of background you wish to add.

Deleting

To delete a background click on the trashcan button or right-click on the background and select Delete.

Ordering

The background palette allows for dragging and dropping of backgrounds to set the order that they will render in your element.

Editing

To edit a background, double click on the background you wish to edit in the inspector or right-click and select Edit.

Toggling Visibility

Individual backgrounds can be toggled on/off using the eye icon. If a background is toggled off, it will not be added to the element both in Macaw and on publish. Visibility can be set per breakpoint.

Selecting Background Images

Within the image background dialog you can select to import a new image to use for your background or you can pick an existing image from your library. Background images can be scaled for retina using the@2x button.

Shadows

Macaw allows you to add drop, inner and text shadows to elements on the canvas. Multiple shadows can be added to a single element and shadows can be changed per breakpoint.

Adding

To add a shadow, click the + button in the Shadows Palette and select the type of shadow you wish to add.

Deleting

To delete a shadow click on the trashcan button or right-click on the shadow and select Delete.

Ordering

The shadow palette allows for dragging and dropping of shadows to set the order that they will render on your elements.

Editing

To edit a shadow, double click on the shadow you wish to edit in the inspector or right-click and selectEdit.

Toggling Visibility

Individual shadows can be toggled on/off using the eye (icon) for a shadow. If a shadow is toggled off it will not be added to the element both in Macaw and on publish. Visibility can be set per breakpoint.

Links

Macaw allows you to add links to any element in your design. You can easily link to another page in your project or you can type in a URL.

It is recommended that links only be added to "a" tags, which results in the appropriate HREF attribute when published. However, you can add links to any element. Macaw will use ugly JavaScript onclick events to handle these types of links.

Linking to Pages

To have an element link to another page in your project you can use the "Page Menu" in the link palette to select the page you want to link to.

Linking to External Pages

You can add an external link to any element by typing in the URL you want to element to link to.