Book Image

Getting Started with Zurb Foundation 4

By : Andrew D. Patterson
Book Image

Getting Started with Zurb Foundation 4

By: Andrew D. Patterson

Overview of this book

<p>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.<br /><br />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!<br /><br />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.<br /><br />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.<br /><br />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.</p>
Table of Contents (11 chapters)

Flex video


The flex video component is a slick little helper when you want to embed a video in your website. When you embed a YouTube video in a column without the flex video component, it isn't well contained by default and will spread out under the column beside it. Flex video packages it into the available space quite nicely.

It supports YouTube, Vimeo, and other streaming sites that use iFrame, embed, or object elements.

To use the flex video component, just create a <div> element with the flex-video class. Assuming you are putting this inside a column, you need to create a new <div> element inside that column. It doesn't work properly if you add the flex-video class to a column div.

The default video size will be a traditional 4:3 ratio. You can change that to 16:9 by adding the widescreen class. Because of the way Vimeo places the video controls, there is a special vimeo class, which tweaks the layout. This can be used with or without the widescreen class.

A nice enhancement...