O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Getting Started with Macaw: Build responsive websites with a cutting-edge application

Getting Started with Macaw: Build responsive websites with a cutting-edge application

by Rex Rainey, Joe Chellman
Publisher: Peachpit Press
Release Date: December 2014
ISBN: 9780133995923
Topics:
View table of contents
Start reading

Book Description

Macaw is drawing wild cheers from the web community for its simple and elegant tools for web design. According to Jeffrey Zeldman, founder of Happy Cog, Macaw is “the superhot web design tool of the future."

This essential book lays a solid foundation for using Macaw and walks readers through the the basics of the application before moving on to how to set up styles, handle text and images, create responsive designs, and publish pages.

Filled with full-color images accompanying step-by-step instructions, this invaluable book give readers a solid footing to start creating beautiful and responsive web sites in Macaw.

Readers will learn how to:

  • Create elements with Macaw’s drawing tools

  • Apply styles to elements

  • Style text

  • Work with images

  • Build reusable groups of elements

  • Apply global styles

  • Create and publish a website.

    •

    Table of Contents

    1. Title Page
    2. Copyright Page
    3. Dedication Page
    4. Acknowledgments
    5. About the Authors
    6. Contents
    7. 1. Why Are You Here?
      1. Who Are You?
      2. Who Are We?
      3. A Brief History of Everything
      4. Designing in the Browser Is Not Fun
      5. What Will We Be Doing?
    8. 2. What Is Macaw?
      1. Macaw, in Basic Terms
      2. Don’t Throw Away Your Other Tools!
      3. Built on a Web-Based Foundation
      4. Where to Get Macaw
    9. 3. Unique Tools
      1. Breakpoints
        1. Special importance of the default breakpoint
        2. Setting breakpoints first
      2. Fluid Grids
      3. Reusables: Global Styles and Components
      4. Honorable Mentions
        1. Outline
        2. Pages
        3. View Modes
        4. Retina and HiDPI Images
    10. 4. The Rest of the Tools
      1. The Interface
        1. Top area
          1. Page Manager
          2. Page tabs
          3. Options bar
          4. Breakpoint and DOM information
        2. Left side
          1. Select tool
          2. Direct Select tool
          3. Text tool
          4. Element tool
          5. Container tool
          6. Button tool
          7. Input tool(s)
          8. Embed tool
          9. Hand tool
          10. Eyedropper tool
          11. Global Styles
          12. Swatches
          13. Feedback
        3. The canvas
          1. The grid
          2. Ruler and breakpoints
          3. Resize handle
        4. The right side
          1. Inspector
          2. Outline
          3. Library
        5. The menu bar
    11. 5. Consider Your Workflow
      1. Make Some Sketches
      2. Think About Mobile First
      3. Set Some Breakpoints
      4. Don’t Forget to Resize
      5. Care About Semantics
      6. Use Containers (Grouping) Liberally
      7. Reuse Everything You Can
      8. Let Macaw Do the Work
    12. 6. Let’s Build a Prototype
      1. Setting the Breakpoints
      2. Setting Up the Grid
      3. Working with the Outline
        1. An overview of the Outline
        2. The Outline in action
      4. Putting Elements into Place
        1. Static positioning and flow
        2. Position and breakpoints
        3. Fixed position and origins
        4. Origins
        5. Absolute positioning
        6. Containers
        7. Conclusion
    13. 7. Building a Website: Part 1
      1. Think First, Think Often
      2. Setting Up the Breakpoints, Grid, and Containers
        1. Page header and background image
        2. Menu bar and background gradient
        3. Main and secondary content
        4. Footer and page background
        5. Initial review
      3. Building the Header
        1. Medium breakpoint
        2. Small breakpoint
      4. Building the Navigation
        1. Medium breakpoint
        2. Small breakpoint
      5. The Importance of Preview
      6. Next Steps
    14. 8. Building a Website: Part 2
      1. Highlights
        1. A brief intermission for global styles
        2. Back to highlights
        3. Medium breakpoint
        4. Medium-small breakpoint: no mock-up
        5. Small breakpoint
        6. Medium-small breakpoint: all yours
      2. Testimonials: A Challenge
        1. Current solution: mock it up
        2. Medium breakpoint
        3. Small breakpoint
      3. Secondary content: “Meet the Developers”
        1. Medium breakpoint
        2. Small breakpoint
      4. Footer: Pleasantly Easy
        1. Footer fixes for other breakpoints
      5. A Full Page: Done!
    15. 9. Building a Website: Part 3
      1. Review the Mock-ups
      2. Create a New Page
        1. Revise the header
        2. Medium breakpoint
        3. Medium-small breakpoint
        4. Small breakpoint
      3. Revise the Navigation
        1. Adding links
      4. Build the Content Area
        1. Big text box
        2. The image grid: first image
        3. Image grid: the other three
      5. Take a Break: More on Images
        1. In-App cropping
        2. CSS transforms and filters
        3. Device-specific images
      6. Back to Work
        1. Medium breakpoint
        2. Small breakpoint
        3. A small bug, and a solution
      7. Secondary Content: Embedded Map
      8. Next Steps
    16. 10. Building a Website: Part 4
      1. Review the Mock-ups
      2. Create the Page
      3. Build the Form
        1. Build and style the first field
        2. Create the other text fields
        3. Add the radio buttons
        4. Add the select box
        5. Add the last elements
        6. Positioning cleanup
        7. Medium breakpoint
        8. Small breakpoint
      4. That’s It!
    17. 11. Preview and Publish
      1. Resulting Files
      2. Project Settings
        1. Pages
        2. Head & Tail
      3. General Settings
        1. Styles
        2. Units
        3. Grids
        4. Images
        5. Remote Preview
      4. Published and Done!
    18. 12. The Possible Future of Macaw
      1. Big Things
        1. Mobile-first workflow
        2. Integration of popular frameworks or preset components libraries
        3. Linked image assets
        4. Custom fonts, especially icons
        5. Template files
        6. Better component editing
        7. Export/import/share components and global styles
        8. Add custom states to elements
        9. Enhanced SVG styling
      2. Little Things
        1. Multiple open projects
        2. Swap an image from the library
        3. More global styles options
        4. Custom library folders
        5. Workspace customization
        6. Enhanced swatches
        7. Use different background images at different breakpoints
      3. A Bright Future
    19. A. Helpful Shortcuts
      1. Tool Shortcuts
      2. View Shortcuts
      3. Other Helpful Shortcuts
      4. Outline shortcuts
        1. Bonus for Mac users: custom shortcuts
      5. Other Shortcuts and Quick Tips
    20. B. Further Reading
      1. More on Macaw
        1. Macaw Forums
        2. Macaw Documentation
        3. Macaw Videos
        4. Designing and Building Websites with Macaw, by Adi Purdila
      2. Responsive Web Design
        1. Responsive Web Design, by Ethan Marcotte
        2. Responsive Web Design: Learn by Video, by Tim Kadlec
        3. Articles on responsive design from A List Apart
        4. Mobile First, by Luke Wroblewski
      3. Making Good Mock-ups
        1. Adobe Photoshop
        2. Sketch
        3. Pixelmator
        4. Adobe Fireworks
        5. Tuts+
        6. Smashing Magazine
        7. Photoshop Etiquette
      4. Front-End Web Developer Tools
      5. Other Areas of Interest
        1. Accessibility
        2. CSS transforms, transforms, and filters
          1. CSS Animations and Transitions for the Modern Web, by Steven Bradley
          2. CSS Transitions and Transforms, by Joseph Lowery
          3. CSS Transforms and CSS Animations, both by Vicky Murley
        3. Retina-safe and responsive images
          1. Retinafy your Web Sites & Apps, by Thomas Fuchs
          2. Articles on responsive images from Opera
        4. Better embedded maps
        5. Hosted front-end toolkits
        6. Stationery files on OS X
    21. C. Troubleshooting
      1. Save, Quit, and Restart
      2. Create a New Project, and Then Switch Back
      3. Send Feedback
      4. Post in the Forums
    22. D. Custom Integrations
      1. Custom CSS
      2. Custom Web Fonts
        1. Making fonts available
        2. Adding the custom CSS
        3. Changes before uploading
        4. Loading fonts from the Internet
      3. Custom JavaScript
        1. Loading the plugin
        2. Activating the plugin
        3. Recommendation
    23. Index
    24. Code Snippets