Macaw is a professional web design tool built for both designers and developers. It was built with the goal to change how we design for the web. No longer should we need to create static deliverables and write code from scratch to bring them to life. With Macaw, you can create responsive web designs using the web as your medium. Its fluid interface is similar to image editing software so getting up and running is simple. It also boasts one of the smartest design to code engines ever built, which analyzes your design to generate smart, succinct code with the click of a button.

What Macaw is Not
Macaw is not a Content Management System. It also does not handle server side technologies. It was developed to create wireframes, prototypes and mock-ups rapidly and to provide the static HTML, CSS and jаvascript needed to quickly get your designs on the web.

Drawing

The primary way of creating elements in Macaw is drawing. Macaw allows you to draw numerous types of elements by simply clicking and dragging on the canvas.
Units

You can draw elements with percentage or pixel based widths and positions. The controls for these options appear in the property bar after selecting a drawing tool.

Element Tool (R)
The Element Tool is the most primitive of the drawing tools. It creates empty elements with no content. They can be useful for rapid prototyping or initial styling. However, it's recommended that these elements eventually be converted into containers. You can convert a single empty element into a container directly using Cmd+G Ctrl+G (the same command used to group multiple elements).

Container Tool (G)

Containers are used for grouping elements. However, containers are not like groups in standard image editing software. They have their own dimensions and can be styled like other elements.

To create a container using the Container Tool, simple click and drag on the canvas. As the area of the container expands, it will highlight any elements it covers. Highlighted elements will be placed inside the newly drawn container.

You can also create containers by selecting an array of elements and using the Elements > Group command or Cmd+G Ctrl+G. Groups created in this way will automatically set the group dimensions to fit the boundaries of the children.

Note: If the bottommost element being grouped surrounds all of the other elements, Macaw will ask if you would like to transfer presentation attributes to the new container. This will place all other selected elements inside the larger element. It is highly recommended that you do so as it typically results in cleaner and more semantic markup.

Text Tool (T)

Macaw's canvas is actually a web browser, so it renders text exactly how it will appear on the web. It can also tie in to popular font services like Typekit.
Paragraph and Point Text

There are two types of text elements in Macaw: point text and paragraph text. Simply clicking on the canvas with the Text Tool, will create a Point Text field that has auto width and behaves like an inline element. Paragraph Text, which has set dimensions and behaves like a block level element, can be created by clicking and dragging on the canvas with the Text Tool.

You can toggle between the two types of text boxes, by changing the element's width suffix in the Dimensions Palette. Choosing Auto will set the element to Point Text, whereas px or % will set the element to Paragraph Text.
Dimensions

When a text element is selected, resize handles help you identify its type and properties. If side handles are present, they indicate that an element's width is set in px or %. Top and bottom handles indicate that this text element has a height set in px or %. Lack of handles show that width or height is set to auto.

Paragraphs versus line breaks

Hitting Return to separate lines of text inside a text box will result in code output for that box being divided into several paragraphs. You can also use Shift+Return to create line breaks (
) in the code output.
Lorem Insertion

Macaw supports Lorem Ipsum text generation, for quickly filling text elements with dummy text. Simply type loremXY and press TAB. In this shortcut, Y must be set to either 'w' for words, 's' for sentences or 'p' for paragraphs. X must be an integer indicating the number of Y to insert. For example, lorem3p would insert three paragraphs and lorem2s would insert two sentences.

Input Tool (N)

Text, email, password, number, search and URL input elements can all be drawn using the Input Tool. By default, Macaw will draw a standard text input. To change the input type before drawing, click and hold on the input tool icon to reveal a sub-menu of input types. You can change and existing input type using the Type drop-down in the inspector. Note: changing the input type is not immediately noticeable within Macaw. However, the type attribute will be set when published.

Button Tool (B)

Buttons are similar to text elements, but they automatically center their text vertically. They also have a special property called "type" (editable in the advanced palette) which allows them to handle things like form submission.

Note: if using a button for a simple link, you may want to convert the button to an "a" tag (anchor element). This can be done by renaming the element (Cmd+R Ctrl+R) to "a.button-name". This may cause some unwanted style changes, but will create a more standards-adherent link.

Select (Shift-N)

The select element is basically a drop-down list. You can modify the available options for the select using the list builder in the Inspector. You can add an option by clicking the + button. Double-clicking the option name allows you to edit the text. Click and drag an option to rearrange it and click the trash icon to delete it. Note: the first option will be used as the default.



Checkbox & Radio (Shift-N)

Checkbox and radio elements can be drawn by clicking and dragging on the canvas with their respective tools. Both elements have a minimum width of 66 px and minimum height of 22 px, that are applied when drawing, but can be adjusted later.

When a checkbox or radio element is added to the canvas, three elements are actually created: a checkbox or radio, a label and a container for them both.



Embed Tool (M)

The embed tool allows you to insert raw HTML, iframe, google maps, youtube and vimeo elements into your designs. Embedded elements can be drawn just like elements. Once drawn (or double clicked for existing embed elements) the embed tool options will be displayed allowing you to insert the different types of content.



Home:

http://macaw.co/

Only for V.I.P