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

Setting element position based on screen size


You might rarely need to use source ordering, but when you do, it is super handy, especially for SEO or other optimizations you want to perform for a certain screen size. Another example is when you want to show a sidebar on the left of the screen for medium and large screens, but on a small screen, you want that same navigation bar to be under your main content area. So, you will use source ordering to render the same code but display it differently on different screen sizes. This might not be the best design choice; you are likely to put your side menu on a small screen, in a drop-down menu, or a slide out menu, which appears at the left or the right of the screen. However, this is a simple example.

Source ordering can be really useful if you have a side navigation bar and some calls to actions in your sidebar. This is fine on large and medium screens, but what if you want to move the navigation elements into a drop-down or slide-out menu on...