Publishing

You can publish your project in Macaw at any time using File > Publish or hitting ⌘+P Ctrl+P. On publish Macaw will generate the necessary HTML, CSS, Images and JavaScript files for your project. It will place all published files in a directory next to your .mcw file in the file system. The files that Macaw generates depends on which publish settings you have enabled.

IMPORTANT: Macaw will generate a new folder with the same name as your .mcw file when publishing. It will place all published files into this directory. On every publish it will clean out the directory, so be sure not to place important files in it.

Publish Settings

You can control all of the publish settings using the Publish Settings Dialog. This dialog can be accessed by going to File > Publish Settings or using the keyboard shortcut Shift+⌘+P Shift+Ctrl+P.

Pages

The "Pages" section of the Publish Settings dialog allows you to control how Macaw handles the different pages in your project.

  • The page list allows you to set which pages in your project will be published.
  • Consolidate Page Styles determines if Macaw will publish a CSS file for each page or if it will merge all styles into a single CSS file.

Head & Tail

The "Head & Tail" section of the publish settings dialog allows you to add code to include in the HEAD tag or the bottom of your BODY tag. Any code you add will be added to all pages. This is where you can add code for things like Google Analytics.

Styles

The "Styles" section makes available options for how Macaw should export your CSS.

  • Consolidate Styles - Uses a powerful algorithm to consolidate styles based on the relationships existing between elements. It relies heavily on well-named elements and can generate far superior code when turned on.
  • Shorthand Properties - Allows similar properties to be shorthanded. For example, border-width: 10px; border-style: solid; border-color: #000; would be shorthanded to border: 10px solid #000;.
  • Tag Selectors - Allows Macaw to use tags as selectors instead of just class names. This can help write more consolidated styles but may also result in overpowered selectors.
  • Advanced Selectors - Enables :first and :last selectors. This is an experimental feature, which can cause unwanted side effects.
  • Trim Whitespace - Trims whitespace characters from CSS files, which may be desirable if bandwidth is an issue.
  • Add Browser Prefixes - Adds browser specific prefixes for properties like linear-gradient.

Units

The "Units" section allows you to have Macaw convert units for fonts and geometry on publish. This allows you to design with more intuitive units and let Macaw handle all the conversions.

  • Font Size determines which unit Macaw will convert all font sizes to on publish.
  • Geometry determines which unit Macaw will convert all pixel-based geometry values (width, height, etc) to on publish.

Grid

The "Grid" section allows you to determine if Macaw should generate a grid CSS file when published..

Images

The "Images" section lets you determine if Macaw should generate optimized images when publishing. This is required in order to publish retina cropped images.

Preview Window

Macaw provides a built in preview window for viewing your published design. Within this window you can view all pages in your design, view the outputted code, etc. This window is just like a browser window so you can click on links you have placed in your design as well.

The interface buttons from left to right are:

  • Back/Forward buttons allow you to move forward or back to different pages you have viewed.
  • The Address Bar displays your local IP address to be used for Remote Preview, the current page you are viewing and a page menu for moving to other pages in your project.
  • The View Rendered Page button toggles the view to display the current page as it will be rendered in the browser (this is the default view).
  • The View HTML button toggles the view to display the current page's generated HTML.
  • The View CSS button toggles the view to display the current page's generated CSS.
  • The View JavaScript button toggles the view to display the current page's JavaScript.
  • The View in Finder button opens your current project in your native OS file explorer window.
  • The View in Browser button opens the current page in your default browser.

Remote Preview

The Remote Preview features allows you to view your published design on other devices (mobile devices, other computers, etc) instantly. It also pushes all updates to each of your devices every time you publish. The only requirement is that all devices must be on the same local network.

To view your design on other devices all you need to do is use another device to navigate to the address in the Address Bar of your preview window. This will load your project up just like a normal webpage. Anytime you make a change and publish your project your device will refresh to display the changes automatically.

This feature is enabled whenever you publish your project and the Preview Window is open.