Free Sample
+ Collection

Learning Zurb Foundation

Kevin Horek

Construct cross-platform and responsive web pages with the most advanced mobile-first frontend framework available.
RRP $26.99
RRP $44.99
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781782164265
Paperback210 pages

About This Book

  • Create fantastic and responsive websites that everyone can see, no matter where they are.
  • Learn about elements, mixins, and how to use Foundation’s grid effectively.
  • Combine Foundation with Javascript and SASS to create truly stand out responsive designs.

Who This Book Is For

If you are a web designer, developer, or anyone who is interested in building responsive websites, then this book is a must-have. Basic knowledge of CSS, HTML, and JavaScript is required.

Table of Contents

Chapter 1: Time to Prototype
Rough wireframing and prototypying
Introducing the framework
Going over the base theme
Referring to the Foundation documentation
Migrating to a newer version of Foundation
Chapter 2: The Foundation Grid
The Foundation grid basics
Centering columns in the grid
Offsetting the grid
The block grid
Nesting the grid
Setting element position based on screen size
Modifying the base theme and building a demo site
Chapter 3: Navigation
The simple top navigation bar
Navigation tweaks
Let's navigate together
Chapter 4: Elements
Pricing tables
Progress bars
Chapter 5: JavaScript
Magellan sticky navigation
Off-canvas navigation
Interchange responsive content
Orbit slider
Form validation
Chapter 6: Testing
Testing IE 6-11
Supporting unsupported versions of IE
Multiple device testing
Chapter 7: Sass and Foundation
Introducing Sass
Installing Foundation with Sass
Going over the default settings file
Covering the variables
Going over the files
The index file
How do my files get converted?
What is Grunt?
Why is the setup so complicated?
Let's review the JS files
Chapter 8: Mixins
What are mixins?
Using a mixin within Sass and Foundation
Mixin libraries and other useful mixins
Chapter 9: Designing Responsive Ideas
Using Foundation for in-browser designs
Building a quick prototype
Reviewing the prototype
Customizing the prototype
Foundation theme
Creating Foundation grids in Photoshop
Chapter 10: Foundation with Other Tools
Finding a starter theme
Using Foundation with other frameworks
Ideas on how to play nice with developers
Where to go from here

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

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.


Read More