[00:00:00:560] Hello, and welcome to lesson one of this introductory course on ZURB’s Foundation framework. In this first lesson, we’ll quickly cover a few key points including an explanation of what Foundation actually is, why we might want to use it, and finally, how can we go about downloading and configuring it.
[00:00:18:730] First up to bat, what exactly is Foundation? Well, in a nutshell, Foundation is a framework or a set of tools to help both designers and coders build responsive, fluid web design in less time. Let’s head on over to the Foundation website for a more in-depth explanation. So, saddle up your favorite browser and head on over to foundation.zurb.com.
[00:00:41:840] Scrolling down through the landing page here, we can see some key features of foundation, highlighted by the folks at ZURB. Here we can see that the foundation framework utilizes hardware acceleration, and HTML partials to make our designs faster for end users. Coding receives a boost as well thanks to the prototyping nature of the project.
[00:01:01:880] Created around Semantic, our projects built around Foundation will yield clean markup. As we’ll see in later lessons, we can focus on a specific device size and build in responsiveness for others as we go. The actual package downloaded can also be customized to our stylistic needs, although, this can also be adjusted later as well.
[00:01:20:300] As with any self-respecting web technology, we can always fall back on the online community for help. That said, the main reason we’d like to use Foundation for our projects, lies in its response of abilities. In fact, we need not look any further than this very page to see it in action.
[00:01:36:390] If I come up here to the top, and slowly shrink this window down, we can see responsive web design in action as the elements on the page adjust to the real estate that they’re given. You’ll notice in this extreme case, all content has shifted to a single column layout.
[00:01:52:510] As you scroll down, everything is still laid out in an appropriate manner for the given screen size. If we scroll back up to the top, we can see the menu has even transformed to a mobile layout with the navigation transitioning in from the side. As we increase the window again, all elements return to their original layout.
[00:02:12:730] Now, that I’ve got you sold on the whole responsive web design philosophy, let’s go ahead and download foundation and get setup for some real work. If we follow the prominent download button, we’ll find three distinct choices for downloading and installing foundation. The first option, the default package, is the most simplistic choice, and offers a standard build with all styles and tools thrown in.
[00:02:36:020] The Custom CSS choice allows you to make changes to the default package, and tailor the framework to your own personal needs. Finally, the Sass version utilizes CSS Superset, to provide even more features and abilities. For the purposes of this course, let’s stick to the default package. Clicking on the appropriate download button, results in a tiny ZIP file with everything we need to get up and running.
[00:02:58:170] Extracting this file to our web server’s document root reveals a simple folder structure. We’ve got a folder housing all CSS styles. One for images that we might want to use. And finally, one for the included JavaScript files. We also notice an index.html file that contains the basic structure of a Foundation design.
[00:03:17:480] And with that, we’re all set up. We’ve now got the basic understanding of what the ZURB Foundation Framework is, why we should use it. And, we even manage to get it installed in mere seconds. We’re all set to get our feet wet in the next lesson with the principles of design use and foundation.
[00:03:33:620] We’ll see you then.