What do you want to learn?
Leverged
jhuang@tampa.cgsinc.com
Skip to main content
Pluralsight uses cookies.Learn more about your privacy
Responsive Websites With Bootstrap 3
by Mark Zamoyta
Learn to create a modern, responsive website using Bootstrap 3.
Start CourseBookmarkAdd to Channel
Table of contents
Description
Transcript
Exercise files
Discussion
Learning Check
Recommended
Course Introduction
Introduction
Hello, and welcome to this course titled, Responsive Websites With Bootstrap 3. My name is Mark Zamoyta. The purpose of this course is to help you design and implement a responsive website, and we'll be using Bootstrap 3's grid system and CSS classes to help us out. Hopefully by now you understand the value of a responsive website, so I won't be trying to sell anyone on that idea. I'll be assuming you need a single website to handle large browser windows, smaller tablet-sized screens, and the smallest smart phone screens. And that's what we mean by responsive. We need a single website that responds to the size of the user's viewport, no matter how big or small. This is a very practical, hands-on, and visual course, so let's take a look at everything we'll be building. We'll start off by learning some fundamental patterns of responsive design. These patterns were written up and named by Luke Wroblewski, a popular speaker, author, and software developer. Each responsive design pattern will be demonstrated using this 3-column sample website. The columns will make use of Bootstrap's 12-column grid system, and when we implement the responsive patterns we'll use several other Bootstrap classes. I'll give you a brief overview of the design patterns now. The first pattern is called Mostly Fluid. In this pattern, the page design keeps its form for most screen sizes. The page only changes its layout for the smallest smart phone sizes. You can see here how the three columns get stacked on the smaller devices. The next pattern is called Column Drop. As the screen size gets smaller, columns start dropping and getting stacked vertically one by one. Here we can see our large screen size with three columns. On a smaller tablet screen, one of the columns drops and gets stacked vertically on the page. On the small smart phone screen, all of the columns are now stacked vertically. Another pattern is called Layout Shifter. This is where the page layout changes significantly from one form factor to the next. Here we can see that on a large screen size our list of sports icons are stacked vertically within their own column, but when viewed on a smaller table the icons rise to the top of the page and get displayed horizontally. This is accomplished with CSS media queries based on the viewport size. The final pattern is Content Reflow. This pattern isn't for an entire page, but rather for the layout of a single-page element. Here we can see our mountain ranges are comprised of an image with a title underneath. On a different smaller form factor it makes more sense to place the title to the side of the image. Content can be made to reflow this way in CSS using media queries. After the module on responsive patterns, we'll focus on building a modern, single-page, responsive website using Bootstrap. Here's the web page running in a large browser window. You can see the navigation area on top, containing the site's logo along with links to the various sections of the page. We'll see how to use Bootstrap's nav bar component to create this menu. Also notice that as I scroll down the page, the menu will shrink at a certain point to get out of the way, leaving more room for content. Returning to the top of the page will restore the larger menu size. Of course, this menu also needs to work on smaller devices, and this functionality is built-in to Bootstrap's nav bar. In the following module, we'll take a look at responsive images and video. Bootstrap offers some classes to help us create and style responsive images, so we'll look at those in depth. Notice the full-screen background image here at the top of our page. This image is fully responsive and always takes up the full size of the viewport. I'll use Chrome's Developer Tools to resize the viewport, and we can see how the image responds. We'll also see how to fix an image to an exact position so that it doesn't scroll, yet our website content still scrolls over the image. This is a popular feature on modern sites. In addition to full-screen images, we'll also see how to add full-screen video to our web page. We could host the video file on our site, or we'll see how to use a video from YouTube. I'm going to dedicate an entire module to scrolling. A modern trend in web design is to have these super long web pages, and navigating them needs to be easy and fluid. You can see the down arrow on our page letting the user know there's more content below. Watch what happens when I click the arrow. The site smoothly scrolls to the next section, making heavy use of an easing animation. Likewise, when I click on a link in the nav bar, the page also smoothly scrolls to the correct section. We'll also take up parallax scrolling. Parallax scrolling is when content scrolls at different speeds over the same area. Notice what happens when I manually scroll this page. The site logo and down arrow button move quickly off the page, while the background image moves much slower. This effect looks great and is popular in modern sites, and we'll see how to implement it. In the final module, titled Animated Elements, we'll take a look at how to animate our page elements as they come into view. Notice how our three activity items are animated as they appear for the first time. We'll also work with Bootstrap's carousel component to show a simple slide show, and we'll work the popular jQuery Gallery plugin to add a responsive image gallery to our site. By the end of this course, you'll be able to use Bootstrap to help you create everything you've seen in this introduction. Everything we'll be doing is fully responsive and works on the latest iOS and Android smart phones, tablets, and larger browsers. So let's get started.
Responsive Patterns Using Bootstrap
Introduction
Welcome to this module titled, Responsive Patterns Using Bootstrap. My name is Mark Zamoyta, and in this module we'll be looking popular patterns used to layout a responsive website. We'll also see how to implement these patterns using Bootstrap and its 12 column grid system. We're looking at Luke Wroblewski's blog found at www.lukew.com. Luke is a popular author, designer, and developer who played a large part in the move to mobile first and responsive design. In this column, Multi-Device Layout Patterns, several web page layout patterns are presented. We'll be looking at four of these patterns in this module, and we'll use Bootstrap to implement them. The first pattern is called Mostly Fluid. As the name states, the layout is mostly fluid all the way down to the smallest screen size. For these narrow devices, the columns and the designs stack one on top of the other. The next pattern is called Column Drop. As the screen size gets smaller, columns start dropping one by one to the bottom of the page. Unlike the Mostly Fluid pattern, which only changes on the smallest device size, this column Drop pattern can drop columns at any visual breakpoint. The third pattern is called the Layout Shifter. This is where significant changes to the layout happen across devices sizes. A column shown in a large browser may become a row in a medium-size device, and entire sections of the page move around as the designer sees fit. We won't go into the fourth pattern, Tiny Tweaks in this module, however, the following modules of this course will go into single-column web pages in detail. Using a simple, single column for a web page or even an entire website is currently a big trend in web design. The Tiny Tweaks pattern is all about making small changes to a single-column page across different devices sizes. We'll also be looking at another pattern not listed in this article named Content Reflow, where content moves around in relation to other content based on the device size. An example of this is having a caption under an image for one device size, while a larger device size may have the caption to the right of the picture. In order to work with all these patterns, I've put together a demo website for us to work with. You can see the site has three columns, a list of mountain ranges in the Rocky Mountains, a column for articles or blog entries, and a column containing sports icons. We'll make heavy use of Bootstrap's classes in order to implement the four responsive design patterns mentioned, Mostly Fluid, Column Drop, Layout shifter, and Content Reflow.
Bootstrap's Grid and Visual Breakpoints
Let's take a look at the Bootstrap classes we're going to need to work with the Bootstrap grid. First of all, everything needs to happen within a container, and we can use the Bootstrap container class and assign that to the body or to some other div or other grouping element. We can also specify a class of container-fluid. The key difference between these two classes is that the fluid container is always going to take up the full width of the browser or viewport, but if we leave the - fluid off, Bootstrap, especially on the larger browsers or laptop or desktop computers, it's going to center the content within the viewport, and we'll see examples of that later in this module and course, but for now just know that if we're going to be working with the grid, we're going to need a container somewhere. Inside of the container, we're going to need another div or some other grouping element that has a class of row. And, of course, we can have several rows per container, and the row is where we have our 12 column grid. So here we see the 12 columns, and we can also see some of the classes that are used to spread out a visual DOM element across those columns. The first class, col-sm-4, when this gets assigned to a DOM element, it'll take up the first 4 columns of the grid. Likewise, col-sm-8 will take up the next 8 columns of the grid. And notice it's very important that when we're working within a row that all the columns add up to 12. If they're less than 12, things might get aligned more towards the left of the viewport, and if the columns add up to more than 12, things might start wrapping in strange ways, so we just always want to make sure that our column classes add up to 12. Now you'll notice the sm for small there, that's called a visual breakpoint, and let's take a look at those. There are four visual breakpoints in Bootstrap. And looking at this table, we can see that the extra small devices, which are essentially smart phones or feature phones, even, use the symbol xs for extra-small, and those will be active when the viewport is <768px wide. Then the smaller devices or tablets, use the sm symbol as we saw before, and those take effect when the viewport is >=768px wide. Now these pixel values are pretty arbitrary. They could be set to anything if you modify the less variables, but 768 was probably picked out because that's the width of an iPad in portrait mode. So looking at the next breakpoint for medium devices, which would be desktops, it uses the md symbol and it's >=992px. And the largest breakpoint there is, is lg, and that's >=1200px. So let's take a look at some classes that use these. Here we have col-sm-8. So if we assign this class to a visual DOM element, it's going to take up 8 grid columns for small devices, and everything larger. So for small, medium, and large devices, the DOM element will take up 8 grid columns, but if we're at the extra-small devise size, this class doesn't take effect, and the DOM element will take up the whole width of the viewport. So if we're looking at this DOM element on a smart phone, less than 768px wide, it'll take up the complete width of the screen, but in tablets and desktops and everything larger than small, it'll take up 8 columns. Let's look at another class. Here we have col-xs-4. So if you assign this to a DOM element, no matter which breakpoint is active, it's always going to take up 4 columns, because on an extra-small device we're specifying it'll take up 4 columns there, and everything bigger than an extra-small device will also take up 4 columns. Let's look at another example. We can actually apply multiple classes to a DOM element. Here we have .col-sm-4 and .col-lg-2. So starting at the extra-small breakpoint, a DOM element assigned these two classes will take up the full width of the screen. It's not until we hit the small breakpoint where the DOM element will take up 4 grid columns, and that comes from the .col-sm-4 class. For medium, the DOM element will also take up 4 grid columns, but for large we're specifying another class, .col-lg-2. So for large devices, >=1200px, the DOM element will take up 2 grid columns. Now it's kind of hard to talk about this without seeing examples, so in the rest of this module, we'll take a look at all of these classes in more detail and see how they get displayed visually.
Setting Up a Multi-Column Page
So let's create a web page we can use for working with the grid in Bootstrap. I'm using Visual Studio Express 2013 for web. This is a free version you can get online or you can feel free and use your favorite editor. I'll create a project and I'll call it ResponsivePatterns. And I'll just create an empty template and make sure we have no authentication, we're not using Azure, and everything is unchecked. So we have our project and let's add an html file. We'll just call it index. And just to keep this organized, I'll also put this into a folder. So if you're using the exercise files, I'll store this in Video 03, and nothing's in the before folder, and we'll be working in our after folder. So the first thing I'm going to do is add Bootstrap. I will Manage NuGet Packages, and we'll go Online, and we'll search for bootstrap. And here we have version 3.2 and we'll install that. I'll go to Content, and I'll take our bootstrap.min.css, and I'll add that as a link. So now our page is bootstrapped. I'll also get rid of this namespace, we don't need that. The next thing I want to do is add a Google font. Let's go to google.com/fonts, and instead of using the regular sans-serif fonts, whether it be Arial on a PC or Helvetica on a Mac, let's just grab the Open Sans file. I'll click the Quick-use link, and we'll just keep the default of Normal 400 selected, and let's grab the link code right here. I'll copy that, and we'll paste it above bootstrap. Now another thing we're going to need is our own css file to work with, and I'll add that to the Content folder as well. I'll add a Style Sheet, and I'll just call it app.css. And let's just make sure that we're going to use that Open Sans file. I'll set the font-family to 'Open Sans', and it'll fall back to a sans-serif. And let's make sure we take our app.css and also add that as a link. And to start adding some content, let's add a header. We won't be working with the header much, but I'll add an (h1) tag called HEADER, and I'll create a footer. We'll add an (h1) called FOOTER. We won't put anything important there yet. And when we start working with the grid we'll be working in between the header and footer. For now let's set our browser to Chrome and let's make sure that this works. So we have our header and footer. Now I'm going to go ahead and add some styling to this. So looking at our app.css file, I added this styling to the header and footer. We set a dark background color and a light font color, we add some padding, and we center the text. So if we look at this, so far so good, we have our HEADER and FOOTER. So not let's focus on putting the grid and adding 3 columns between these two elements. I'll add a div, and I'll set the container class here. Inside the container we'll add a row, giving it a Bootstrap class of "row", and we'll create 3 columns, an , this will be the first column on the left, and then we'll have a section that'll contain articles in the middle, and we'll have another column on the right side, another . Now let's have the first take up the first two columns of our grid, so let's make sure we're in a container and we're in a row, so we can go ahead and add classes for the grid. We'll add a "col-sm-2", so that'll be our first column, which is 2 grid columns wide. In our section, we'll add a "col-sm-8". And for our final on the right we'll add a class of "col-sm-2". And these do all add up to 12, 2+8+2. And I'll just add some quick labels here, Col 1, Col 2, and Col 3. Now it's a little bit hard to see, but we do have our Col 1 on the left, and Col 2, and way on the right we have our Col 3. So the next thing I'm going to do is I'm going to add some content to these three columns, and I'll also add some styling. So I added a lot of content and styling. I added an images folder, and there are several images in here for the site. And I added a bunch of markup and CSS. Let's just take a look at this first and see what it looks like in the browser. So we still have our HEADER and we have our 3 columns. The first column is a list of mountain ranges, and that's just an aside, 2 grid columns wide, and our central section is our main area, and this will have some kind of articles for the website, and our final column is just a bunch of icons with links. You'll also notice that the FOOTER is still the same down at the bottom. So let's take a quick look at how I set all this up. Now one minor thing you might notice is that the HEADER expands out past the edge of the first column, and the reason for that is because it's not included in a container. So I'll just take the class container, and copy that and add it to both the header and the footer as well. So both the header, footer, and middle section will all have their own grid system, and now the left side lines up fine. Another thing you'll notice is the breakpoints. We do have space on the left and right side margins, and as I resize the browser you can see it jump to where there is a lot of room. When we hit a visual breakpoint, Bootstrap is going to adjust the margins for us and it's going to center the content in the middle. And the way around that is instead of using our container we'll use "container-fluid", and I'll add that to the header and middle section as well. So now that it's fluid, we can see as we resize the browser, the content is always going to take up the full width of the browser, and we don't get the jumping that we saw earlier. You also notice when I took it down low we hid our extra-small breakpoint and our columns lined up. Our first column of mountain ranges is first, and then the middle column, our content, and then our list of icons is last, our third column. Now you might think this is a good way to test this on a mobile device, let's say like an iPhone 5, but it's actually not. If we ran this on an iPhone 5 right now, it actually wouldn't work, and let's take a look at why. First off I'm going to hit F12 to bring up the Developers Tools in Google, and you can see a device icon right here, Toggle emulation enabled, and this will toggle on and off device emulation. I'll make sure I have emulation selected as a tab down here, and our device is set to Apple iPhone 5. You'll also notice a warning at the bottom, You might need to reload the page for proper user agent spoofing and viewpoint rendering. So just make sure, I'll hit F5 to reload the page. And as you can see it's not showing up properly on the iPhone 5. I can pan around and get access to the entire page, but on this small device, what we want is to have this page be responsive. And the way to do that is to set up the viewport properly on the smaller devices. We'll go to Bootstrap's website getbootstrap.com and we'll click on the CSS tab. If we scroll down a little bit we'll see the Mobile first section, and we can see how to set up the viewport properly. We need to add this meta tag if we're going to let our content get scaled properly. And if we want to prevent the user from scaling themselves, we'll use this tag, and I'll go ahead and grab this second one here. I'll copy that and place it in our header. I'll actually place that just below the title here. And you can see the meta tag has the name of "viewport", and for content we're setting the width to the device-width, we're scaling it to 1, we're not letting it scale any larger than what we expect, and we're setting user-scalable to no, so the user can't pinch in or out in order to get the page to resize on a device. So I'll save this, go back to Chrome, and I'll refresh, and now we can see it showing up properly on the iPhone. We can scroll down and get our content and our buttons. So remember, it's not good enough to just test it by resizing your browser. You really need to try it on a device emulator, or better yet the actual device, and don't forget this meta tag, because that's what lets it be responsive on the smaller devices. So I'll just take this out of device emulation for now, and we're all set up, we're ready to go. In the rest of this module, we'll be looking at how to work with all of these elements on the screen and how to adjust that as we work with the different device form factors.
Markup and Styling for Our Website
Let's take a quick look at the markup in css that makes up this sample project. I'm in the 04 folder, after, and let's make sure that we set our index.html file here as the startup page, Set As Start Page, because what happens is if we go back and forth between index.html and our css file, Visual Studio might pick up an older index.html file, so just always make sure you set that to the startup page. So let's take a quick look at the markup here. Looking at our first column, which is an aside "col-sm-2", we have our title, Mountain Ranges, and that's within an h4 with a class of "range-title". And we'll look at the CSS shortly. Then we have the class of "range-list", and this is what holds all of our mountain ranges. We create a link, an anchor tag with an href, and within that anchor tag we have our image and also our title for the image, which is an h4, and this pattern is followed for each one of the mountain ranges. We have five of them here. Next, if we look at our section it's made up of articles with the article tag. It has an h2 header, add and img, and then we create a div, which is its own "row". The reason why it's a row, is we want another grid, and the grid will hold text on the left side in the first 10 grid columns, and in the second 2 grid columns we'll put a button that says More. And for the sample, this button isn't active at all yet. So our article is repeated two more times with exactly the same html, it just has different content in there. And our third column is the aside, which is a col-sm-2, and we have an anchor tag which is comprised of an image and an h6 heading, and these are the smaller icons we have on the right side. Again, to take a look at this, we have our 3 column setup, the mountain ranges, the content in the middle, and buttons or icons on the right side. So looking at the css for all this, we've already seen the body and the header and footer. we give our asides a light gray color, and we center everything and add padding to the top. We add some simple padding for our range-list, and our range-list h4 gets the dark orange color and bold, and there's nothing really too special about this markup. If we were using LESS, we could go ahead and add this h4 directly into our range-list up here, but for those who aren't familiar with LESS, I'm just using standard css. Then we have our img within our range-list. Right now I'm setting the width and height to 100%, and the max-width and max-height to the image size. We'll take a look at responsive images later in this course, but for now this is good enough to give it a nice fluid layout that fits within our grid system. Looking down, we have our sports-icon-list, that's the third column on the far right side with the icons. And let's just make sure this is getting applied, I'm not sure this is getting applied, because it has a darker background color. I'll add that class to our aside right here, and there we go, now it's picking up the styling properly on the right side for our icons. So we have the dark background and padding, white color for the font on the anchor. We set some margins, and the images are fixed at 70px. And for our articles, we give it some padding, and our img for our articles are also fluid at 100%. And for the drop-shadow effect that you see we're adding a box-shadow tag. So in the rest of this module we'll take a look at modifying this markup and rearranging things for the various device form-factors and making sure everything is responsive.
The Mostly Fluid Pattern
So what we've built so far up to this point is the Mostly Fluid pattern. The website is fluid all the way down to this smallest screen size, which is our extra-small visual breakpoint. We're looking at it now in a browser and we have our three columns, if we pull up the Developer Tools and go to the Device section, remember we need to hit F5 to refresh when we select a device. We can see that on the iPhone device all of our columns get stacked vertically. We have our first column of mountain ranges, our content column, and finally our icons, our third column. Let's take a look at this on the iPad. I'll select Apple iPad 3/4, and this is our small visual breakpoint, and you can see we still have our three columns, and anything larger than this is also going to have three columns. If we increase the size of this panel, we can see that we can essentially rotate the device 90 degrees by clicking this back-and-forth button, Swap dimensions. So here we can see that on the iPad in portrait mode we also get our three columns, because the width is 768, which is our small breakpoint, not our extra-small. If we go 1 pixel lower to 767, we can see we get our columns stacked for the extra-small breakpoint, and I'll just switch that back. So one of the problems we have when we're working with web design and we're going from a multi-column layout down to a single-column layout, is how exactly do we want to stack the columns. There's no hard and fast rule, and it's totally up to the web designer, but in a lot of cases you might want your major content to come first. So instead of listing out the mountain ranges first, we would want to list out our articles, our middle column, and let's take a look at how to do that. Let's collapse the markup a bit just so we can see it all at the same time. We have our aside, which is our left column, our section, middle column, and the aside on the right. Now Bootstrap is a Mobile first technology. Things work out better if you arrange things for mobile, and on mobile we're going to want this section to be first, so let me copy the aside, and I'll place that after the section. So we start with the section, which is our main content, our articles, and then we'll have our mountain range list and then our sports icon list. Let's take a look at this. Okay, so we're looking at this on a desktop, and things are arranged properly for a small smart phone. We'll pull up the Developer Tools and look at it on an iPhone, and this is what we want. We want our articles, and then our mountain ranges, and then our sports icons. So now we just have to make sure that when we're on a small or larger device we take our mountain ranges and place them to the far left. And we do that with special classes from Bootstrap called push and pull classes. I'll open these back up, and what we want to do is we want to take our section, and when we've reached the small breakpoint we want to push this section 2 grid columns to the right. So I'll do a col-sm-push-2. Again, on the small breakpoint we're going to push this section 2 grid columns to the right. And push and pull always relate to the left-most column, and that's our section. And then on the aside for the mountain ranges, we're going to want to pull that to the left. I'll go col-sm-pull-8, and we have to pull it 8 grid columns because our section is 8 grid columns up above. And I'll save this and let's take a look at it. And now we get our main content pushed to the right and our mountain ranges pulled 8 columns to the left. It's now on the far left side. If we look at it on the iPhone again, we can see that we are getting our main content first. And just to check it out on an iPad, because this is at the small visual breakpoint, we are getting the mountain ranges lined up on the left, which is what we want. So the important things to remember when you start shifting columns around for the different visual breakpoints, is you want to start with mobile first. Your groups, whether they be sections, asides, divs, or what have you, need to be arranged for the smallest screen size, the extra-small breakpoint. And then for the larger breakpoints we want to push and pull the columns to the locations we need them. Here we're looking at the small breakpoint and when we reach that or anything larger than small, we're going to push this element 2 grid columns to the right. Likewise, in our aside, when we reach the small breakpoint and anything larger than the small breakpoint, we're going to pull this content 8 columns to the left. So push and pull are always relative to the left side of the browser.
The Column Drop Pattern
There's another pattern called Column Drop. This pattern will drop columns one by one to the bottom of the page as the screen size gets smaller. The columns never go away, instead they just stack up on the bottom of the page. So far we've seen how to rearrange things, only for the extra-small screen. Now let's take a quick look at it where we stand right now. So we have three columns all the way down until we get to the smart phone size. Let's look at it on the iPhone, I'll hit F5 to refresh, and we lose our columns and everything just lines up the way we want it. But let's say we wanted things to change again on the small screen size. Small screen size would be an iPad. Let's say we only wanted two columns here. Let's take the mountain ranges and the main content, and we'll leave those here, and we'll take our buttons and we'll drop that column down underneath. So for this Column Drop pattern we'll have three layouts, one for the extra-small phone size, and then one for the small tablet size, which is this, and then anything larger on the medium and large form-factors, we'll keep these three columns. So looking at our markup, let's take a look at our first section. I'll get rid of our push and pulls just to keep things simple, and we'll add those in later, but for the small breakpoint we're going to want the main content to be 9 columns now. And when we get up to the medium breakpoint, we're going to want this to go back to 8 columns. So this is small. So for the extra-small breakpoint this will still just be outside of the grid, it'll just take up the full width of the device. For a tablet, such as the iPad, it'll take up 9 columns, which means our mountain ranges are going to have to take up 3 columns. So I'll keep this at col-sm-3. And then on the medium size and larger, we want to take up 8 columns. So 8+4 is 12, so we have to add another class col-md-4. And looking at our final column of the sports icons, we're setting col-sm-2, but just to be clear, we can set col-xs-12. So that way, on the extra-small and larger devices, we'll take up the full width of the screen, until we hit col-md, in which case we'll only take up 2 columns. So just keep in mind that when we jump from extra-small up to medium, we're skipping small, so small is going to take this characteristic of being the full width of the screen. Now we don't have pushes and pulls in there yet, but let's take a look at this as it stands now. So on our medium and large size, everything is looking good, keeping mind we're going to be putting in the pushes and pulls soon. And when we look at this on the iPad in portrait mode, remember we have access to this button right here, which we'll swap the dimensions, turn it from landscape into portrait and vice-versa. We can see that we do have our 2 columns, which is what we want. If we scroll down, we can see that our third column, the sports icons, are now stacked underneath the first two columns. Likewise, if we look at the iPhone we have our content on top, and as we scroll down we have our mountain ranges and our sports icons right before the footer. So we're getting three different layouts, the single-column for the iPhone, the 2 column for the iPad in portrait mode, and then anything else, such as the iPad in landscape mode. So let's go in and push and pull these columns properly so that they line up as we expect. So looking at our section, our main content, we're going to need to push this off of the left side. So we'll add the class col-sm-push-3. And the reason we want to push it 3 grid columns is because our mountain ranges are going to be 3 grid columns wide at the small level. Likewise, at the medium level the mountain ranges are going to be 2 columns wide, so we're going to have to make sure that we have a class col-md-push-2. And we need to pull our mountain ranges. We want the mountain ranges to always show up on the left side of the screen, so we'll add the class col-sm-pull-9, and let's just verify that. Right at the small level, our main content is going to be o9 columns wide, and at the medium level our content is going to be 8 columns wide. So this is correct, and we need to add col-md-pull-8. So let's take a look at this. So in our desktop browser everything looks fine. The mountain ranges are getting pulled over to the left side. I'll pull up Developer Tools. And things look a little bit off, but you've got to remember that when you pull up the Developer Tools you're always going to want to refresh. I'll hit F5, and that fixed the problem. Things look good in the portrait iPad right now. If we scroll down, we do get our icons on the bottom still. And if we go down even smaller to the iPhone, things are looking good, we have all three columns stacked. So just keep in mind that when we're working with the Bootstrap grid things can get a little bit confusing, and the key thing to keep in mind is that you always want your elements to add up to 12 columns, so at the small level we have 3-grid columns, which means our main content needs to take up 9 columns. And then at the medium level our main content is taking up 8 columns, and our mountain ranges are taking up 2 columns, so we need to make sure that the final column takes up 2 columns for medium. And we look down at our sports icons, and yes it's set to col-md-2. And the other thing to keep in mind is that we always push and pull from the left side of the page. At the small breakpoint we need to push it over to the right three grid columns, and at the medium we only need to push it over 2 columns. And pull is the exact opposite. We want to pull it over 9 columns for small, and we want to pull the mountain ranges over 8 columns for large.
The Layout Shifter Pattern
The next pattern we'll look at is the Layout Shifter. the Layout Shifter is about a significant change in the way you layout your website. We've looked at moving columns around, both with pushing and pulling them and stacking them up, but shifting the entire layout, or parts of the layout, goes beyond Bootstrap classes. To show an example, let's say we take our sports icons on the right here and for a medium screen size let's show those underneath the header. So it won't be a column anymore, it'll be a div, which exists between the header and our two other columns, and that will only be for the medium breakpoint. On all the other breakpoints we'll go back to what we have already. So after our div with the container-fluid here, but before we add the row, I'm going to add some markup. So I added a new row, and this is also our sports-icon-list. This is pretty much the same code that we have pasted down below, and it shows our five sports icons. I also added a class to it called sports-list-top, because we're going to need some special CSS just for showing these icons across the top of the screen. Let's look at the CSS file, and we can see our sports-list-top class here, and we're going to take the div underneath it and center it. We're going to set a margin-left and right of auto, and we're going to make sure that everything gets centered. And that'll work because we're taking our anchor tags and displaying them as inline-block elements. We're also going to add a little bit of margin to our anchors, the anchors being the images along with the subtitles. Looking back at the markup, there's nothing in here to prevent this from showing in all the form-factors for all visual breakpoints, but let's just run it now just to take a look at it. So we're getting our icons lined up across, and as we resize the browser it just stays there, and that's fine, because we're going to be removing that for everything but the medium screen size. And the way to do that is to use Bootstrap classes to hide and show DOM elements. I'll add the Bootstrap class visible-md for medium. Now if we add visible-md, we're going to have to go down to our other sports icons and hide those. We'll add the class hidden-md, so these will be hidden on the medium form-factors. And I'll save it, and let's take a look now. I'll hit refresh, and we're at the medium size. As I shrink it down to the small size, you can see our icons are back on the bottom, and as I grow it up to the medium size, our icons are on the top, and they're not displayed at all on the bottom. Now it's hard to show the large size, given the resolution of this video, but let me pull up the Developer Tools, and for now let's just make the resolution very wide. So we can see for the large screen size, which is bigger than 1200px, we have our sports icons back in the right column, and they're missing when we look down at the bottom of the page, so this is working fine. When we go back to the medium size, the icons are on top, and they're not located below. So for this Layout Shifter pattern, one of the downsides is that you might have to duplicate code, the way we did or duplicate markup. Our sports icons are listed twice, but we do have the flexibility of significantly changing our layout without using JavaScript or pulling down more markup off the internet, and the way we do that is with the visible class. In this case it's only going to be visible on medium devices, and the hidden class. This column will be hidden on medium devices. Now one other fix we would need to make in this case, let's pull up the site again, is when we are in this medium form-factor, we have all this empty space on the right, so let's extend out our mountain ranges and our main content to fill up the whole page. Let's keep our main content at 9, even past the medium breakpoint, and we'll change it to 8 at the large breakpoint. And instead of pushing it at the medium breakpoint we'll push it at the large breakpoint. And we'll do the same thing for our mountain ranges. It'll take up three grid elements at the small size, and at the large size it'll take up 2. And for small sizes we'll still pull at 9, but for large sizes we'll pull at 8. So now when I refresh we can see that we have our icons on top, and the content fills the whole screen. Looking at our large size again, I'll refresh it, and we can see that for the large form factor the icons are back on the right and everything is properly aligned.
The Content Reflow Pattern
Let's look at the Content Reflow pattern. Sometimes we're going to need to adjust our markup, and adjust the way images are visually aligned or the way labels are attached to images. Let's take the mountain ranges as an example. Here we have a narrow column, so it looks fine with the image on top and the label underneath it, but what if we view this on a smart phone? Let's take a look. We have our mountain ranges, and there's just a lot of empty space on the left side and on the right side. The margins are too wide, and one thing we could do is we could take the image, move it towards the left margin, and then take our label, like in this first mountain range, the Wasatch Range, we can move that text to the right of the image. And that's what we mean by Content Reflow. We're going to change the display characteristics of some of our HTML elements depending upon the screen size, and the way we do that is with media queries. So I'm in the 08 folder, and one thing I did is I copied our css file here because we're going to make some significant changes to it, and our index.html file now points to the local app.css file. So let's go to this app.css file, and we'll go down to the bottom, and let's add a media query. I'll add @media, and we'll specify the max-width of 767 pixels. So this media query is going to be active for our extra-small screen size. That would be from 0 pixels up to 767 pixels, because if you remember, 768 pixels is the visual breakpoint that gets us into the small range, so we're working with the extra-small smart phone size now. So our mountain ranges have a class of range-list, and the label is an h4 header. So let's modify this. Normally a header has a display of block, which means it'll be on its own line, but in this case we want it to be next to the image of the mountain range, so we'll set the display to inline. Now we also want to modify our anchor tag. Let's just take a look at that quick. Here's the h4 tag that's going to be inline now, so this will show up next to our img, but the problem with that is we're going to lose our natural line break after the h4, so we're going to need to put a line break after the anchor tag. And one easy way to do that is to treat the anchor tag as a block, instead of its normal inline display characteristic. So we'll take our range-list and modify the anchor tag. We'll set the display to block. I'll refresh, and we're closer to what we want. We have our images showing up on the left side and the labels on the right, which is fine. It looks a little bit off because our images are still the same size. So let's modify the image tag for the mountain ranges. So I added the selector .range-list img, which will take all our mountain range images. And we'll cover responsive images later on in the course, but for now I'm just going to set the width and height to 33%, and I'm going to add a little bit of a margin to the right and bottom. I'll refresh, and now our mountain ranges are looking better. We have a small image on the left and the label on the right, and if we compare that to the browser view, we're still getting the images on top and the label on the bottom, which shows our media query is working fine. I think the only problem is that the alignment is off a little bit on the label, let's take a look. It would be good if we increased the font a little bit on the label, and made sure that the centers were aligned between the image and the label. Let's add that to the media query. So going back to our media query, let's increase the font size a little bit and we can also add some margin to the top of the image. And I'll refresh, and we get the smaller image lined up with the label on the right. So for this Content Reflow pattern, an easy way to move things around are within the media queries and changing the display. Changing the display to inline will allow things to show side by side, and changing the display to block will add line breaks after an element.
Same-Sized Columns in Bootstrap
Let's handle the problem of different sized columns. The best way to see this is to pull up the Developer Tools, and I'm looking at the Google Nexus 10. That's wide enough to be set greater than 1200 pixels, so that's the large breakpoint. And here we can easily see that our columns all have different heights. The mountain range column ends right here, and our sports icons ends a little bit higher, and the middle column is the longest. That goes down to the bottom to the footer. But in a lot of cases we want all three volumes to be the same height and go all the way down to the footer. Let's see how we do that. I'm in the 09 folder, and if you look at app.css, I pasted in some code from the internet. Here's the link. It's at minimit.com, and this is code that's pretty popular on Stack Overflow and search results to handle this problem of making columns the same height using Bootstrap. And let's just see how it works. First of all, we have some classes, container-xs-height, but we're more interested in getting our three columns to all of the same height, and that starts at the small level, so here's the media query that deals with the small level. And we have a container-sm-height, a row-sm-height, and a col-sm-height. The container-sm-height will get added to our container. Likewise, the row-sm-height will get added to our row. And for the three columns that we're working with, we'll add the col-sm-height class. And looking at how this works, essentially what it does is it sets the display to table. Now if you worked with html in the 90's, and even the 2000's, a lot of people were using the table html tag, and that's not what we're talking about. We're talking about setting the display to table, and that works very well in HTML5. So the container becomes a table, and the row becomes a table row, and each one of our columns becomes a table-cell. And because there's only one row, all the cells will have the same height. So we're working on the small breakpoint, but if you needed to work on the extra-small breakpoint or the medium breakpoint or the large breakpoint, there are media queries set up for all of those as well. Now before we start adding these classes to our markup, we need to do one small fix. We have our header, and that's container-fluid, its own container, so that's fine, that could be modified however we want, but we're grouping in our sports-icons at the top like the horizontally laid out sports icons, along with our three columns, and we can't really do that. So let me copy this div right here and we'll close this out after the sports icons, and we'll just add a new div with class of "container-fluid". And all this will have is one row with our three columns. And if you remember, our three columns are a section, which is filled with articles and the two asides, the first aside and the second aside. So these three columns are where we want to apply our classes, starting with the container. I'll just copy container-sm-height, and I'll add that to our container. Next I'll grab row-sm-height, copy that, and add that to our row. And lastly I'll grab the col-sm-height, and we have three columns, so I'll add that to all three columns. Here's our section, and then our two asides. Here's our first one and our second one. So with these new classes, this container is going to be set up to display as a table, and we'll get all three columns to be the same height. Let's take a look at it. I'll hit Refresh. And now we can see that if we look at the right column with the sports icons, that now goes all the way down to the bottom to our FOOTER. Likewise, if we look at our mountain ranges you can see a slightly grayed out background color, and that also reaches the very bottom. So, once again, you're going to need to pick up the CSS with these media queries. And this is very popular code that you'll find on minimit.com, as well as Stack Overflow.
Summary
In this module, we looked at Bootstrap's 12 column grid system. We used this grid to put together a 3 column web page in order to implement an experiment with responsive design patterns. The Mostly Fluid pattern maintained a fluid 3 column layout all the way down to the extra-small visual breakpoint. The Column Drop pattern allowed us to start with a 3 column layout, then move down to a 2 column layout on a smaller device size, and finally down to a single-column layout on the smallest device size. When a column dropped away from its original position, it was placed in a single column on the bottom of the page. The Layout Shifter pattern was used to turn a single column of icons into a horizontal row of icons for a smaller device size. This pattern is very flexible and allows the web designer to place any element anywhere for any device size. For the Content Reflow pattern we used media queries and changed the CSS display property of several items. This allowed us to reposition image titles based upon the device size. Finally, we looked at a common problem in multi-column page design, the need to make all columns the same height. We saw how to solve this without JavaScript by modifying the display property of several page elements.
Responsive Navigation
Introduction
Welcome to this module titled, Responsive Navigation. For this module we'll be using Bootstrap's responsive navbar control to add simple navigation to our website. Here you can see the sample navbar from Bootstrap's website, getbootstrap.com. You can see it has the ability to have an embedded form, as well as Dropdown menu items. We'll take a close look at many of the CSS classes used to style this control. We'll be changing colors, adjusting margins, adding our own links, and fixing it to the top of our web page. During this process, you'll learn to use some of the great developer tools in the Chrome browser. We'll also add a logo image and use CSS to position it properly within the navbar. We'll cover responsive images in more detail later in this course, but for now we can just use traditional fluid techniques to place the image within the navbar. One of the great benefits of using Bootstrap's navbar is that it's responsive and it collapses down well for very small device sizes. A button appears, and tapping it will bring up a vertical list of our navigation links. We'll make sure our navigation is styled properly and functions properly in a wide range of devices. A cool feature in many modern websites is the ability to have the navigation area re-size itself as needed. Here you can see that we start with a large navigation area while the user is viewing the top of the page, but as the user scrolls down the page, the navigation header animates and shrinks a bit to get out of the way. The smaller navigation area is less obtrusive and also allows the user to navigate from any scroll position on the page. When the user navigates or scrolls back to the top of the page, the navigation area animates back to its original form. We'll use some code from a popular GitHub project to accomplish this. The animation is accomplished with CSS transitions. We'll also take a look at an older browser, specifically IE9, to make sure that it handles this feature gracefully, despite not being able to work with CSS transition animations. This animation works great on the most modern high-speed smart phones, but scrolling and CSS animations don't usually work well together on older smart phones and tablets. Older devices sometimes spend too much processing time just scrolling a page and shut off CSS and JavaScript animations until the scrolling completes. Despite this, navigation still works properly on older devices, you just don't get the smooth animated transition. So let's get started building our navbar.
Bootstrap's Navbar
Let's take a look at Bootstrap's Navbar Classes for navigation. Here we have the sample navbar from Bootstrap's site, and this is actually a pretty complex example. A lot of times, all you're going to have in the navbar is your Brand on the left, and a bunch of Links, but here we can see more than that. We can see a Dropdown menu and a Search form embedded within the navbar. And, of course, since this is a Bootstrap native control it's fully responsive. If we shrink down to the small or extra-small size, we'll get this navbar on the bottom, which only contains a brand and a button. So let's look at the classes for these. The full wide navbar can be styled with .navbar-nav, and the smaller responsive version can be styled with .navbar-header, so you have some control over how each of these gets laid out and styled. The Brand on the far left side can be styled with .navbar-brand, and after the brand, the navbar gets divided into the left side and the right side. The left side can be styled with .navbar-left, and the right side can be styled with .navbar-right. The Search form that we see in the middle can also be styled with a .navbar-form. And you see these a lot for things like search, but also signing in, logging in with a username and password or even registering. Looking at the .navbar-header, it also has the .navbar-brand logo, and the button on the far right side can be styled with .navbar-toggle. Now when that toggle switch is pressed, it's going to take the horizontal layout of the navbar and lay it out vertically. I'll just show these _____ here, and when you press the toggle button you can see that each element gets displayed on its own line within the Dropdown. So this is great for small devices like smart phones, and maybe even tablets that are pretty narrow in portrait mode. So we'll see this in action in the next video.
Adding the Navbar
Let's integrate a navbar into our project. I'm in the ReponsiveNav project, 03, and I'll be working in the after folder. Looking at our index.html file, let's just make sure that this is our start page, and let's take a look at it. So we have the website we started in the last module. The sports icons are only going to show up on the right side now. I removed the part that shows them under the header. So what we want to do is we want to take our navbar and display it up here in the header. Looking at our html page, we have our header right here, so we just need to replace this h1 tag with a navbar. So I'm here at getbootstrap.com and I'm going to click on the Components section. If we look down at the right side menu we can see navbar, and I'll go down a bit more and we can see the sample we were working with, in the PowerPOint, and I'm just going to grab out this example right here. So we're starting with the nav element, going down to the closing nav element, and I'll copy this. And I'm going to paste that right over the h1 tag. And I'll save it, and let's take a look at it in Chrome. So we got rid of our HEADER text, and here's the navbar. You can see the Brand name, and the Links, the Dropdowns, the form, and I'll hit F12 to go to the Developers Tools and refresh it, and you can see that get our shortened navigation right here. Now it looks good, but it's not working, when I click the button nothing happens. Likewise, if I go back to the full page and I click on a Dropdown, neither of these do anything, so let's fix that up. I'll go to the top of the html page, and we're going to need to add a script for jQuery and also Bootstrap. I'm using Visual Studio, so all that got included when I used NuGet, but if I look in the Scripts folder, I'm going to go ahead and add the minified jquery-1.9, and drop that in, and I'll also drop in bootstrap.min.js. Let's just make sure this works, then we'll walk through the code a bit. So I refreshed it, and the Dropdown is working fine. Likewise, if I look at the smart phone version we get our vertical layout of all the navbar elements. So it's working fine now. Before I look at the code, you'll see that there's actually an error up here in the console. Chrome is looking for jquery.min.map, and this is a source map. What a source map is, is since we're using the minified version of jQuery, Chrome is going to reach out and try to find the actual version of jQuery, by using this map file and also the jQuery non-minified version, and there are a few ways to fix this. One way is to look at the minified version of jQuery, and you can see the last line right here gives a source mapping URL, and if we deleted this line, that would fix the error. Now if you are interested in having the map file in the full version, we could just drop the map file in the non-minified version into our project, and also make sure that our server could actually serve up these map files. But I 'm just going to do the quick solution and we're going to go into the settings. And if we look down a bit we can see this option, Enable JavaScript source maps, and I'll just turn it off. Now when I refresh, the error goes away. So looking back at the code now, let's take a look at the nav element that we pasted in. It has a class of navbar and navbar-default, and we'll be changing the navbar default later when we do more styling on this, but for now you can see it creates a container, which is fluid, and this div is for our smart phone size. Bootstrap is mobile first, so it's usually going to list the mobile version first. It has a class of navbar-header to cover the brand and then the button, and here's our button right here to open up the vertical menu. And we also have the navbar-brand class on our Brand button. So this is for the smart phone size, and the next div is for the big wide version of the navbar. Since it's mobile first, it's starting off collapsed, and we'll take a look at the mechanism that causes it to collapse or uncollapse in a second, but quickly looking through this, we have an unordered list and list items. So here we have our links, and our "dropdown", our dropdown is a big list item. And we have our form with a class of "navbar-form". Looking back at it, you can see the form right here, Search and Submit. And then we have some items that are pulled over the right side with the navbar-right class. We have a Link, and we have another Dropdown. So all of this is pretty straightforward HTML, except for the part where we collapse and uncollapse these divs. So if we look back up at our button on the smart phone size, we can see a few data- attributes. We have a data-toggle equals collapse, and a data-target, which gives the id of bs-example-navbar-collapse-1, which is the id of our other div down here. And that's why we needed to include jQuery and Bootstrap. Bootstrap is going to monitor these data- attributes, and at the right time, Bootstrap is going to know based on media queries and the size of the viewport, whether or not to show or hide this element right here, which is the wide version of the navbar _____. Another tricky thing about this button is that we have these three spans right here, and they have classes of icon-bar. Looking back at the smart phone, you can see that we have three lines on our button, and those three lines come from those three spans. So just remember the key thing is we definitely need jQuery and we need the Bootstrap JavaScript file in order to get these data- attributes to function. Now in the rest of this module we'll be working on modifying this and styling it so that it fits our needs.
Styling the Navbar
So up on top here we have the default navbar from the sample at the Bootstrap website. In this video, we're going to fix it up with CSS mostly, and turn it into something useful for our site. We'll get rid of these Links, and the Dropdown, and the form, we'll fix the color, and let's start with that. We'll take out this old header color. So I'm in the css file, and we can see our header right here. I'm just going to delete this because we only have that in there for testing. Next I'm going to go into the index.html file, and let's cut out everything from the sample. We're going to keep our navbar-header right here for the extra-small screen size, but down below we can take out our navigation right here, we can take out the form, and let's keep in one Link, because we're going to want to add some Links, but I'll delete everything else, such as this dropdown. And I'll copy the link a few times, and I'll quickly fix this up. So we added links for Sights, Sports, Activities, and Contact Us, so I'll save this, and let's take a look. Alright, so it's getting closer to what I wanted. Now I want to make the whole navbar darker, and we can do that by adding the navbar-inverse.css class. You can see on our nav we have a navbar-default, but to invert it and make it dark, we can add the class navbar-inverse. And it's getting closer to what I want. Now there are a few problems here. The navbar isn't lining up with the left side or the right side, it seems to be centered a little bit, and there seems to be some kind of margin, and that's probably caused by a faulty container. If we look at our header and we give it a class of container-fluid, but in the Bootstrap sample they also give a class of container-fluid to a div within the navigation. So let's just take it out of our header, we won't give it a class, and we'll see what that does. And that fixed it, now we get alignment on the left side and right side. The next thing I want to do is get rid of this gap between the navbar and the main content, the two asides we can see are clearly down a bit. Now I'm not exactly sure what's causing that, so let's pull up the Developer Tools with F12. And if your tools are on the side, you can always press this icon right here to switch it from the side view to the bottom view, and I'll hit the Search icon and I'll click on the navbar. In order to see this better I'm going to click on the Computed tab. I'll uncheck Show inherited properties, and there's probably a margin, so I'll make sure the margins are in view, and we're looking for a margin-top or a margin-bottom being set somewhere. So it's not on this div. I'll click on the div above it. Again, there are no margins listed here or in the box above, so I'll keep going up higher, still no margins. And here we go, I clicked on the nav, and now we can see that there's a margin of 20 shown right here, and if we scroll down and look at our margin-bottom it's set to 20 pixels. We can also see it if we mouse over the nav, we can see a message, and we can see that the gap is actually highlighted, showing that that is, in fact, the margin. So let's find out exactly where this margin is. I'll click on Styles, and we'll look for our margin-bottom right here, and that's being set in our bootstrap.min.css file with a .navbar selector. So let's add our own .navbar selector to override that. Navigation is going to be at the top, so I'll put that in the top of the css file as well, and I'll add the navbar selector, and a margin-bottom of 0px. And I refresh, and the margin is gone. Now the asides and the content go right up to the navbar, which is what we want. One other fix I want to make is, well we're going to fix the Brand in the next video, we're going to add an image here, but the default colors are a little bit too dark for these links here. It's fine when you mouse over it, it gets nice and bright, but I want these links to be a little bit lighter. So, again, I'll pull up the Developer Tools, I'll click on the Search button and click on Sites, and right at the top here we can actually see where the color is being set to a dark gray, #777. And let's just change this to bbb, which will be lighter, and that looks better. It still lights up a little bit more when you mouse over, and that's good, but overall if you compare it to the brand it's still looking pretty good now. So just because we made the change here, doesn't mean it's going to be saved anywhere. So let's copy this change and I'll paste this into our css file. So we have .navbar-inverse, .navbar-nav, list item, and anchor. We'll be setting the color to light gray. I'll save it, just to make sure, and I'll refresh, and now we're getting our lighter links, which is good. Now we're not going to hook these up to link to the document yet, we'll look at that in a future module on scrolling, because when we click on these links we're going to want to scroll the page down to the appropriate area. We're going to be building a large, one-page website. But for now, everything's looking good, and in the next video we'll take a look at changing the Brand to an image.
Adding a Logo Image
In this video we're going to address the Brand in the upper left corner. Instead of having text there, let's add an image. So I'm in our index.html document, and I'll scroll down until we find the brand, which is right here. We can take out the word Brand, and add in an image called site-logo-white.png, and I'll drop that in there, and I'll reformat it a bit. And I want to take out this class of "navbar-brand", because working with an image, we're going to have to adjust things ourselves. So let's see what we have. So here's our image. It's the mountain top along with this text. Now I didn't want to pull in an extra font, so I decided to just put this text in the image, and that's fine for a small menu like this. Now the only problem is that this logo is a little bit too big, I want to shrink it down, so let's do that with css. I'll go to the app.css file, and I'll set up a selective for .navbar img, and we can set the width to 70%, and the height to 70% as well. So that's a good size now. I guess the problem is it seems to need a bit of padding, like it shouldn't bump up right against the top and the bottom the way it does. So let's fix that up in our css as well. We have our navbar selector, and we'll set up padding for the top and bottom at, let's say, 30px, and the left and right can be at 15px, let's try that. And that looks good. It may look a little bit tall, with a little bit too much padding on the top and bottom, but in the next video we're going to work with that and we're going to work on shrinking it so that as we scroll down the page the menu will shrink, but I think this looks good enough now for our purposes. Let's just test it and see how it looks on different devices. I'll hit F12, and one thing you'll notice is that Chrome just updated their browser, and the tools for testing on various devices are a lot better. For one thing, it's warning us right here on top that we're going to need to reload the page, so I'll do that by hitting F5. And when we look at models to emulate in our emulation tab, you can see that it added the newer Apple devices, the iPhone 6 and the iPhone 6 Plus. Let's try it out on iPhone 6, and I'll hit F5 again to reload the page, and that looks good. Things are aligned. Looking at it in the iPhone 5, it's also looking good. On a tablet such as the iPad 3/4, it looks like we're good to go. We tried out a bunch of different form-factors and the menu is fine on each one. Now with this new version of Chrome, we could also drag these tabs that you see here. And as we drag it to the left, you can see our responsive website in action. If we look at the model, we can see the model changed away from the iPads as we changed it, but instead of reshaping your browser, you can go ahead and just drag this tab right here. So in the next video we'll work on animating our menu by getting it to shrink and probably be transparent as well as we scroll down the page.
Animating the Navbar When Scrolling
So we have our navbar all set up, and when we scroll down, the navbar scrolls off the top of the page. But what we want to do to give it a modern look and feel is keep the navbar on top, but we'll shrink the size, we'll reduce the padding on the top and the bottom, and we'll also make it semi-transparent so you'll be able to see through it. You'll have easy access to the navigation no matter where you are on the page. So I'm in the 06 folder, and I'll just make sure index.html is the start page. Now in order to get our navbar stuck to the top of the page, we have to add a class to it. We'll add the class navbar-fixed-top. You could also fix it to the bottom, but you really don't see that too much on the web. So now when I scroll down the menu stays where it is. One of the problems, though, is that our content runs up into it now, because the position of the navbar is fixed. So the way to handle that is to put some padding on the top of the body. We'll go to the app.css file, and go to the very top where we have our body tag, and I'll specify that the padding on top should be 80px. So the top 80px are taken up by our navbar. So I refreshed, and now we can see that everything falls into place well. Now in order to get this navbar to shrink when we scroll down, we're going to use a third party library from GitHub. So I'm here at github.com/codrops/AnimatedHeader, and here we have a project called AnimatedHeader, and there's not much to it. It says it's a fixed header that will animate its size on scroll. The inner elements will also adjust their size with the transition, so we'll use a transition to adjust the padding and the opacity. And if we look at the code really quick, I'm going to import the cbpAnimatedHeader.js file, and classie.js, and we'll look at those in a second. But back at the home page we can click on the Download ZIP file in order to get the files. So I already added these JavaScript files to the Scripts folder. Here's the cbpAnimatedHeader.js file, and also classie.js. Let's quickly look at these. Classie.js simply manipulates classes on elements. We can call classie.has, true or false if the element has a class, or we can add a class to an element, remove one, or toggle one, so that's a simple utility that's used by cbpAnimatedHeader.js. Let's quickly look at this. We're going to set the header, which is our navbar, by looking for this class right here, .cbp-af-header. And when we init, we'll listen on the window object for the scroll event, and after 250 milliseconds we'll call scrollPage, which is right here. And here we simply add or remove a class based upon the position that we're scrolling to. So the important thing we need to do is add this class right here to our navbar and add our css manipulations to this class right here. So we'll take the header class, I'll copy that and paste it into our html, and I'll paste it right on our nav element. And we also want to take our class name and we'll add that to our app.css file. I'll put it under the navbar items, make sure to add the . for class. So when the header shrinks, this is called header-shrink, let's modify the padding. The padding right now is set to 30 on the top and on the bottom, but let's change that to 5. So when the header shrinks, because we're scrolling down, the padding on the top and the bottom will go to 5px, and the padding on the right and left will stay the same at 15px. So the next thing we need to do is make sure we have classie.js and cbpAnimatedHeader listed in our html file. Now the way this is written, we need to add classie first and we need to add the AnimatedHeader file second, because the AnimatedHeader file depends upon classie. Also, some developers like to put their scripts on top in the header, and other developers like putting their scripts on the bottom of the html page. There are pros and cons each way, but the way cbpAnimatedHeader.js is written, it needs to be on the bottom, so I'm going to go ahead and remove them from the head, and paste them at the very bottom of the page after the footer. And the reason for this is that cbpAnimatedHeader needs to be able to see the complete DOM in order to get at the cbp-af-header element, this nav. So let's run it. And I'll scroll down, and we can see the menu shrinks. I'll scroll back up and it gets larger. So this works well, except it's not animated yet, and there are no changes to the opacity. Let's add a transition to handle this. I'm going to go to the app.css file and one thing we can do is on the header-shrink class we can also set the opacity lower. Let's set it to 90%. So that'll handle the opacity, and we also want to add a transition. We'll add it to our navbar right here, and we'll do a transition for all changes over 0.5s, half a second. Now when we're using transition, it's also helpful to use a vendor prefix for -webkit. Some of the older webkit browsers need that vendor prefix. So I'll save this, and let's take a look at it now. I'll refresh, and we'll scroll down, and we get the nice smooth animation when we scroll up and down. So the menu is pretty much complete now. We're going to be adding in the links later in this course, when we work with Bootstrap Scroll Spy Widget, but for now we're pretty much done and it's looking pretty good. Just one note about the transition that we're using, if we look at the transition here and the webkit transition, these are relatively new, and they're not really supported too well in Internet Explorer. Let's take a look at caniuse.com. So I'm at caniuse.com, and let's type in transition, and we have CSS3 Transitions, that's what we're looking for. And if you remember, we already added a vendor prefix for webkit, which we need for 5.1 on Safari, and also the older Android Browsers. But if we look at Internet Explorer, transitions aren't supported in IE8 and IE9, so let's just test that out and make sure things are still good in those browsers. I'll change the browser over to Internet Explorer, and I'll run it, and these should work fine because I'm using a later version, and that's working well. So I'll pull up the developer Tools, and if you look at this icon right here, you can change the document mode, and we'll go to an unsupported version, 9. So now if I scroll in IE9, we can see that the menu jumps, and that's fine, we're not getting the animation, but it's not screwing up our navigation. If you really want the animation, you're just going to have to get an updated browser for IE. Another thing we should do is just really test this out in Chrome's Developer Tools in several different devices. Let's try it in an iPhone 6, and as we scroll down we can see the menu shrinks. And if we try it on an iPad, we'll scroll down and that's working fine. Now this utility doesn't truly emulate the iOS devices or other smart phones. A lot of times when you scroll on a smart phone, things like JavaScript and CSS animations are held back. They're not displayed until after the scrolling stops. That's because the device needs to spend all is processing time handling the scrolling. But at least here we can tell that things are laid out properly on the smaller devices.
Summary
In this module, we looked at Bootstrap's responsive navbar, and many of its CSS classes. We styled the navbar with several classes including .navbar-right, to align our links to the right side, .navbar-inverse to switch from the default light styling over to dark styling, and .navbar-fixed-top to fix our navbar at the top of the screen, even as the viewer scrolls down. We added a logo image in place of the standard text used for branding the navbar. Then we worked on animating our navbar based on the scroll position of the page. We used code from a GitHub project named cbpAnimatedHeader to accomplish this. We also needed a dependency for this project called classie.js. This animation was accomplished using CSS transitions, and we made sure our navigation still functioned properly in IE9, which doesn't support the transition property for animation.
Responsive Images and Video
Introduction
Hi, my name is Mark Zamoyta, and in this module I'll be showing you several techniques to add responsive images and video to a web page. Getting an image to appear properly on any size device is easy with Bootstrap or just plain CSS. Videos can be a bit trickier, and they don't always display on smaller devices because of bandwidth and user interface constraints, but we'll see how to work with video using a popular GitHub project. We'll start off by using the Bootstrap class img-responsive to get an image to resize along with the size of the viewport. We'll also do some work on our logo image in the navbar. You can see how we use fluid techniques to get the image to resize, however, that may not always be desirable. The logo seen here is much too big. We'll see how to make the image non-responsive, giving it a static size for larger screens. We don't really need our logo to be a responsive image. A static image in the top left corner is good enough for a logo, but we'll add a media query to make it responsive and shrink on smaller devices. Next we'll look at styling responsive images with Bootstrap classes, as well as usual CSS properties. We'll see how to create an oval or circular cutout of an image, create a thumbnail style, and create rounded corners for an image. We'll also do some styling by adding an image border and drop shadow. A modern technique we see on many sites is to place a full-screen image, usually called wallpaper or backdrop, on top of a long single page. This image needs to be responsive in order to display on a wide variety of devices, and we also need to be able to place content over the image. We'll see how to do this using CSS properties. Another technique we see on modern web pages is to have a static background taking up the entire viewport, while allowing content to scroll over it. You can see that happening here. We'll see how to do this for large devices, but unfortunately many smaller devices don't allow for this. We'll see how to gracefully fall back to making these fixed images scroll when needed, giving the user a better experience on smaller devices. Full-screen images used as wallpaper for a site are cool, but full-screen video wallpaper is even cooler. We'll use a popular GitHub project to add video wallpaper to our site. We'll also see how we can use any YouTube video as wallpaper for our site. Many smaller devices won't play background video on a web page, so we'll see how to show a poster image instead of a video on those devices.
Responsive Images in Bootstrap
Let's take a look at responsive images with Bootstrap. I'm here in the 02 folder, and I'll take a look at index.html. I'm going to collapse the header, and I'll also collapse the footer, and you can see that what I did was I cut out all of our content from our sample website, and all we have is a fluid container with a single row. Let's just take a look and see what this looks like in Chrome. Okay, so there's the HEADER and FOOTER and that's it. Let's just add a simple image and see how that behaves responsively. I'll take lake.jpg, and I'm not going to add any special styling to it, and I won't add any new classes, I'll just save it, and we'll take a look. When we pull up the developers Tools, I'll hit F12, and I'll go into Device mode, and Refresh, and I'll use the handle on the right to resize it. So in the larger size form-factors you can see we can see the image, but as we shrink down, nothing happens with the image, it just stays the way it is, so it's definitely not responsive as is. So to fix this, Bootstrap has a class. I'm at getbootstrap.com, and I'm in the CSS section, and I'm going to hit the Images link on the right. We can see that Bootstrap does help us out with images. There's a class called img-responsive, and we also see that that sets the max-width to 100%, and the height to auto, and that's pretty much all it does. That should be enough to get our image behaving properly. So in our image tag I'll add the class "img-responsive". Now let's take a look. I'll refresh it, and now we can see that as we resize the screen it does expand and contract the way we would expect it to.
Working With a Logo
So we saw how to make an image responsive with the img-responsive class. Let's take a look at the app again and I'll pull up the Developers Tools, and let's take a look at the logo in the top left corner. We can see that as we resize it, it stays the same on the larger sizes, but when we get down to the smaller sizes, first of all we get a slight error here for a few pixel values the menu drops below the icon, but then when we hit the smaller screen size we get a much bigger logo, and it does look a little bit pixelated. This is bigger than the image that we have, and as I shrink down more you can see the logo gets smaller in size. Now we don't want the logo to be responsive, we want it to just be a static image in the top left corner, and we also want to get rid of the problem here where our menu drops below the logo. So let's take a look at how we can fix that. The first thing I'm going to do is go into the images folder, and if we look at our site-logo-white.png file, you'll notice that we had to shrink that. The file is too big to begin with. When we originally added that, we cut the width and height down to 70%, but we don't want to have to do that. Let's just delete this and I'm going to add in an image that's 30% smaller. So I added in site-logo-white-70pct, and that's going to be our new image in the top left. We have our image tag right here, and I'll just add in the proper name. Let's save it and take a look. So everything looks fine, and I'll shrink it down and see if we can find our bug, and that looks good, the menu didn't drop down like it was doing before. Again, I'll move it to the left and we get our button, which is working fine. And our logo is staying the same size, and that's great. So while the image of the lake and the content of this page is responsive, we want to keep the logo static. If we make the screen size really small, there's not going to be enough room for both the button and the image. If you wanted to actually swap out this image for a smaller one, you would just add a media query. If the pixel value was below 400 or so, you could just swap in a different logo. So let's fix this image problem with a media query. I'm in our css file, and we have our navbar selector here. Let's put the media query right after that. We saw that we have the problem after 400 pixels, so we'll create a media query with a max-width of 400px, and we're going to want to look at our navbar and the image inside of it. Now one of the problems we're going to have as we resize this image is that it's going to be aligned to the top of the navbar, but we need to center it vertically. Centering it vertically is going to be hard, because the navbar actually grows and shrinks, so we can't hardcode a height value, so one way that we can center it vertically is to give it an absolute position. And we can set the top to 0, and the bottom to 0, and we'll set the margins to auto. Now since we're positioning it absolutely, we need to go to its parent, which is the navbar header. And let's just confirm that by looking in index.html. We have our image, which is part of an anchor tag, which is in our navbar header. So we'll grab our navbar header and position this relatively. And remember from CSS, that if we have something absolutely positioned, it's going to look for a parent with a relative position, so we just need to make sure we set that. Now one other thing we need to do is actually shrink this image, and we can just do that by setting the width to 70%. So, again, we're setting up a media query where the width is going to be less than 400px. And we're going to take our icon image and shrink it down to 70%, and these selectors right here are just going to center it vertically. Let's take a look in Chrome. So I'll shrink down the screen to under 400 pixels, and now we can see that the Rocky Mountain Outdoors icon is shrinking as we move to the left, and it's staying centered vertically, which is great. Let's select the iPhone just to make sure everything is good with that. I'll go with the iPhone 5, and that looks fine, our menu is still functional.
Styling Images
Let's look at styling our responsive image, both with the Bootstrap styling, and also with some regular CSS styling and positioning. So I'm in the 04 folder, and what I did was I just took out the header and the footer, so all we have is the plain image. And this will keep things simple as we focus on styling it. If we go to the css, let's just add a temporary selector here for the responsive image. And the first thing I want to do is get it off the left side of the page a little bit, so I'll add a margin to the left. Okay, so that's good. Now there are a few classes that Bootstrap gives us that we can apply to the image. There's an image img-circle, and you can see that applies a circle around the whole frame of the image. It's a little bit of an oval because we have a rectangular image, but if it were a square image it would be a perfect circle. We also have img-thumbnail, and that gives us a very light border around the image and it's even a little bit curved if you look at the corners here. And then there's also an img-rounded, which will give us rounded corners. And here we can see in the upper left-hand corner it's just a little bit rounded. So those are the only three classes that Bootstrap gives us besides img-responsive. So let's also take a look at some of the regular css values that we can use. I'll go back to our img-responsive selector, and let's add a border. I'll specify 3px, and then solid, and I'll make it dark blue, and we get our dark border. Another common way to style images is to add a drop shadow, and in css the value is box-shadow. And I'll give it a color of black with a little bit of alpha, I'll put a 0.5 so it's halfway transparent, and we want to offset it by 10px to the right and 10px down. And I'll also specify 10px for the size of the shadow. Let's take a look at this one. So we get our drop shadow to the right and the bottom. Another thing we could do is spread that shadow out a lot. I usually like putting a high value here. Instead of 10 we'll put 60. So it's a much more soft drop shadow, and it even shows up on the top and the left a little bit. And while we're at it, let's just center this image horizontally. There are a few different ways to center an image, but the most popular way is probably taking the margin and we don't care about the top and bottom, but on the left and right we want to set it to auto. And that's going to let the renderer determine how much size there is on the left and right and it'll end up centering the image for us. So if we take a look at this and refresh, we can see that the image is centered horizontally. One thing you'll notice about our css is we set the margin so that it's automatic on the left and right to center it, but we didn't specify that we wanted the image shown as a block element. Normally an image is going to be an inline element, and I'll just add that in there for now, and we'll see that it doesn't work. I refresh, and it pulls the image to the left side. That's because normally an image is inline. But because we're using img-responsive from Bootstrap, our display is getting set to block, and we can just verify that with the tools. I'll select the image, and we can see we're setting our margin right here, and for the img-responsive tag we are setting the display to block, and that's built into Bootstrap. So in the next few videos in this module we'll take a look at adding images to the background of the page or the background of a div, so that we can have full-page images, as well as videos.
Full Screen Background Images
So here we have our HEADER and our FOOTER, and also the responsive image we've been working with. Let's take a look at taking this image and turning it into a full-screen backdrop. So looking at our html, I'll collapse the header and footer. So we're going to keep our fluid container, and we're going to keep our row, but we're going to take out our responsive image. And I'll add a new div here, and this div will take up the full screen, and its background image property will determine which jpg or png file takes up the full background. First I'm going to add a class of fill-screen. And normally you wouldn't specify a style here in your html, you'd do it in a css file, but in this case I'm going to be adding a background image, and that gets set by a css property. That way both the non-full-screen and the full-screen images will be specified here in the markup. I'm setting the style to background image, url, and I'm specifying the url of the lake.jpg file. And I'll close out this div, and let's take a look at our fill-screen class. We need to add that to app.css. And I have it commented out right now, I'll just uncomment it, and fill-screen is going to set the background size property to cover. That way the image will cover the whole area of the div. Also, the background position is going to be set to center. So the image is always going to be centered, and it's always going to cover the full size of the div. So I'll save this and go back to the markup. There's one other thing we need to do. We have no idea how big this image is or how big the screen size that it's going to be displayed upon is, so we need to set the height of this div to the height of the full screen, and we do that with JavaScript. If we scroll down, I'll uncomment this script section here, and I added these few lines of code. We're going to set up a function for our jQuery ready event, so as soon as everything is loaded up we're going to set this event handler. So on the events load and resize, we're going to call this function. So the first time this page is loaded it'll get called, and if the browser window is ever resized this function will get called also. And we're going to grab our class that we're looking at, it's called fill-screen, let's just verify that, fill-screen right here. So we'll grab that selector for the class, and we're going to set this css property height to the window.innerHeight, and that'll give us the full height of the browser window or the inner height, which is where we can display content within the browser window. So everything should be set up now. Let me save this, and we'll check it out. And there we go, we have our full-screen image. I can scroll down, and we get our footer. There's one minor problem with this. The image isn't really full-screen. If you notice, I'll scroll down a little bit, and there's still a little bit more to the image when I scroll down. I'll scroll back up again, and the bottom of the image is cut off. The reason why, it has to do with our header. Let's go back to our css. And if you remember, the top of the css file in the body section, we're setting the top padding to 80px. And because we're using a full-size image now and we want it to take up the full-screen, I'm going to comment this out. And I'll refresh the page. So now the image goes all the way down to the bottom, and if we do scroll down, all we're going to get is the footer, there we go. Let's see how the image behaves when we look at it responsively. So I'm in the Developer Tools. Let's refresh and let's see how this behaves responsively. We're set to the iPhone 5, and we can see that the image takes up the full screen. I'll expand it out and in a little bit, and I'll also expand it up and down. And we can see that the image always does fit in the viewport. So having these big full-screen images on your start page or at the top of your start page, is a pretty modern technique. You see it in a lot of websites, and we'll be using this for the rest of this course. In the next video we'll add some more full-screen images and some content in between the images, and we'll see how we can scroll down and get different full-screen images as we scroll.
Full Screen, Fixed Images
So we have our full-screen image, and the image scrolls when we scroll down to see our footer. Let's add some more content here so we can add some more background images. So here's our row with the image, and I'm going to copy this, and let's create some blank panels that we can use for content. I won't fill things in with content, but we'll at least get to see where it would be placed. So I'll give this row another class of, I'll call it content-filler for now, and I'll copy some more content. So we're loading lake, and we'll also load the elk image, and let's create this class content-filler. So after fill-screen, I'll add our temporary class selector for .content-filler. And since there's no real content in here, we need to give it a minimum height, and I'll just say 350px. Let's see how this looks. I'll scroll down, and we have our white area of content and we have our next image, and another white area of content, and our footer. So we can have multiple background images within the different divs here, but normally you don't see these images scrolling up and down the screen like this, you'll see the content move over the images. Let's take a look at how we do that. I'll go the html. And to make an image static, such as the elk image, let's create a new class, and we'll call it fixed-attachment. We want this background image to be fixed to the browser window, and not scroll when we scroll. So I'll create fixed-attachment in the css file, and the way we make it fixed is with the background-attachment property, setting it to fixed. So just checking out the markup again, we're only adding this class to the elk, the lake will scroll off the screen. And you do see that a lot in websites. The top full-screen image will scroll off, while other images just kind of hang out in the background. So let's take a look at this. I'll refresh. So we have our lake image, and then you can see that the elk image is already there. As the lake scrolls up and our content scrolls up, the elk starts to appear, and the content below it will start to cover up the background image, and we get our footer. So this image with the elk is attached, while the other image is not attached, it'll scroll as we scroll. I'm scrolling with the mouse wheel right now. And let's just add a little bit more content just to make sure it's working right. I'll copy this, the elk and the content-filler, and I also have a snowboarder image, snowboarder.jpg. I'll refresh, and we have our elk, and then we should have the snowboarder underneath it, and there we go. We have a little bit of content below too. So that's how we get these big background images, and the ability to either scroll or not scroll them. Just to review the css classes, you need to set the background-size to cover, and the background-position to center, and if you want the image attached, where it won't scroll, you have to set the background-attachment to fixed. Another important part of what we did was the JavaScript. If we look down at the bottom of our page, I added this special script section here, and normally you would put this in its own file, but for this demo I'm just including it on the bottom. And the main thing this does is it looks for our class fill-screen, and it sets the height to the height of the window, and that's the visible height that we can see within the browser. And the other important piece was the background-image itself. And I'm specifying that here, within our markup, because that's where images are usually specified, is in the markup. Also, it allows us to create this one class, fill-screen, and reuse it everywhere.
Fixed Images on Small Devices
There's just one slight problem with the fixed backgrounds that we're using. Let's take a look here on Chrome, and we have our fist image, which is going to scroll, that one's not fixed. So I'll scroll that off the top, and then the picture that's appearing underneath it is fixed, that's not scrolling at all. Our content, this white panel right here, is scrolling over it for now. We'll fill that content in in the next module, but for now, while it's working fine on the browser, it doesn't work in mobile devices. I tried it on iOS 7 and 8, and it's a known problem that these kinds of fixed images don't work. What they end up doing is scrolling off the screen. And in the case of iOS 8, and I think iOS 7 as well, you won't even see the images in some cases. And, again, this is only where we have a fixed background. Let's look at the css. I'm in app.css, and here's where we're setting our fixed-attachment class. We're setting the property background-attachment to fixed. We want to keep this for desktops because it's a pretty cool effect, but for anything smaller we can just have these images scroll with the rest of the content. One way we can do this is with media query. So in this media query, I'll put it right after fixed-attachment, we're going to handle all the screen sizes up to 1024px, so for all the smaller devices and tablets that run iOS or any other operating system up to that point. What we're going to do is we're going to reset our fixed-attachment, and instead of having a background-attachment of fixed, we'll set it to scroll. So let's try this out now. I'll refresh. We're actually going to have to shrink down to underneath 1024px, so I'll just pull up the Developer Tools and make sure we have an iPad, and I'll reload and scroll down. And we can see that our elk image is now scrolling, along with the snowboarder. And if we size it up over 1024, we can see that the image is now fixed, and the snowboarder is fixed as well. So you just need to be careful that whenever we're setting our background-attachment to fixed, the images could disappear on iOS 7 or 8, and possibly some Android devices as well. So the standard thing to do is just to let the images scroll off the screen, and that works fine.
Full Screen, Background Video
So we've seen how to add a full-screen image to the top of our web page, now let's add a full-screen video. Adding a video and making it full-screen, isn't as straightforward as using an image. We don't have access to the background css properties, those are meant mainly for static images. So I'm here at GitHub, and the project I'm looking at is github.com/Formstone/Wallpaper, and I'll just click on the link here to go their website, and click the View Demo button. If we scroll down we can see a full-screen image. It's not full-screen, but it's full-width. And if we keep scrolling down we'll see more images, until we get to video. And adding a video is pretty straightforward. If we look up at the JavaScript for it, we just need to specify an element that we want to append the video to, and we'll call the wallpaper method, and the source as an option that gets set to the video type. Here we have three video types for mp4, ogg, and webm, and there's also a poster. A poster will be an image, in this case a jpg, that'll display if the browser isn't capable of playing videos, or if it can't find the video file, or if the server just won't serve up the video file for some reason. So let's copy this, and I'll leave that in the clipboard for now, but I'll back up, and you can click the Download ZIP button to get the files you need. Now I've already added the files. If we look in the Scripts folder you can see jquery.fs.wallpaper.min.js, And I'll add that down at the bottom of our file. And we're also going to need to include a css file. I'll close up scripts and look at content, and you can see jquery.fs.wallpaper.css, and I'll add that right after Bootstrap. So our css and JavaScript files are all set up. Let's go down to our own script section here, and in our jQuery ready event I'll paste in the code that I copied from the wallpaper website. Now let's fix this up. Instead of calling it element, let's call it video-wallpaper, and I'll set the path to the poster to images/bike.png. I'll set the mp4 path bike.mp4. So for this demo I'm just going to use an mp4 file, but to support more browsers you would want to convert that file over to an ogg, and a webm format as well. So I'll just comment those out for now. So the wallpaper is going to get set up on our video-wallpaper id. Let's set that up now. We want the video-wallpaper to appear underneath our whole header, so we'll give our header the id of video-wallpaper. Now the next thing we're going to need to do is make sure that our header now has the height of the entire screen or the browser viewport when we start, so let's add some css for that. I'll go to app.css, and the header is before the navbar, so I'll insert it right here. So it takes a little bit of styling to set this up right. We want to make sure our header is a block, and that it's positioned relative. That way the video can be resized within it. Width and height are set to auto, so that when the video gets placed inside it'll take up the full area. There's a little bit of padding on the top and bottom, and the min-height is 100%. Our video will always take up 100% of this header, and the header will always take up 100% of its parent, which would be the body. And for the background, we want to make sure the background doesn't repeat, and that it gets centered. We'll set the background-attachment to scroll so that the video will scroll off the screen when the user swipes up or scrolls down. And we'll set it to a dark color, and the size will cover, so it'll cover the entire area. Another thing we're going to need to do is take our html and body tags, and we need to make sure the height gets set to 100%, that's 100% of the browser window. So our css should all be set up okay now. Let's go back to index.html, and there's a few things we need to change. For one thing, we're going to take our background image that appears on top, and we're going to be showing a video now, so I'm just going to delete that whole div. And if we scroll down to our JavaScript, I entered the name wrong, it should be bikes, plural, for both png and bikes.mp4, so let's try this out now. We start up Chrome, and we get our full-screen video. Now this is set to loop. There we go, and that's the default setting. If we scroll down, we get our elk and we get our snowboarder picture. Now this full-screen video is only designed for desktops. On mobile we have a different problem, where a video if it started playing, would eat up a lot of bandwidth, and it just gives a bad user interface experience because in some cases it's inconsistent. It might ask you if you want to watch a video, and it might show the video controls. So the way this FormstoneWallpaper plugin works is that it will just show the poster image for tablets and smart phones. I pulled up the Developer Tools, and I'll refresh it, and let's go to, let's say an iPhone 5, and this is our poster image. There's no video and no video will play, and we can still scroll and get our other images. Likewise, with an iPad, it'll also show the poster image, and it won't play a video, but if I refresh on the large browser window we will get the video again.
Full Screen YouTube Videos
Using the Wallpaper jQuery plugin, we can also include a video from YouTube. I'm here at the GitHub repository again, and I'll go back to the demo. I'll click the View Demo button. And if we scroll down past the videos we can see a YouTube section. And here's a space shuttle taking off, coming directly from YouTube. So we can see here we still can set a poster, and to play the video we need to actually include the url and the VIDEO_ID from YouTube. So let's copy this, and let's go back to the source code. I'll just take out our mp4 and the comments for now, and I'll paste in the video item. Now we need to go grab a video id from YouTube, let's do that. So I'm at YouTube, and I'll search for Rocky Mountains. And we get our results, and let's just find a video. I'll take this one right here. So it's playing the video. You can see some birds flying around and some reflection in the water. Let me pause the video part of it. And if we look up at the URL, we can see youtube.com/watch, and here's the video id that we're going to need for the website. So it says watch?, and then v stands for video equals and then the id. So let's grab that id, I'll copy it and go back to the source code, and I'll paste it right where it says VIDEO_ID, and let's try this out. And the video starts up. We can see a little bit of the reflection in the water and the birds flying around a tiny bit. So the video is coming from YouTube. And you can also see that an advertisement just popped up. And, you know, that comes from using YouTube on your own site, you're going to get those advertisements. So everything is working fine. We can scroll down and get the rest of our site, and scroll up and get back to YouTube.
Summary
In this module, we looked at Bootstrap's class for working with responsive images, img-responsive. We also worked with Bootstrap styling classes, img-rounded, img-circle, and img-thumbnail. We saw how to make our logo non-responsive for larger devices, and responsive for smaller devices, using a media query. We added a wallpaper image to the top of our web page using standard css properties, background-size: cover, and background-position: center. We looked at attaching background images to a web page, so that content could scroll over it on larger devices using background-attachment: fixed. For smaller devices, a background-attachment of fixed may cause problems, so we saw how to set background-attachment to scroll. We used the GitHub project Formstone/Wallpaper to add video wallpaper to our page, and we also saw how to use that same project to add any YouTube video as wallpaper.
Scrolling Features
Introduction
Welcome to this module titled, Scrolling Features. My name is Mark Zamoyta. Scrolling is important in modern websites, especially because of the trend to create very long single-page sites. This trend is largely a result of smart phone and tablet users who can easily swipe up and down with a single finger in order to reach content. While swiping to reach content is gaining in popularity, navbar buttons still need to work. Let's take a look at the final web page we'll be creating in this module. We'll be adding scrolling features one by one. First off, we'll be creating some simple content so that we have something more interesting to scroll through than just white panes. Here's a text section titled, Visit the Rocky Mountains. Then we have an Activities section. There are three activities, each with a picture, caption, and paragraph. Then there's a simple Contact Us area. This is all just filler content so that we can work on scrolling techniques in this module. After adding the content, we'll decorate the top of our page. You can see our logo centered in the screen. This image is responsive, and will be placed in the middle of the viewport no matter what size device we're on. You can also see the down arrow, letting the user know they can swipe down or click on the arrow to scroll down to see more. This is a Font Awesome arrow, so we'll install Font Awesome into our site. Next we'll work with Bootstrap's Scrollspy component. Scrollspy itself is invisible, but it works with the navbar. Notice that as I manually scroll the page, our navbar links get updated. The link relating to the current section is highlighted with a black rectangular background and wider text. This is the Scrollspy component causing this to happen. Next we'll take a look at smooth scrolling. Notice that as I click on our navbar links the page smoothly scrolls to the proper section. You would think this functionality would exist in Bootstrap's navbar or Scrollspy components, but unfortunately it doesn't, so we'll have to implement this ourselves. It only takes a few lines of code. Finally, we'll take a look at parallax scrolling. Notice that as I manually scroll off the top of this page, the background image scrolls very slowly in relation to the logo and down arrow. I'll scroll back and forth a bit, because the effect is quite subtle. This type of scrolling, where you have items scrolling over the same area at different speeds, is called parallax scrolling. It's a popular technique in modern sites, and we'll use a library called stellar.js to implement this feature. Of course, all browsers handle scrolling automatically, but to take scrolling to the next level, as we've seen here, we're going to have to write some markup in JavaScript, so let's get started.
Adding Content for Scrolling
Let's add some content to our project. If you look in the 02 folder in the before folder, we can see a project from the last module, and I'll just run this. So you can see we have our navigation and a large full-screen image. When I scroll down we have a content area that's empty, we have an image, another content area, and another image, and a content area on the bottom. So in this module, I'll be adding some content so that we can work on scrolling, and I also want to clean up the project a bit. Let's go to the source code, and I'll be working in the after folder, so I'll pull up that index.html. The first thing I want to do is go to the bottom of this file, and you can see we have a