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

Learning Zurb Foundation

Book Description

Construct cross-platform and responsive web pages with the most advanced mobile-first frontend framework available

In Detail

Responsive web design is the next big thing in web design right now. It allows you to control and adapt to the user experience across a variety of devices, screens, and resolutions. Foundation is one of the most well-known responsive frameworks available, and allows you to speed up the prototyping, designing, and theming of your web project; as well as allowing you to create your own custom themes to suit your needs. It makes your life easier by giving you a grid, elements, and JavaScript functions that are responsive and easily customized to work with any web or mobile project that arises.

This book starts off with teaching you the basics, and gradually moves on to cover the most advanced parts of this amazing framework. You will learn how to use Foundation to prototype, design, and theme your projects as well as discover how to use the framework with any programming language or content management system.

What You Will Learn

  • Discover how to wireframe and prototype quickly with a one-page website
  • Explore how the Foundation grid works
  • Learn how to use and apply themes to the JavaScript libraries
  • Utilize well-known best practices for testing websites cross-platform and on devices
  • Use Sass to write CSS faster
  • Work with designers and/or developers to communicate how your project should function and flow
  • Learn about the grid, elements, JavaScripts, and how to customize the framework
  • How to use Foundation with web apps and content management systems

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Learning Zurb Foundation
    1. Table of Contents
    2. Learning Zurb Foundation
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Time to Prototype
      1. Rough wireframing and prototypying
        1. Prototyping smaller projects
        2. Prototyping wrap-up
      2. Introducing the framework
      3. Going over the base theme
      4. Referring to the Foundation documentation
      5. Migrating to a newer version of Foundation
        1. Framework support
        2. Browser support
        3. Extending Foundation
        4. Overview of our one-page demo website
      6. Summary
    9. 2. The Foundation Grid
      1. The Foundation grid basics
      2. Centering columns in the grid
      3. Offsetting the grid
      4. The block grid
      5. Nesting the grid
      6. Setting element position based on screen size
      7. Modifying the base theme and building a demo site
      8. Summary
    10. 3. Navigation
      1. The simple top navigation bar
      2. Navigation tweaks
        1. Side navigation
        2. Subnavigation
        3. Breadcrumbs
      3. Pagination
      4. Let's navigate together
      5. Summary
    11. 4. Elements
      1. Typography
        1. Subheadings
        2. The small tag
      2. Lists
        1. Inline lists
        2. Definition lists
      3. Blockquote
      4. V-cards
      5. Buttons
        1. Drop-down buttons
        2. Drop-down buttons with images and text
        3. Split drop-down buttons
        4. Button groups
      6. Panels
      7. Pricing tables
        1. Pricing tables in columns
        2. Pricing tables in columns without a gutter
        3. Fixing border issues
      8. Tables
      9. Video
      10. Progress bars
      11. Keystrokes
      12. Label
        1. Print styles
        2. Sliders
        3. Alerts
        4. Tooltips
        5. Utility
        6. Visibility
        7. Switches
        8. The icon bar
      13. Summary
    12. 5. JavaScript
      1. Magellan sticky navigation
        1. Magellan sticky navigation code explanation
      2. Off-canvas navigation
      3. Interchange responsive content
        1. Interchange responsive default content
        2. Interchange responsive images
        3. Interchange responsive images with media queries
        4. Interchange responsive background images
        5. Retina media queries
      4. Orbit slider
      5. Clearing
      6. Forms
      7. Form validation
      8. Reveal
      9. Joyride
      10. Accordion
      11. Tabs
      12. Summary
    13. 6. Testing
      1. Testing IE 6-11
      2. Supporting unsupported versions of IE
        1. Testing IE7 and IE6
      3. Multiple device testing
        1. Remote debugging
        2. Chrome simulation
        3. Other tools you can try out for testing purposes
      4. Summary
    14. 7. Sass and Foundation
      1. Introducing Sass
      2. Installing Foundation with Sass
      3. Going over the default settings file
      4. Covering the variables
      5. Going over the files
      6. The index file
      7. How do my files get converted?
      8. What is Grunt?
      9. Why is the setup so complicated?
      10. Let's review the JS files
      11. Summary
    15. 8. Mixins
      1. What are mixins?
      2. Using a mixin within Sass and Foundation
      3. Mixin libraries and other useful mixins
      4. Summary
    16. 9. Designing Responsive Ideas
      1. Using Foundation for in-browser designs
      2. Building a quick prototype
      3. Reviewing the prototype
      4. Customizing the prototype
      5. Foundation theme
      6. Creating Foundation grids in Photoshop
      7. Summary
    17. 10. Foundation with Other Tools
      1. Finding a starter theme
      2. Using Foundation with other frameworks
      3. Ideas on how to play nice with developers
      4. Summary
      5. Where to go from here
    18. Index