Touring the finished projects

- Before we start building our forms, I think it's helpful to first examine our finished projects. That way, you're going to have a better understanding of what we're building, and what our ultimate goals are. So I want to start with a shorter form that we're going to be creating, which is a single search form that has just this search input field, and then the submit button itself. So currently you're seeing the form at roughly 1280 resolution. You'll notice if I start to re-size the form, that the form is flexible. It flexes. So that's the first part of the responsiveness. The relationship between the input and the button continues.

You'll notice it's proportional to how much screen real estate they have. Then when the viewport gets small enough, the input field and the search button stack one on top of the other. Notice that in this stacked view, they're both the same width. And again, they remain flexible as the size of the container shrinks. So on a mobile device, for example, this search form's going to take up a lot less real estate and be a lot more functional. Now after we're done with our search form, we're going to move on to a more complicated, longer form, that has multiple sections.

You can see we have two sections in the form, Personal Info and Sessions. We've got a submit or register button down here below the form. And again, you'll notice that inside each section, and we have some definite layout needs for example, we have our labels to the left of the input fields that they represent. We have our check boxes forming columns, three columns when possible, two columns when not. And we have a text area field that needs to be flexible as well. You'll note that as we begin re-sizing this form, the content changes in relation to how much screen real estate it has.

So for example, our check boxes here go from three columns to two columns, based upon the amount of screen real estate. The two column layout for our check boxes goes down to one column when we run out of space. And you'll notice that our labels over here, if we get even shorter, break to where they're on top of the form elements instead of beside it. And as I continue to shrink down, at a certain point, the two column layout of the form is no longer maintainable so it switches to a single column with both sections stacked on top of each other.

As it does that, notice that the interior layout changes as well so we're back to multiple columns of our check boxes. But as we get further and further down, that changes as well. Again, our labels will break on top of the text inputs once we no longer have room. And then the entire layout adjusts its smaller sizes to fit the entire screen. Now the really cool thing about both of these layouts in terms of being responsive, is that in addition to using Flexbox, we're not going to use any media queries at all for our layout.

We'll have a media query in both of our layouts to handle some of the basic styling issues, but in terms of the responsiveness of the forms, media queries are going to have nothing to do with that. Flexbox is going to take care of all of that for us. So in fact, there's nothing really here that we couldn't do without using traditional layout methods along with media queries. The key, however, is how easy this is going to be to do with Flexbox, and how little we rely on media queries to make it all work.