Up and Running with Foundation 5

with Jen Kramer
please wait ...
Up and Running with Foundation 5
Video duration: 0s 2h 59m Beginner


In this advanced course, learn to build responsive websites with Foundation—the clean, simple design framework that uses integrated CSS and JavaScript. Jen Kramer covers Foundation's twelve-column grid system, including the small, medium, and large grid options that make layouts easy to assemble. Then learn how to adjust Foundation's default CSS styling to make your buttons, thumbnails, and other page elements look just the way you want, and add top, side, and off-canvas navigation bars. Jen also shows you how to work with cool JavaScript-based effects like Orbit (an image carousel), Reveal (a modal window plugin), and Interchange (offering responsive image management).

Topics include:
  • Downloading and installing Foundation 5
  • Introducing grids
  • Centering columns
  • Nesting grids
  • Styling text, lists, buttons, panels, and more
  • Adding navigation bars and dropdown menus
  • Creating a responsive lightbox
  • Adding an image carousel
  • Integrating responsive images
  • Adding tooltips


- [Voiceover] Hi, I'm Jen Kramer. Welcome to Up and Running with Foundation 5. In this course, I'll show you how to download the Foundation framework, with its integrated CSS and JavaScript into your site. Then we'll cover Foundation's responsive 12 column grid systems. The small, medium, large, and block grids, which make webpage layouts quick to assemble, with lots of flexibility. We'll also look at the CSS styling that comes with Foundation, including the right way to override and tweak those styles for your websites.

We'll explore navigation systems that come with Foundation, including top nav, side nav, drop-downs, and off-canvas navigation. Finally, I'll go over some cool JavaScript effects that come with Foundation, including Orbit, the image carousel, Reveal, the modal window plug-in, and Interchange, which manages responsive images. So, if you're ready, let's get started, with Up and Running with Foundation 5.

please wait ...