Book Image

Learning Zurb Foundation

By : Kevin Horek
Book Image

Learning Zurb Foundation

By: Kevin Horek

Overview of this book

<p>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.</p> <p>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.</p>
Table of Contents (17 chapters)
Learning Zurb Foundation
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Reveal


Reveal is a super useful modal or pop-up window that allows you to display pretty much any type of content from text to images and even video. So let's dive right in and learn how to use Reveal. First we need to create a link that will launch the modal window. So let's do that by adding a link below our form. On or around line 202, after your closing form tag let's add the following code:

<p><a href="#" data-reveal-id="modal">Modal</a></p>

Now, we need to add the actual modal that loads when you click on the previous link. So right after this line, let's add the following code:

<div id="modal" class="reveal-modal" data-reveal>
 <p>I am a modal</p>
  <a class="close-reveal-modal">×</a>
</div>

Refresh your browser and you will see a modal link at the bottom and when you click on it you will get your modal. You will notice a cross sign in the top-right corner; if you click on it, you will close the modal. If you want your modal...