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 Zurb Foundation 4

Book Description

For today’s web designers, fluidity and responsiveness is everything. That’s why this introduction to Zurb Foundation is so valuable. It teaches you to use the mobile-first framework to create fantastic web pages, intuitively and expressively.

  • Get up to speed quickly with Foundation's responsive grid system
  • Integrate easy-to-configure CSS components into your website
  • Add powerful JavaScript plugins to your web pages

In Detail

Every web designer needs a toolkit. From text editors to graphics programs, from table structures to fluid style sheets, the web designer has many tools and techniques to choose from. Zurb's Foundation framework is an excellent kit for today's web designer. It's fluid, it's easy to work with, it has plenty of components, and most importantly, you can apply your creativity to make your very own designs.

Zurb's Foundation 4 is a practical, easy-to-use toolkit for the layout and construction of web pages. Getting Started with Zurb Foundation 4 introduces Zurb Foundation’s powerful web design and development toolkit. Learn how to create professional layouts with ease, add powerful CSS and JavaScript components to your pages, and then customize and configure the design to your satisfaction. Understand how to efficiently manage your CSS and layout your pages with SASS, the style sheet language. This book will help you put Foundation 4 to work for you today!

This book documents Foundation's grid system, all its components and plugins, and its generation of custom style sheets. The book serves as an all-encompassing introduction as well as a future reference guide. The foundation of Foundation is its grid system...and there is a whole lot more.

Once you've covered the basics, you'll be ready to advance with SASS, the style sheet language, to customize your installation and layout your pages.

With this book, you will discover all the CSS components and JavaScript plugins that are included in Foundation at the present time and learn how to integrate each of them into your web pages.

Table of Contents

  1. Getting Started with Zurb Foundation 4
    1. Table of Contents
    2. Getting Started with Zurb Foundation 4
    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. Errata
        2. Piracy
        3. Questions
    8. 1. Get the Most from the Grid System
      1. Working with cells, rows, and columns
      2. Nesting rows in columns
      3. Understanding gutters
      4. Maintaining row and page width
      5. Understanding row and column height
      6. Designing small to large
      7. Tweaking the layout
        1. Centering columns
        2. Rearranging columns
        3. Applying offsets
      8. Working with images
      9. Summary
    9. 2. Pick and Choose CSS Components
      1. Typography
        1. Global styles
        2. Rhythm
        3. Common classes
      2. Visibility
      3. Starting with simple components
        1. Keystrokes
        2. Inline lists
        3. Tables
        4. Labels
        5. vCard and vEvent
      4. Navigation
        1. Breadcrumbs
        2. Pagination
        3. Side nav
        4. Sub nav
      5. Buttons
        1. Regular buttons
        2. Drop-down buttons
        3. Button groups
      6. Block grids
      7. Thumbnails
      8. Panels
      9. Flex video
      10. Pricing tables
      11. Progress bars
      12. Summary
    10. 3. Pick and Choose JavaScript Plugins
      1. JavaScript installation
      2. Alerts
      3. Tooltips
      4. Dropdown
      5. Section
      6. Top Bar
      7. Magellan
      8. Joyride
      9. Orbit
      10. Clearing
      11. Reveal
      12. Interchange
      13. Forms
      14. Abide
      15. Summary
    11. 4. Advance with SASS
      1. Understanding Foundation's SASS
      2. Installing Foundation with SASS
      3. Customizing Foundation with SASS
      4. Choosing Foundation components
      5. Customizing with variables
      6. Understanding functions and mixins
      7. Extending classes
      8. Designing with SASS
      9. Summary
    12. Index