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