10 steps to code-free RWD with Macaw

When working with breakpoints it’s important to understand that properties trickle. This opens a wealth of opportunities, especially when it comes to responsive design. 05. 09. This palette lets you examine the current size of an image in relation to its original size. This article originally appeared in net magazine issue 256. Containers  
Select both the input and the   button (hold Shift while using the Select tool). In the section labelled Input Options is a drop-down that lets you set the input’s type. Be sure to add ‘localhost’ to the kit’s allowed domains. Click   body on   the breadcrumb bar. You can publish your document at any time by pressing Cmd-P. The grid provides useful aids during the   design process. Press Cmd+G to group the elements together in a container. We’ll add the phone to the page. Select the input using the Select tool (V). Click the   Font Name   field in the Typography palette to open the Font Picker. If that tag exists in the HTML spec, it will be highlighted in green and used when publishing. Even though the header has an auto height, the phone will now extend down as we’d like it to. Words: Tom Giannattasio
Tom Giannattasio is an interaction designer and also Macaw’s Founder. You may need to dive in and out of containers to access these elements. Macaw also has a   built-in feature called Remote Preview, which enables you to broadcast your design to other devices on the same wireless network. There are plenty of other properties in here, so feel free to experiment. Type the   words ‘Email address’ and press Cmd+Return to commit. Select the input and button. Draw a button next to the email input using the Button tool   (B). This opens the background image dialog. You can also distribute a value to all breakpoints by Cmd+clicking it. The Inspector will update with applicable options. Type ‘Sign up’ and press Cmd+Return to commit. Image assets
Let’s add some images to that boring header. Set it to cover, using the size drop-down to ensure it always fills the orange header. 10. In this tutorial, I’ll show you how to use Macaw to create a responsive coming soon page without touching Photoshop or a single line of code. The first word used in the name is parsed as a tag name. Click the Outline tab. Macaw stores assets in the mcw file so you can pass it along to others without losing references. For example, click Cmd+right or left to nudge an element perfectly to a grid column. You can set these properties in the Grid palette, which   is visible when no elements are selected. This will generate all the HTML and CSS for your project and open the preview browser. You can now modify your design to cater to this specific width. Background images
We’ll now add some pizzazz to the header by adding a background image. These are positioning guides, used to help visualise an element’s margins and coordinates. From the preview window you can ensure proper rendering, view other pages and inspect the generated code. If you have different values set for a property across breakpoints, Macaw will outline the field in blue. Here you can rename and organise elements in a manner similar to Photoshop’s Layers palette. Go responsive
To make sure the design holds up in different viewports, scroll to the right of the canvas and move the drag handle to   the left to resize the canvas and watch your elements flow down the   page. Click Yes in the alert to insert a breakpoint. When you move an element around the canvas, Macaw automatically calculates the margins, floats, clears and other properties that are   necessary to place that element in a static document flow. 01. Elements can be   grouped and depths can be managed as if they were layers. When you hover over one of these fields, a property table will display showing the values on each breakpoint. Layout can be changed and styles can be reworked. You’ll notice a blinking cursor inside the shape, which indicates that this is   a   text editable element. Designers familiar with Photoshop or Fireworks should feel right at home within its interface. Note the blue guides that appear when moving an element. Select the   header and click the + button in   the   Backgrounds palette. While resizing the canvas, you’ll see a tooltip appear, indicating the width. Containers are much like Photoshop groups, but they have actual dimensions and can receive styling. Select the phone and click the crosshair in the Property bar. Now the Font Picker will include the   fonts from your Typekit account. Meet the styling tool
With our elements in place, let’s add some styling and advanced options. Responsive design is time-consuming and difficult, but Macaw can help alleviate some of   those woes. Now move the phone so that it’s positioned to the right of the text and extending below the orange. and select feather.png. Admire your work
Our design is optimised for all   breakpoints and elements are all named semantically. Macaw uses a simple dot-syntax naming scheme. You can check by navigating to the Image palette in the Inspector. Change it to   Email. You can easily toggle between breakpoints using the Breakpoints palette or by hovering breakpoints on the ruler. Macaw will handle the heavy lifting for you, but it needs some help first. Double-click on the header, then click and drag phone.png from the library to the canvas. Macaw enbles you to draw and manipulate elements on a canvas. This is a simple and way to define the semantics inside your document. This lets you work inside the container without affecting elements outside of it. Select the container element you created earlier, double-click its name in the outline and rename it ‘form.sign-up’. Draw a button
Adding elements is as simple as drawing shapes in Photoshop. To do so, we’ll use absolute positioning. That value will trickle to the breakpoints below it, but it does not travel upwards. The difference is that all of these familiar manipulations are being translated into HTML and CSS on the fly. Macaw has automatically calculated the document flow, so you can see exactly how your design will behave in the browser. Drag the handle down to a width of 900px and press Cmd. It was built specifically for the modern web, with speed and ease of use in mind. Macaw is built on the same framework as Google’s Chrome browser and therefore inherits its rendering capabilities. It’s easy to experiment with gradients, shadows and border properties. The usual suspects are all present: transforming, drag and drop, nudging, and a new friend called pudge. When you change a property, it’s applied to the current breakpoint. It also has a   fluid, column-based grid, which can be modified to your liking. Click   OK   and continue adding styles to the input and button. For this project, we’ll use a 12-column setup, with a 100% width grid and 3% gutters. Make the HTML
Macaw uses a powerful design-to-code engine to convert your document into clean, succinct HTML and CSS. Renaming elements plays a key part in publishing, because it defines the semantics and class names to use. We want to position the phone so it’s always extending below the bottom of the orange section.

Updated: 05.12.2014 — 02:53