v.1.

CONTENTS
Chapter 1: Introduction ..............................

Chapter 2: Macaw Basics ...........................

Using Macaw in a Production Environment ........
How to Start a Macaw Project .......................
Workflow Best Practices ............................
Production Code Best Practices ....................
Naming Best Practices ..............................

7
8
11
13
14
21

Chapter 3:Tips & Tricks ............................

25

Chapter 4: Advanced Macaw .......................

Vertical Centering ..................................
Using Custom Fonts ................................
Using Custom CSS ..................................
Javascript / jQuery & Plugins .......................
Sass / LESS / Stylus .................................
Bootstrap / Foundation .............................

30
31
35
37
38
41
44

Appendix I: Different Docs .........................

50

Go beyond this book .................................

60

2014 Schonne Eldridge. All Rights Reserved.

Please do not distribute or share without permission. If you have
questions get in touch. My email address is [email protected].
I try to respond to all the emails I receive.

CHAPTER ONE

INTRODUCTION
Lets get started!

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

About this Book

Responsive Web Design with Macaw is the second book in a series about RWD.
Other books in the series cover responsive images, performance, navigation,
tools, etc.

Video Tutorials
Throughout this book, youll find links to short explanation videos that help
illustrate the concepts. These videos are free!
I also offer a complete paid video tutorial course that builds a multi-page
website from scratch, starting with Macaw. More information about that
video course can be found here: http://schonne.com/macaw/start-to-finish.

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Notes
I wrote this book assuming the reader has some basic understanding about
HTML and CSS and how they work together. I briefly cover JavaScript in
the advanced chapters, however, knowledge of JS is not mandatory to use
Macaw or to get the most out of this book.

THIS BOOK IS FREE!

If you paid for this book, get your money back.You got scammed.
GET FREE UPDATES TO THIS BOOK
If you havent already, make sure youre on my Macaw mailing list so I
can send you free updates and Macaw tutorials and tips.
http://schonne.com/macaw/

About Schonne Eldridge

Hey, Im Schonne Eldridge, a web developer and designer. I care passionately
about creating high-quality and engaging digital products. Ive founded several
successful digital companies and have worked in international education,
marketing and app development.
I live in Columbus, OH, where I spend my spare time hanging out with my
gorgeous Italian wife and my two daughters.
5

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

INTRODUCTION
Dear Reader,
Thanks for taking the time to read my little book. I created this book as a
labor of love, largely because I believe there is a need for a tool like Macaw
in the modern web development workflow. I feel that its a great way for
someone new to web development to get to the fun stuff about developing
a sitenamely creating one and pushing it live. But I also think it can be
extremely useful in a production environment with highly skilled designers
and developers. Macaw allows designers to escape from the two dimensional
Photoshop environment so they can create actual responsive websites they
can demonstrate to stakeholders.
Macaw is far from perfectafter all, its still version one software. But I
believe Macaw has a real shot at revolutionizing the early stages of a web
project. If youre reading this book, you probably agree.
This book is a continuous work-in-progress. Ill be frequently updating it
as Macaw changes and improves. If there are errors you want to correct, or
sections you want to add, feel free to contact me. Ill include your changes in
future versions of the book!
As always, if you have questions about the book or about Macaw, let me
know!
Schonne Eldridge
http://schonne.com
[email protected]

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

CHAPTER TWO

MACAW BASICS
Lets start at the beginning...

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

USING MACAW IN A PRODUCTION ENVIRONMENT

Based on Macaws forum threads and the regular emails I receive since
announcing this book, it seems clear that theres a lot of confusion about
what Macaw is supposed to be. Is it a mock-up tool? A tool that creates live
sites? Can it replace a developer or the need to learn to code? A replacement
for Photoshop or Fireworks?
I understand the confusion. The video demos the Macaw team put out are
pretty awesome, but they give a false sense that youll be able to use Macaw
as the only tool youll need to develop websites. It hearkens back to the old
Dreamweaver / FrontPage WYSIWYG editors.
Dont get me wrong: I think Macaw (and some of its competitors) are really
the way many basic sites will be built in the near future. Thanks to all the
major browsers now supporting HTML5 and CSS3 standards, these tools can
really help.
And I love that many designers whove been shy of code can now get their
noses out of Photoshop and create some really great responsive and interactive
mockups.
So, lets be clear: as a tool, Macaw rocks at creating quick mockups. Just drag
stuff on the canvas, type in some lorem ipsum, set some breakpoints and a
designer can have a working demo of a design. This is great for clients: they
can load the demo up in their browser on their laptop, tablet or phone and
really get a sense of what theyre paying for.
This feature alone would make Macaw a pretty sweet tool. But the real
magic is that Macaw can generate real usable code that could be passed to a
development team. In essence, the promise of Macaw is that a designer can
actually START the development process with the mockup.
8

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Now, Im sure youve already created a quick mockup and hit PUBLISH to
check out the code. As far as WYSIWYG code, Macaw does a stellar job in
terms of outputting clean, standards-compliant code. But, in most cases, the
code generated isnt really production code.
So what do I mean byproductioncode anyway? Well (in my view) production
code is code that is semantic, well-structured, follows a logical hierarchy and
is easily maintainable and extensible. It should be code that could be handed
to a developer and he wouldnt have to spend several minutes trying to figure
out how the layout is structured, or (worse) re-writing sections of the code.
Ideally, the developer should be able to start immediately extending the code
to meet the project needs: converting it to Sass, incorporating Bootstrap,
installing jQuery plugins, breaking the design apart for Mixture, etc.
First Things First: Know HTML/CSS
The key to getting production code out of Macaw is to think like a developer
when using it. Most designers approach Macaw like they do Photoshop: as a
tool to create a design, but to get production code you have to treat Macaw
like a graphical interface for code. Meaning: everything you place on the
canvas, every tweak to the settings, every item you import will generate code.
Thats the point. So its important that you understand how that codes going
to look when you hit PUBLISH before you make any changes to the design.
This means you need to have a core understanding of HTML and CSS.
Macaw is not a replacement for a developer. Its the starting point of the
development process.
If youre rusty on HTML/CSS, the book HTML and CSS: Design and Build
Websites is a great overview of those languages. Its written for designers so its
as non-boring as its going to get.You can get through each one in a couple
of hours. If youre dragging your feet on learning these languages, then Ive
got to tell you that youre falling behind in your skill-set as a designer. More
and more employers and clients are expecting designers to know basic code.
9

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

You dont want to be in a position where youre passed over for a job just
because you didnt spend a weekend learning one of the worlds easiest
programming languages.
Besides being aware of the code output as you design, you should also keep
in mind what you plan on doing after you finish the Macaw phase of the
project. This will help with things like naming conventions and hierarchy.
For instance, if you plan on using Bootstrap to style your forms, then youll
need to make sure youre naming the form and its inputs with classes that
Bootstrap will understand when you incorporate that framework into your
design post-Macaw.
Lastly, it will help if you have an understanding of jQuery. You certainly
dont need to know this to use Macaw. A competent developer can deal with
jquery post-Macaw, but if you understand jQuery, Macaw becomes really
awesome allowing you to create truly interactive mockups. It also opens up
your possibilities as a designer once you understand all the options available
to you.
If youre going to use jQuery in Macaw, youll want to double check with
your developer first. Many developers (myself included) have very strict
methodologies we use when dealing with jQuery or JavaScript. Macaw tends
to output pretty vanilla JavaScript. You dont want to spend time creating
jQuery interactions that the developer will just delete when the project hits
his desk.

10

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

HOW TO START A MACAW PROJECT

So, lets look at the best practices around creating and starting a Macaw project.
Keep in mind: this is the way I do it as an experienced designer and developer.
There isnt a dogmatic correct way, so feel free to use Macaw in the way
that best helps your workflow. As long as youre outputting production code,
who cares what order you do things in, right?
That being said: its probably helpful to see how an experienced Macaw user
approaches a project.
1) Open Macaw to a blank project.
2) Go to the Library tab and import your assets. You might have
a tendency to import files as you need them, but I find that workflow really
annoying because it interrupts the creative process so you can deal with
locating files on your hard drive. If theyre already in your library, you can
just drag them onto the canvas in a couple of seconds and keep the creative
juices flowing!
3) Go to the Inspector tab and setup your grid. In most cases, youll
want to use Macaws default 12 column responsive grid. Sometimes I change
it to an 8 column grid, especially if Im doing simple designs like landing
pages or single-page sites. I find the 8 column grid to be a better option for
pages with large and simple layouts.
3) Inspector tab: give the page a title. This is the title of the page as itll
appear in the browser tab - its also the title that will be indexed by Google.
So dont use a title like my first page or home. Use a title that reflects
the name of the site. I use a naming convention of sitename - pagename.
For instance, if this was a page for my portfolio, Id use the title Schonne
Eldridge - About. If this is your homepage (index) just use the sitename by
itself.
11

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

4) File>Publish Settings. Next, lets setup publishing to help with the

production code issues.
Check Consolidate Page Styles under Pages. This will give you a
smaller CSS file because Macaw will try to style multiple elements with a single
CSS rule.
Uncheck Shorthand Styles under Styles. Im not a big fan of CSS
shorthand in general, but in Macaw I think its even more important to not
shorthand the code to help with debugging issues later.
Uncheck Publish Grids under Grids. This adds an unnecessary style
sheet to the page. Unless there is a specific reason you need the grid in a separate
style sheet, Id keep this unchecked.
Check Generate Optimized Images under Images. This helps
determine which images are loaded based on the device.
Do not check Trim White Space under Styles. This minifies the CSS
making the code smaller, but unreadable. Dont do this unless youre publishing
to a live server.

View the free video How to start a Macaw Project by clicking the
image above or going to this link:
http://schonne.com/macaw/videos/
12

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

WORKFLOW BEST PRACTICES

Before we get to the best practices, we should look at what you should do
to help your workflow with Macaw in general. Like any tool, understanding
what it can do, is the first step in mastery.
Keyboard Shortcuts
The list of keyboard shortcuts for Macaw can be found under the Help menu.
Memorizing some of the actions you repeatedly use like Publish, Save, Group,
etc will allow you to work quickly.
Read the Docs
If you havent already, you should take some time to read over the Macaw
docs. You can find them under Macaws Help menu. Reading docs is pretty
boring stuff, but the Macaw team did a great job as far docs go. The animated
gifs help illustrate many of the points.

13

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

PRODUCTION CODE BEST PRACTICES

If youre using Macaw as the starting point in you production process, youll
need to think like a coder when youre laying out elements. Remember: the
goal isnt just to create a beautiful design - its to get a beautiful design that
has some great code that you (or a developer) can build from. Try to think
of Macaw as a graphical interface for the code underneath while you use it.
Dont Wait Until the End of the Design Process
You might be tempted to layout the entire design in Macaw and then go
back and try to make the project ready for production code by adding names,
grouping elements, etc,
Id encourage you to, instead, break
the design into sections and build
out each section one at a time.
This will allow you to think about
the code in a modular way - the
same way developers view code.
By building your design in Macaw
out in modules, youll be less likely
to make mistakes, ensuring youre
following best practices.
If you wait until the end and try to go back, youll find that youre having to
rework a lot of the design as you start naming and grouping elements.
Toggle Snap if Youre Using the Grid
Macaws grid is awesome.You should be using it. Be sure to toggle the snap
feature (Ctrl+U) on to ensure that everything lines up.

14

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Group Elements After You Create Them, Not Before

As you create your design, make sure you group the elements after you
complete the sections design. Dont use the container tool to create a container
and then populate that container with elements. Creating the container first
causes problems with the design process, especially if you plan on making
adjustments to its position or size.
For instance, if youre creating a header, the natural temptation will be to
create a header container and then put the logo, nav, page title, etc. inside
thatafter all, thats the order youd approach these elements if you were
hand coding. But its not very intuitive in Macaw to get elements inside and
positioned correctly inside a pre-made container. Instead, create the individual
elements for the page section and then group them together.
Design in Outline Mode
Most of your design work in Macaw should be done in Outline view, with
the occasional toggle back to the Normal view. In Normal view, its easy to
accidentally add empty divs by clicking on the canvas while a tool is selected.
Its also possible to accidentally place an element under another. Outline view
wont let unused elements disappear and clutter up the code.
Having these empty or hidden elements can affect your layout making it
difficult to position other elements or making the design wonky. Even if
they dont negatively affect your workflow in Macaw, you dont want unused
elements cluttering up your code output.

15

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

Use Copy Visual Properties (optional)

Part of making sure your CSS file wont be bloated, is to reduce the amount of
redundant styles. So whenever possible you should use Copy Visual Properties
for similar elements. For instance, if you have a series of headlines that are all
visually the same, instead of individually styling each one, use Copy Visual
Properties or (do what I do) just create a copy of it, which also transfers the
styles.
.welcome {
display: inline-block;
float: left;
margin-left: 30.4166666666%;
font-size: 1em;
line-height: 1.38;
color: rgb(18, 149, 35);
}
.welcome-1 {
margin-top: 182px;
}
.welcome-2 {
clear: both;
margin-top: 83px;
text-decoration: underline;
}

Note: To get code like I have above, you have to have two elements with the
same class name (in this case, theyre both named welcome). Unfortunately,
this breaks the naming best practices. So, youll have to decide which is more
important for your project: redundant code reduction, or semantic class names.
I will almost always choose semantics because I can fix the redundant problem
post-Macaw.

Use Auto Size Whenever Possible

By default, any element you draw on the canvas will be assigned a px height.
This isnt ideal if you want the container to grow based on the size of the
content, so you want to be sure to set the height to auto, when necessary.

16

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Place Breakpoints Where the Design Breaks

There are no standard breaking points in responsive design. The general rule
developers use is to create breaking points when the design...breaks. So if the
design starts getting wonky at 953px, then set the breaking
point there. That said: I usually like to keep my breaking
points clustered together and rounded to the nearest point
within 100px. So, if the design breaks at 953px, Ill create
a breaking point at 1000px instead so any wonkiness that
occurs between 1000-900px will fall into that breaking
point.
Theres an excellent, free Chrome extension called Window
Resizer that I use to quickly test the responsive design.
Read Output Code
Always review the code that Macaw generates by regularly hitting Publish.
The code will tell you if youve got unused elements, naming issues, etc.
Remember: the whole point of using Macaw is to get the code correct.
Pay Attention to Macaws Blue Positioning Margins
Its important to use the blue positioning margins as a way to determine how
the elements are aligning. If the element is supposed to be a child element,
but the blue margins are stretching outside of the parent container, then you
know theres something wrong with your design, most likely you havent
grouped the elements together correctly.

17

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

Dont Draw Paragraphs

Dont take your mouse and draw a square with the text tool. This will
produce width and minimum-height dimensions on the paragraph tag you
just created. Usually, this isnt something you want to do. In most cases you
want the paragraph tag to simply be auto height with no minimum.

Dont Get Overly Complex in Your Design

In general, responsive web design doesnt work well on
complex designs with lots of overlapping elements. Youll
want to keep the design fairly structured closely attached
to the grid and maintaining a hierarchy.
Macaw can handle fairly complex designs - thats not the
issue. You just dont want to spend hours trying to get a
complex design to look decent on a small phone screen.

Good luck getting this

design responsive!

Dont Mix % with px

If your design is responsive, youll want to use % for widths and heights as
much as possible. It makes creating breakpoints much easier. If a px-sized
element collides with an another element that is %-tsized, when the page
is on its way to a lower breakpoint, it will move the fixed-size elements in
odd places on the page, which causes even other elements to be pushed up
or down. If you have to use a px-sized element, be sure to resize it at the
breakpoint where it starts to get wonky as you shrink the browser window.

18

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Dont position with the Mouse

Using the nudge and pudge tools are better for accurate alignment of elements
to each other. For those that are unfamiliar with nudge and pudge:
move the entire element in a direction
PUDGE: expand the element in a direction
NUDGE:

For groups of elements, use the Align tool to keep elements aligned to each
other:

Work from the Top to the Bottom

When designing your page in Macaw, you want to start at its top and work
your way down.You want to do this because Macaw positions its elements in
relation to other elements. So, if you start at the middle, you can cause issues
with positioning elements above it.
Also, remember, the browser reads the code from the top down, so you want
to make sure that the hierarchy of elements is in the same order that the
browser will read them.

19

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

Use Global Styles

When a developer codes CSS, they usually create classes that are used for
multiple elements, such as styling for headlines, for paragraphs, etc. In Macaw,
theres no way to name an element h1 and Macaw will automatically inherit
the styling from the other h1 elements on the page. This means that each
element you put on the canvas will have to be individually styled - even if
that style is the same between elements (same color, same font-size, etc). As
you can imagine, this creates a bunch of redundant code in the CSS, which
is a pain to maintain.
Macaw gets around this issue with their Global Styles tool. With this tool,
you can create styles that you can apply to multiple elements without causing
the redundant code. It should be used whenever two elements share the same
styles.
Once you apply a global style to multiple elements, you can still style each
element individually afterwards. In this case, the global style provides the
baseline.

View the free video Global Styles in Macaw by clicking the image
above or going to this link:
http://schonne.com/macaw/videos/
20

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

NAMING BEST PRACTICES

If you want to make sure youre outputting production code in Macaw you
have to make sure youre naming every element you place on the canvas. By
default, Macaw will assign sequentially numbered class names to elements
So, the easiest first step to production code
is to get into the habit of renaming any
element as you place them on the canvas.
Macaw always assigns a class name to every
HTML element it generates, so naming an
element h1 will result in
<h1 class="_text"></h1>
For HTML headlines (h1, h2, etc), Macaw
will add a single shared class for each of the
same headline type, but add a second class
name for that specific element. For instance,
if you place three h1s on a page and name
each one h1, itll generate this code:

<h1 class="_text _text-1"></h1>

<h1 class="_text _text-2"></h1>
<h1 class="_text _text-3"></h1>
So, in this case, Macaw added the common class name _text to each of
the h1s and a second class name _text-x for each specific h1.
Our goal is to not have any of these random names in our production code.
The best way to understand how to keep things semantic is to understand
Macaws naming rules:
21

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

Macaws Naming Rules

1. By default the HTML tag will be based on the tool used (text = <p>, element
= <div>, etc). This can be overridden by the user if you put in a different
tag type.
2. Every tag has a class name. By default that will be auto-generated.
3. If a user inputs the same class name on two different inputs Macaw will
append a -x (where x is a sequential number).
4. If the user names the element with just the tag, (no class name), Macaw will
assign a classname starting with _.
5. If the user has multiple similar tags without class names, Macaw will
generate a class name and append a -x to the class name (where x is a
sequential number).

So, what does all this mean? And how does it apply to creating production
code?
What you want in production code is semantic markup, where the HTML
and CSS are self-descriptive and make sense structurally. This means using
class names that clearly describe the function of the element, with appropriate
semantic HTML tags.
If a developer looks at your generated CSS and HTML, they should be able
to easily understand your intent without needing to load the page in the
browser. By having code structured this way, you will make it easier for the
code to be maintained later - even by a developer who doesnt have access to
Macaw.

22

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Naming Best Practices

1. Get in the habit of naming every element you place on the canvas.
2. Every element should be named with this pattern: tag-name.classname. For example: div.content, img.logo, input.email etc.
3. Wherever possible, use HTML semantic tags like header, footer, nav,
article, etc. instead of div.
4. Be sure to name the classes with semantic names that make it easy to
understand the elements function.
5. Never use the same class name on more than one element.
6. Never use only the tag name without a class name.

View the free video Naming Elements in Macaw by clicking the

image above or going to this link:
http://schonne.com/macaw/videos/
23

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

If you follow the naming best practices, you should get production code like
this:

With a CSS file like this:

This is beautiful, semantic code that any developer can read and understand
without needing to load the project in Macaw or fire up a browser.
Brings a tear to the eye...
24

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

CHAPTER THREE

TIPS & TRICKS

Dropping the Knowledge

25

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

Focus
You can center an element to your screen, by clicking on this icon in the
Outline tab.

Applying the same style in different breakpoint:

hit (cmd) or (win) + the properties you want to see applying everywhere.

Generate Lorem Ipsum

To fill a text box with random Lorem Ipsum, type lorem + The number of
paragraphs you want + p and then press TAB. You can do the same with
sentences (lorem4s + TAB) or words (lorem7w + TAB).
For example: typing lorem3p and then hitting TAB, will get you 3 paragraphs
of Lorem Ipsum text.

26

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Create a List
Creating an ordered or unordered list in Macaw is pretty easy:
1) Use the Text tool to create each list item. Place each list item
below the previous one to create a list of items in descending order.
2) Name each text box in the list li.li
3) Select all the text boxes in the list by dragging around them or
holding SHIFT as you click each box.
4) Group the text boxes (ctrl+g) and name the group ul.ul
This can be done for ordered lists (or), unordered lists (ul) and description/
definition lists (dl)

Macaw imports a CSS reset called standardize.css that will erase all the
bullet points from lists. You can hack this by adding some code to your
Head & Tail section
ol, ul, li {
list-style: normal;
}
The .mcw file can be opened outside of Macaw
Macaw project files are just zip folders. You can rename the extension from
.mcw to .zip and open it like you would any zip folder. This is great if you
need to pull out an asset like an image or font.
27

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

Links vs. Buttons

Buttons are ONLY for forms. If you need a button somewhere else, just
create a link and style it into the shape of a button.
Select more than one border
Use shift to select mulitple border sides at once.

Delete Swatches and Global Styles

Right click or (ctrl + click) on a swatch of Global Style to delete it.

28

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Components
Components are a huge time saver, especially if youre going to have similar
items across multiple pages on a site like call-to-action buttons or sign-up
forms.
The best way to create a component is on a separate page outside the page
youre currently designing. This prevents the component from accidentally
inheriting page specific positioning issues. After you create the component
and save it, the component will appear in your library ready to go.
Favicon
To add a favicon to your project, go to File>Publish Settings>Head & Tail
and add this code just above the </head>
<link rel="shortcut icon" href="/favicon.ico">

Be sure the name and path of the favicon is correct. Also: keep in mind that
Macaw will delete any files or folders in its generated project folder that
arent from Macaw, so if you want the favicon in the Macaw folder, youll
want to put it there after you do the last publish.

29

RESPONSIVE WEB DESIGN MASTERS

CHAPTER THREE

ADVANCED MACAW
Time to Level Up!

30

http://schonne.com/rwd/

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

VERTICAL CENTERING

If youre new to web development, welcome to one of the most annoying

problems we developers face - vertical alignment. Its not that aligning
something vertically is difficult, its just that something so simple - positioning
an element in the center of a div - is way too complex.
Macaw solves some of these headaches. Here are the five ways to vertically
center an element thats inside another element:
Using Align Vertical Centers
This wont work for centering child elements inside parent elements, so youll
want to ungroup the elements for this method to work.
1. Make sure the elements arent grouped together
2. Place the elements approximately where you want them. For
instance, place a text element on top of box element.
3. Select both by dragging around them or click on each holding
the SHIFT key.
4. Click the Align Vertical Centers button in the Inspector tab.
If you dont see the button, you probably dont have more than
one element selected.
5. After you align the elements, group them together to create a
parent/child relationship between them.
31

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

Absolute Positioning (when both elements are fixed height)

For this to work, both the parent and child elements must have a fixed (px)
height.
1. Make sure the elements ARE grouped together and both have
fixed (px) heights.
2. Use the Direct Selection tool

to select the child element

3. With the child element selected, click on the Absolute

Positioning
button.
4. Click the Align Middle button

Positioning Using Padding (when parent element is auto height)

The child can be auto or fixed (px) height for this to work, however the
parent must be set to auto. Both elements should be grouped together.
1. Make sure the elements ARE grouped together and the parent
has an auto height.
2. The child element should have a top margin of 0
3. Select the parent element. On the Inspector tab, Shift+Click
the top and bottom padding buttons and change the padding to
make the element the size you want. The child element should
stay in the vertical center.

32

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Line-Height Positioning (single line of text without parent element)

Im including this one because its a pretty standard CSS technique. It doesnt
require a parent element and works in all browsers, even older versions of IE.
The main downside is that it breaks if you squeeze the element in a responsive
design using a fluid (%) width. For that reason, its best as a fixed (px) width
and height element.
1. Create a single line of text with the Text tool.
2. Give the text element a height of auto.
3. Recommended: give the text element a fixed (px) width.
4. Adjust the Line-Height button to the height you want.

Exact Center Positioning (child and parent fixed or fluid height and width)
This is probably one of the most common CSS tricks to get an element
exactly in the center of another element, even in a responsive design where
the parent element shrinks.
1. Make sure the elements ARE grouped together and the parent
has an auto height.
2. The parent element should have a fixed (px) or fluid (%) height
and width. Neither should be set to auto.
3. The child element should have margins of 0. The child should
be sitting in the upper left corner of the parent div.
4. Open the Head & Tail section under File>Publish Settings...

33

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

5. Directly above the </head> Tag, paste this code:

<style>
.parent {position: absolute}
.child {

position: absolute;

top: 50%;

left: 50%;

height: 30px;

width: 50px;

margin-top: -15px;

margin-left: -25px;

margin-right: 0;

margin-bottom: 0;
}
</style>

6. In the code above:

Change the .parent and .child class names to the names of your parent
and child elements.
Change the childs height and width to your childs height and widthit
can be either px or %
Change the top-margin to half of the elements height
Change the bottom-margin to half of the elements width

Since were overriding the Macaw styling with this hack, the changes wont
be visible on the Macaw canvas in design mode. However, youll see them
when you Publish.

View the free video Vertical Centering in Macaw by clicking the

image above or going to this link:
http://schonne.com/macaw/videos/
34

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

USING CUSTOM FONTS

Macaw ships with Google Web Fonts which you can use in your projects for
free. Adding Typekit fonts is pretty trivial using the instructions in the docs.
But the docs glosses over how to use system fonts in production. So lets
unpack that:
Note: Only do the following steps when youre finished with your Macaw project. When you
publish with Macaw, it wipes out all the non-Macaw generated files and folders inside its
generated project folder. So if you place your web fonts in your Macaw generated project
folder and re-publish, the fonts will be removed.

1) Create your Macaw design using the system fonts you want. Be sure
to keep track of the system fonts youre using - youll need that later. Besides
the font name, youll also need to keep track of what weight (400, 600, etc)
youre using and any font styling (italic, outline).
2) Publish and look at the CSS that Macaw generated. You need to
write down the font names that Macaw chose to use for each of your system
fonts in use. If the font name has more than one word, Macaw will put quotes
around the font name. Make note of that.
3) In the Macaw project folder, create a Fonts folder and place the
necessary webfonts inside. You have to use webfonts - you cant just copy
your font from your system and place it inside your Macaw project. There
are usually 4 versions of the font for the web: .eot, .svg, .ttf, and .woff. If you
dont have these webfonts, you can either purchase them from a font supplier
or create them yourself (for free) using Font Squirrel (http://www.fontsquirrel.
com/tools/webfont-generator).

35

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

4) In Macaw, go to File>Publish Settings>Head & Tail and paste this

code directly above the </head> tag:
<style>
@font-face {

font-family: 'Corki';

src: url('/fonts/corki-regular.eot');

src: url('/fonts/corki-regular.eot?#iefix')format('embedded-opentype'),

url('/fonts/corki-regular.woff') format('woff'),

url('/fonts/corki-regular.ttf') format('truetype'),

url('/fonts/corki-regular.svg#corki-regular') format('svg');
}
</style>

Youll want to change the font-family to the name of the font that
Macaw is using in its generated CSS. Youll also want to change the font file
names to match the ones in your Macaw fonts folder.
Its important to remember that Macaw and your local browser will be showing
the system font when rendering the web pages. Web fonts can sometimes
render oddly, so youll want to test the page out on a device that doesnt
have that system font installed to double check that there are no web font
rendering issues.

View the free video Using Custom Fonts with Macaw by clicking the
image above or going to this link:
http://schonne.com/macaw/videos/
36

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

USING CUSTOM CSS

You can add custom CSS to the Head & Tail section of the Publish Settings...
The Head & Tail section lets you put embed CSS styles in the head section,
but Id only recommend doing it for minor changes specifically related to the
design phase of your project.
A good example of some CSS youd need to place in Head & Tail would be
for CSS pseudo elements. Lets say you wanted to make a dropcap for your
first paragraph on a page. (a dropcap is a large first letter of a paragraph).

So, if we have a Macaw-generated code like this:

<article class="article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

We can target that first letter by inserting code in the Head & Tail section just
above the </head> tag.
<style>
.article p:first-child:first-letter { float: left; color: #903; font-size: 75px;
line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px;
font-family: Georgia; }
</style>

When adding custom CSS, you have to keep in mind CSS heirachy, so if you
make changes and they are being over-ridden by Macaw, youll need to be
more specific or add !important to the attribute.
CSS that you add via the Head & Tail wont show in the canvas view. Youll
only be able to see those in the published view.
37

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

JAVASCRIPT, JQUERY & PLUGINS

In most cases, youre going to want to add most of your JavaScript and plugins
after the Macaw phase of your project so you can control the flow of the
JavaScript. If youre planning on handing the Macaw-generated code to a
developer, youll want to check with them about how much JavaScript they
want you to put into the project. Most developers have JavaScript standards
and workflows they followyou dont want to make unnecessary work for
the developer.
However, there are times you may need to have JavaScript active during the
Macaw phase so you can deal with design issues related to interactivity. So
heres how Macaw handles JavasScript:
If any JavaScript is written in the script editor (F8) , Macaw will place jQuery and an index.

If you dont have

any code in the script editor, then those files wont be generated. So keep in
mind that you wont have access to jQuery inside Macaw by default. The
code you write inside the script editor doesnt have to be jQuery-based code.
Any code (even invalid code) written in there will generate the files.
js file in a js folder in the generated code directory after publishing.

Macaw uses v1 jQuery, which is the most backwards compatible version, however its

If you dont care about being compatible

with older versions of IE, Id recommend swapping out the v1 jQuery for
v2 which is available from the jQuery website. Youd do this swap out postMacaw.
also the largest and slowest version.

Code written in the script editor appears immediately after jQuery in the production code.

This means the browser reads the JavaScript on the page in this order:
1. JavaScript code placed in the Head section
2. jQuery
3. index.js (code from the script editor)
4. JavaScript code placed in the Tail section
38

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Understanding when code will be read helps when youre dealing with
dependencies, particularly when it comes to jQuery plugins or other included
scripts.
jQuery Plugins
So heres the problem with jQuery Plugins in Macaw: we insert the plugins
AFTER the index.js file appears. This means you dont have access to the
plugins in the script editor. Heres how you insert a plugin:
This link
has to reside outside the Macaw generated directory or it will be overwritten
whenever you hit. You want to place this link just above the </body> tag.
1) In the Head & Tail section of Publish Settings, insert a link to your plugin.

2) Immediately following the link to the Plugin in the Tail, add your jQuery code

Youll want to wrap the code in a $(document).

ready() function so it will fire the code after it loads in jQuery and your
plugin.
specifically for the plugin.

39

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

Youll want to pay close attention to the code you use to configure your
plugin. Many plugins use IDs to target elements in the DOM so youll want
to be sure to set an ID on the element in Macaw.

Remember: if youre having a lot of problems getting a plugin to work inside

Macaw, just do it after you finish the Macaw phase and work with the
generated code in a text editor. The point of Macaw is rapid prototyping.
Dont get bogged downinstead play to Macaws strengths.

View the free video Using JavaScript, jQuery, & Plugins with Macaw
by clicking the image above or going to this link:
http://schonne.com/macaw/videos/
40

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

SASS / LESS / STYLUS

Im a huge fan of Sass: I use it in all of my projects. And, like most front end
developers,I dragged my feet about learning it only to realize that its far superior
to standard CSS. For now, Macaw doesnt support a CSS-preprocessor like
Sass out of the box. That means well have to do the conversion of Macaws
CSS output post-Macaw.
Advanced Macaw Naming Rules for CSS Pre-Processors
All of Macaws generated CSS is flat, meaning: theres no indication on the style
sheet of a heirachy of elements. Pre-processors like their code in heirachies,
which make it easier to read and maintain. It also prevents elements with
accidental duplicate class names from conflicting with each other.
Lets say we have a simple nav like this:
<header class="header">

<h1 class="welcome">Welcome!</h1>

<img class="logo" src="img/logo.png" />

<ul class="nav">
<li class="about">About</li>
<li class="contact">Contact</li>

</ul>
</header>

Macaw will output this code like this:

.header { ... }
.welcome { ... }
.logo { ... }
.nav { ... }
.about { ... }
.contact { ... }

41

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

So, what we need is a way for Macaws CSS to be hierarchical. Were going
to do this by using semantic names that will describe the elements position.
What were going to do is place a double dash (--) between each semantic
name based on it hierarchy, so, in this header example, wed nave the element
like this:
<header class="header">
<h1 class="header--welcome">Welcome!</h1>
<img class="header--logo" src="img/logo.png"/>

<ul class="header--nav">
<li class="header--nav--about">About</li>
<li class="header--nav--contact">Contact</li>

</ul>

</header>

Macaw will output this code like this:

.header { ... }
.header--welcome { ... }
.header--logo { ... }
.header--nav { ... }
.header--nav--about { ... }
.header--nav--contact { ... }

Because Macaw alphabetizes the class names in its CSS output, this naming
convention naturally groups the names together.

42

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Prep the Macaw-generated CSS for conversion

In a text editor, replace double dashes (--) with a dot followd by a space. This
will break up the long names and will reveal the underlying hierarchy that
can be used by the pre-processor.
2) Drop the code in one of the free CSS to CSS-preprocessor converters. This will convert

the CSS to the pre-processor codebase.

Sass: http://css2sass.heroku.com/
LESS: http://css2less.cc/
Stylus: http://css2stylus.com/

View the free video Using Sass / LESS / Stylus with Macaw by
clicking the image above or going to this link:
http://schonne.com/macaw/videos/
43

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

BOOTSTRAP / FOUNDATION

First: let me say that Bootstrap and Foundation wont integrate perfectly with
Macaw out of the box without the Macaw developers baking it into the software.
But Bootstrap and Foundation are important tools for many professional
designersits one of the most requested features on the Macaw forumsso a
book about professional Macaw development needs to address this fact.
Ive had several discussions with Macaw users about Bootstrap/Foundation
and some people want to just drag and drop Bootstrap/Foundation-formatted
components and elements onto a canvas to create a design.
What they really want is a Bootstrap visual editor (you can see a comparison of
the most popular ones here).
These visual editors are all about making quick and dirty websitestheyre very
utilitarian. The problem with visual editors is they tend to produce sites that look
and feel very similar to each other. This is fine if youre creating landing pages
or webapps, but most people dont want their important personal or commercial
sites and blogs to look like a template.
This is where Macaw comes in. Macaw is about design. Its closest relative is
Photoshop. If you want to create something unique and special, then a tool like
Macaw will help you WOW visitors and stakeholders.
This doesnt make Macaw better than a visual editoryou just need to pick the
right tool for the job.

PLEASE NOTE

I dont use Bootstrap or Foundation professionally as a web designer. The information on

these pages about getting Bootstrap/Foundation to play nicely with Macaw is probably
flawed (if you notice issues, let me know how you fixed it so I can update the book).
Personally, if I was going to use one of these frameworks, Id use it post-MacawId just put placeholders
in the Macaw design where I want to put the Bootstrap/Foundation component. For element styling, Id
add the Bootstrap/Foundation class names to HTML in the text editor post-Macaw.
So, these next few pages are more proof-of-concept than practical solution. If it becomes too frustrating,
just add the Bootstrap/Foundation styles and components later. Thats what I would do.
44

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Bootstrap and Foundation really offer three main features: a grid system, element
styling and components.
Grid System At

this point, theres no way to integrate the grid system into Macaw.
The reason for this is obvious: Macaw already provides a grid system and theres
no way to override it. Frankly, the Macaw grid is great and will suit most purposes.
If you absolutely must use the Bootstrap/Foundation grid, you can try to do
that post-Macaw in a text editor (good luck!) but, in that case, Id probably not
use Macaw for that project.

Bootstrap/Foundation likes stacking class names to create optional

styling. For instance, in Bootstrap, the code:
Element Styling

<button type="button" class="btn btn-primary btn-lg btn-block">Block level

button</button>

creates this:

Because you can use multiple class names in Macaw, its totally possible to use
Bootstrap/Foundation for element styling!
Ill say it right now: the Bootstrap/Foundation components are
awesome! Its really one of the main reasons to use these frameworks. Were going
to be taking advantage of Macaws embed tool to get this magic in our design.
Components

BE CAREFUL!

When using a framework like Bootstrap or Foundation, they tend to reserve class names
for themselves. You want to make sure you arent creating elements in your design that
will conflict with the framework.
An obvious trip-point is container. Macaw might give any containers your create the class name of
container. Bootstrap has a very specific use-case for divs called container which will be applied
causing wonky or unexpected behaviors in Publish view.
45

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

Adding Bootstrap/Foundation to Macaw

The first thing we need to do is get the framework inside Macaw.
Place the
tag and place the frameworks

1) In the Head & Tail section of Publish Settings, insert links to your framework.

frameworks CSS link just above the

js link just above the </body> tag.

</head>

Bootstrap (Be sure to check here to ensure youre using the latest links)
Place CSS above </head> tag:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/

bootstrap/3.2.0/css/bootstrap.min.css">
~ Place optional Bootstrap themes directly below the main Bootstrap CSS:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/

bootstrap/3.2.0/css/bootstrap-theme.min.css">
Place js above </body> tag:

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/
bootstrap.min.js"></script>
Note: some BootStrap components require additional js files to be installed. Just add them below
this main one using links outside of your Macaw project.

46

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Foundation
Place CSS above </head> tag:

<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/

foundation.css">
Place js above </body> tag:

<script src="http://cdn.foundation5.zurb.com/foundation.js"></
script>

Macaw can integrate jQuery

into your project, but only if there is some valid JavaScript code in its script
editor. Go to VIEW>SCRIPT EDITOR. If its got code there already, youre
done. If not, declare a blank variable like so:

2) Force Macaw to integrate jQuery into the project.

This will force Macaw to add jQuery to your project, which Bootstrap and
Foundation need to work as expected.
47

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

Adding Bootstrap/Foundation-styled Elements

So, keep in mind that were bypassing Macaws canvas when we place the
CSS and js links in the Head & Tail. This means any elements you place on
the canvas wont be styled in Macaws design modeyoull see those changes
when you Publish.

So, lets say you need a button with the following Bootstrap class names:
btn btn-primary btn-lg btn-block

This is pretty easy to do in Macaw. Just create the button like normal, but in
the class name section you want to follow this pattern:
Semantic Class Name | Bootstrap/Foundation classes
Its important that you add the semantic class name first, otherwise Macaw
could auto-generate a specific classname for this element for you. Its the
semantic class name that well use post-Macaw to make specific styling changes
to the element, if necessary. Also, to get multiple class names in Macaw, you
cant use a space keyyou need to use a dot instead. So if the semantic name
youve chosen for this button is submit, in Macaw give the button element
this class name:
button.submit.btn.btn-primary.btn-lg.btn-block

and Macaw will generate this code when it publishes:

<button class="submit btn btn-primary btn-lg btn-block">Submit</button>

You should see the Bootstrap/Foundation styles when you look at the Publish
view.
48

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Adding Bootstrap/Foundation components

This is pretty easy.Were just going to use Macaws embed tool. Keep in mind
that some components require additional CSS and js files to work, so be sure
to add those to the Head & Tail section, if necessary.
1) Get the components HTML code.
2) Use Macaws embed tool and draw where the component will be. Keep

in mind that
the component will be inside this embed tool, so if you make the embed too
small, itll cut off the component.
3) Insert the component code.
4) Hit Publish and cross your fingers. Hopefully youll see what you were expecting.

At the time of this writing, the embed tool had only been released for about
a week. I, and several forum members, have noticed bugs (like embeded spans
would have their class names stripped out when publishing). The Macaw
developers are pretty quick to fix bugs so if you find any, be sure to post it on
their forum.

View the free video Using Bootstrap / Foundation with Macaw by

clicking the image above or going to this link:
http://schonne.com/macaw/videos/
49

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

APPENDIX I

A DIFFERENT DOCS
The Docs Before the Docs

50

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

NOTE: I wrote these docs before Macaw released their official docs. Im including these in the
appendix for those who may find it useful, however I think the official docs are superior. Id suggest
referring to those first.

1. MENU BAR This is pretty standard for all software. Well go over each of the options later, but for now, this is basically
where you go to create, save, publish, make changes to the interface and edit your design.
2. PAGES These are tabs showing the currently open pages youre editing. The tabs work like standard browser tabs (like
Chrome or Firefox). The hamburger icon to the left allows you to quickly navigate between, create, duplicate or delete
pages.
3. VIEW MODE This is a set of options that appear based on what youre editing. The options change when you select a
tool or object.
4. TOOL BAR If youve ever used a software design tool like Photoshop, this will be very familiar to you. These are a list of
common tools youll use to manipulate your design.
5. STATUS Macaw puts crucial status information here like what breakpoint youre viewing or if the DOM is editable or
not. This will make more sense later.
6. RIGHT PANEL This section has three tabs.
INSPECTOR Similar to the View Mode in that it provides options based on what youre currently
doing in the main window.
OUTLINE shows us the breakdown of the elements on the page and how theyre ordered.
LIBARARY gives you quick access to the web pages assets (like images) so you dont have to search
around your computer for them.
7. PREFERENCES You can setup global preferences for your project here. Theres also a link to contact the Macaw developers if you feel like harrassing them with annoying questions.

51

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

MENU BAR

Lets look at each of these menu options in detail.

FILE These menu items are related to project and page creation, opening,
saving, importing and exporting.
NEW PROJECT A project is a page with a collection of pages and assets. By default,

Macaw opens with a blank project so you only need to create a new project if youve
started working and decide to start over with a new project.
NEW PAGE Creates a blank webpage layout based on your global preferences and

attaches it to your currently open project.

OPEN Opens a mcw file (a Macaw project file).You can also just double click on the

mcw file to launch Macaw or drag the mcw file onto the Macaw icon.
SAVE Saves the currently open project. If there is no open project, it will save the

focused page (see ALERT). If the project/page has never been saved, this will function
like a SAVE AS...
SAVE AS shows us the breakdown of the elements on the page and how theyre

ordered.
IMPORT TO CANVAS gives you quick access to the web pages assets (like images) so

you dont have to search around your computer for them

PUBLISH gives you quick access to the web pages assets (like images) so you dont

have to search around your computer for them.

PUBLISH SETTINGS gives you quick access to the web pages assets (like images) you

dont have to search around your computer for them.

52

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

ALERT!
PROJECTS vs PAGES Macaw is a little odd about how it deals with Projects vs
Pages. This is what you need to know:

A PROJECT CONSISTS OF A MINIMUM OF A SINGLE PAGE When Macaw opens, it

creates a blank project with the first page called index.

MULTIPLE PAGES You can add pages to the open project by clicking FILE>NEW
PAGE and giving it a name (other than index which is already taken).
WHEN OPENING A PROJECT, ONLY THE LAST PAGE IN FOCUS IS SHOWN This is

a little confusing at first.Where are the other pages you created? Theyre still attached
to the project, but Macaw didnt open them even though they were open when you
saved the project.To reopen the closed pages click the hamburger icon in the PAGES
section of the interface (just below the menu).

RECENT PROJECTS It would be nice if there was an option to select recent projects
under the FILE menu so you could quickly switch between projects. That feature doesnt
exist yet, unfortunately.

EDIT These are pretty standard EDIT submenus, but there are a couple of
Macaw-specific ones Ill unpack below.
COPY/PASTE VISUAL PROPERTIES This essentially copies the CSS properties for the

object, but not the object itself. For instance, if a box has a background color of
blue, you can copy that background color and paste it onto another object (like a
paragraph).
MOVE BACKWARDS/SEND TO BACK etc This places elements on top or below other

elements.

SELECT Most likely youll select object with your mouse, but sometimes you
cant do that easily.These options let you select all the elements in the canvas,
or, if you select an object, you can toggle to elements behind or in front of
the selected element
53

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

VIEW These options allow you to toggle tools into view.

SHOW INSPECTOR/OUTLINE/LIBRARY This just toggles the tabs in the right-hand panel
SHOW COLOR PICKER Opens a color picker which allows you to color the selected

element and set its transparency (see the Tools section for more info)
SHOW QUICK SWATCHES Opens the swatches panel.
SHOW SCRIPTS Opens the scripts window.
SHOW OUTLINE MODE Outline Mode shows the elements without aesthetic styling.

It allows you to quickly understand the designs spacing so you can troubleshoot the
design.
CENTER CANVAS Puts the canvas in the center of the screen.
TOGGLE POSITIONING GUIDES Positioning Guides are the light blue boxes that appear

when you select an element.

ELEMENTS These options are related to the elments in your canvas. It gets
tricky here, so pay attention.
GROUP/UNGROUP Grouping is important to keep multiple elements (like the logo,

nav and background of a header) grouped together so they can act like a single
element. This makes it easier for positioning and styling, but it also helps clean up
your CSS code.
EXPAND Expands the element to the full width (100%) of the grid.
FIT TO CHILDREN When you want to adjust the container to its children, e.g.You have

a div which contains a couple of images that you just resized, and now you need to
adjust the divs width/height to their combined dimensions.
LOCK SELECTED/UNLOCK ALL Makes the element unselectable and locks it into

position in the canvase. Theres no way to individually unlock an element (since you
cant select it), so you have to UNLOCK ALL.
54

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

CREATE COMPONENT If you have elements or a group of elements you plan to reuse,

you can select it and create a component here. The Components you created will
appear in your project Library. To use the component, just drag it onto the canvas.
BREAK COMPONENT REFERENCE If you want the selected component in the canvas

to have styling not related to any components. This basically makes the selected
component no longer a component. This doesnt affect any other instances of the
component on the canvas and it doesnt delete the component from your project
Library.

PAGES

The pages section of the interface has all the pages for the project listed under
the hamburger icon.
To create a new page, click the grey square with a plus symbol on the right
side of the word pages.
To delete a page, hover over the page you want to delete and click the trash
can icon to the right of the name.
To make a duplicate of an existing page, hover over the page you want to
duplicate and click the two grey rectangular boxes to the right of the page
name.
To open an existing page, just click on the page name.
To the right of the hamburger icon, youll see the open pages in tab form.
Click the tab you want to put into view.
55

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

VIEW MODE

These are modes to help you with the design and layout of your page. NOTE:
youll only see this option if you have no elements selected in the canvas.You
can also toggle between view modes under the VIEW menu or with hot keys.

NORMAL This is the normal layout in WYSIWYG mode. What you see
on the canvas is pretty much what will end up on the webpage when you
publish.

OUTLINE Outline mode is awesome. It shows just the unstyled elements like
divs and text on the canvas. This is the mode I usually do most of my design
work in because it allows me to concentrate on the design, positoning and
flow of the page without the distractions of the styling. Its also really easy
to accidently place an element on the page (like a blank text div) and those
empty divs cant hide in this mode

WIREFRAME Wireframe mode shows the design in black and white. This
helps if youre still trying to decide the color scheme.
56

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

TOOLBAR

These are the tools youll use to manipulate your canvas design. If youve
every used a design tool like Photoshop, youll be familiar with the toolbar
and some of its tools.
SELECT TOOL This allows you to select elements in the canvas.
DIRECT SELECT TOOL This will function like the Select Tool unless the
elements are grouped together. In that case, the Select Tool will select the
group, while the Direct Select Tool will allow you to select individual elements
within the group.
TEXT TOOL Place text on the canvas. You can click on the canvas with this
tool and start typing if you want, but if the text area must have a specific
width or height (like a centered h1), you can use this tool to drag a box on
the canvas and position the text within.
ELEMENT TOOL This allows you to drag a div onto the canvas.
CONTAINER TOOL Like the Element Tool, this draws a div, but the purpose
is to create a CSS group around several elements. For instance, if you wanted
57

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

an ARTICLE container for elements related to articles, you can do that here.
That way you can target articles and their inner content with global styling,
or provide semantic markup.
BUTTON TOOL Lets you draw a clickable button on the canvas that you can
wire up to a javascript event, a form or html link.
INPUT TOOL The input tool allows you to create several common inputs like
text, textarea, select, checkbox, and radio.
HAND TOOL Lets you drag around the canvas with the mouse without
worrying about accidently selecting an element.

58

http://schonne.com/rwd/

RESPONSIVE WEB DESIGN MASTERS

Publish Settings

This shows a list of all the pages in the project. They are all checked by default. If there is a page you dont
want to publish, uncheck it here.

PAGES

CONSOLIDATE PAGE STYLES: Check

this is you want Macaw to write CSS that will be used for all the
pages rather than separate CSS files for each page. In most cases youll want to check this.

This allows you to put metatags, analytics tracking codes or other custom elements across all the pages
that you publish.
HEAD & TAIL

STYLES

These are several options about how the CSS will be output.

CONSOLIDATE STYLES: Im

SHORTHAND PROPERTIES: This

ADVANCED SELECTORS: This

not sure why this appears here again but it does exactly what the
PAGES>CONSOLIDATE PAGE STYLES option does
uses CSS shorthand for properties like BACKGROUND, FONT, etc. I
personally dislike CSS shorthand because it makes it difficult to debug styling issues in larger projects if
the styles are truncated. For that reason, I deselect this in my projects.

attempts to use CSS pseudo-elements to further reduce the CSS file. Be

careful! Macaw can accidently cause CSS conflicts using this technique, so you should only enable it if
you have strong CSS skills and an understanding about how pseudo-elements work so you can debug
the code output, if necessary.

TRIM WHITESPACE:This

minification will make the CSS file difficult to read and debug later. Only do
this if you are planning on deploying the code output from Macaw without further editing.

ADD BROWSER PREFIXES: Youll

want to keep this checked to ensure that your webpage will work in all
the major browsers. Im not really sure why the developers included this option since the only benefit
to unchecking it is to save a few bytes in the final CSS file size.

These allow the CSS output to use px, em, rem or % for fonts or elements. If youre not familiar with em or
rem, I would suggest leaving these values alone. Many web designers prefer to use em or rem as their primary unit
on the page because it can work well in responsive designs, but there are some drawbacks to this approach, especially
if youre trying to debug a designs CSS code. Use these units only if youre familiar with them.

UNITS

This doesnt work very well in Macaw. The grid thats output isnt very usable in professional
production since it doesnt follow any of the standards most grids follow (like bootstrap or skeleton). I uncheck this
option since I dont use it.

PUBLISH GRIDS

This can be a bit wonky. For now, Id leave this unchecked. If retina images are
important to you, then you should add them in by hand after you publish with Macaw.
GENERATE OPTIMIZED IMAGES

59

RESPONSIVE WEB DESIGN MASTERS

http://schonne.com/rwd/

GO BEYOND THE BOOK

PROJECT START TO FINISH WITH MACAW

DESIGNING A MULTI-PAGE SITE AND PUSHING IT LIVE

Youve got the basics of Macaws production code workflow, now see these
best practices applied as I build an entire site from scratch. Ill start with a
blank Macaw project and youll see step by step as I design each page in
Macaw and ensure the generated code is semantic and ready for production.
But I dont just stop there! After the Macaw phase, youll see how I approach
the project post-Macaw! Youll see me edit the Macaw-generated code in
Sublime Text 3 and Mixture and push it live.
So if youd like to see how a professional designer and developer uses Macaw
in an actual project from start to finish - look no further!
Find out more on my website: http://schonne.com/macaw/start-to-finish

60