by Andrea Moretti | Publisher: Packt Publishing | Release Date: June 2015 | ISBN: 9781783285174

A fascinating journey from the very basics of Zurb Foundation to a complete responsive website About This VideoUse grid layouts effectively to create a consistent experience on all mobile devices and desktopsBeautify your page and enable automatic content structuring using accordion and equalizerProgram your site to adapt to any screen size using interchange and specific lightweight content In DetailZurb Foundation is one of the most diffused best performing front-end design frameworks out there.Dealing with browser compatibility, media queries, style consistency, and effective layouts could be a huge pain today, but Foundation comes to the rescue. With minimal effort, it allows you to create a production ready, responsive website or is a great starting point for a highly customized project.Building a Responsive Site with Zurb Foundation will show you every major aspect of the framework, as well as general best practices and workflow tips, guiding you through the process of creating a live mock-up for a photography website. Every video will introduce some of Foundation's features and will use them to enhance the website in order to provide a practical experience with all the topics.The course begins with an empty folder, where we'll install the Zurb Foundation framework and will start adding new pages and enhancements to cover all the key aspects of the framework itself.We begin our journey by explaining why there is a need for a framework, how to set up a modern working environment, and how to scaffold a new project with Zurb Foundation. We'll then immediately introduce some responsive design key concept as well as the advantages of a mobile-first approach and how Foundation helps us with these scenarios.As we advance through the course, we'll introduce all the major aspects of the framework, translating them in working code for our website. We are going to deal with navigation techniques as well as typography, content elements, and forms. As we come to an end, we'll emphasize how to deal with media elements in a responsive environment, trying out different approaches to effectively show image galleries both on desktop and mobile.Through the whole course, we'll witness some general best practices such as using a semantic mark-up using SASS and how to optimize our work for deployment. Finally, we'll cover some JavaScript elements, showing how Foundation helps us introduce some dynamism on our website with nearly no programming knowledge.At the end of the course, you will have the skills to create responsive websites starting from scratch by making use of all the Foundation elements

1. Chapter 1 : Introducing Foundation
   • What Is a Framework? 00:02:36
   • Understanding the Working Environment 00:02:43
   • Installing Foundation 00:02:36
   • Why Use SASS? 00:02:56
   • Scaffolding Our Website 00:03:01
2. Chapter 2 : Making Our Site Responsive
   • Learning Media Queries 00:03:30
   • Grasping the Grid System 00:02:52
   • Seeing Visibility Classes 00:03:34
   • Why to Go Mobile First? 00:02:58
   • Using interchange.js 00:02:53
3. Chapter 3 : Navigating the site
   • Browsing Off-canvas on Mobile 00:03:01
   • Incorporating the Top Bar 00:02:36
   • Implementing the Sticky-nav 00:02:56
   • Incorporating the Side-nav 00:03:22
   • Using Dropdowns 00:03:14
4. Chpater 4 : Structuring the Content
   • Incorporating Tabs 00:02:47
   • Beautiful Typography 00:02:50
   • Implementing a Pricing Table 00:02:35
   • Learning Accordions 00:02:37
   • Using the Equalizer 00:02:20
5. Chapter 5 : Adding Media Content
   • Incorporating Thumbnails 00:03:11
   • Understanding the Block Grid 00:02:14
   • Incorporating Flex-video 00:03:27
   • Learning 'Interchange' 00:03:49
   • Using Lightboxes 00:02:48
6. Chapter 6 : Constructing Forms
   • Creating Basic Forms 00:02:11
   • Understanding Form Utilities 00:02:07
   • Implementing Switches and Ranges 00:03:13
   • Using Abide Validation 00:02:48
7. Chapter 7 : Buttons and UI Elements
   • Customizing Buttons 00:03:30
   • Using Panels and Alerts 00:02:58
   • Learning Tooltips 00:02:05
   • Adding Modals 00:02:38
   • Incorporating Pagination and Breadcrumbs 00:03:31
8. Chapter 8 : Conclusions
   • Customizing Foundation 00:02:51
   • Optimizing for Deployment 00:02:41
   • Using Templates and the Zurb Playground 00:02:42
   • What Have We Learned So Far? 00:02:55
   • Where to Go from Here? 00:03:21