[MUSIC] Mobile devices come in various shapes and sizes. So you have screens ranging from 3 inches all the way to 10 or 12 inches in size. So if you design a mobile application targeting a small screen device, then the same views will look horrendous when rendered on a large screen device. So this is where we will take advantage of the support that is available in ionic to enable our content to automatically adapt to the screen real estate that is available on a specific device. So the same content when rendered on a small device can occupy the entire screen, but on larger devices, the content can be placed in a way that the screen real estate is better utilized. So this is where we will look at two different approaches that ionic supports. The use of the ionic split pane, and the use of the ionic grid for designing our ionic application views for different screen sizes. To illustrate those further, let's take a look at our application in a browser. So here, I am using the responsive view that is supported in Chrome to show you the same application at different screen sizes. So this is the view of the application, specifically, the home page when it is rendered on a Galaxy S5 screen. And this looks perfectly suited for the small screen size for a Galaxy S5. The same thing in landscape mode still looks pretty reasonable, but when you resort to a much larger screen, like an iPad, or a large Samsung tablet. Then this view, if it is rendered exactly the same way, will obviously look distorted and occupies too much of the screen real estate for conveying too little of the content. Instead, how about if we can redesign the screen real estate so that on an iPad, for example, especially in the portrait mode, the view can be rendered like this? The fact that we have much larger screen real estate means that you can easily bring in the navigation that you were having in that sidebar directly onto the screen. So that you don't have to every time keep swiping to get access to the navigation. In addition, you can also make use of this screen real estate much better by rendering the content side by side like this, which is a much better view of the content than what we had in our smaller screen sizes. Similarly, the menu, which was rendered as a single card in the smaller screen, can now be rendered like this on a larger screen, with the menu items placed side by side to better utilize the screen width that is available for us. Now, it is the same application and with the same code base. But we involve additional features from ionic such that the screen will automatically adapt itself, based upon which particular device the application is being run on. So to summarize, the Ionic application, when used on devices with different screen sizes, should automatically adapt, especially when you have larger screen real estate available for us. So this is where we need to optimize the use of extra space that becomes available on large screen sizes. Now, with their design, especially in the Bootstrap course, and also the Angular course, we have looked at responsive design. And we have seen how, with responsive design, you can automatically let the content adapt to the screen. And that is where the use of the grid enable us to design our views, such that they will automatically adapt to different screen sizes. Now, similar concept that we will use in Ionic. With Ionic, we have two different ways of achieving the same thing. One is the use of a split pane. With a split pane, that side menu that you had in your Ionic application earlier, which you had to bring on by swiping the screen, can now be put right onto the screen to occupy some part of that screen width. And can be automatically resort to hiding on smaller screen sizes and still support the old way of doing navigation with the swiping of the screen. That second approach that we will look at is the Ionic grid. Now, in the exercises that follow this lesson, we'll look at both the split pane and the use of the Ionic grid for re-designing of an application. A glimpse of which we have already seen just a little bit earlier in this lecture. So how does the Ionic split pane work? With the Ionic split pane, it supports multi-view layouts, especially on larger screens. So the multi-view layout in this particular case, we are going to be using part of the screen real estate to render the side menu directly onto the screen. And the remaining part of the screen real estate to render the actual content. So thereby, navigation becomes more easier, because you have all the navigation elements already on your screen, and don't require to do the swiping gesture on the screen to reveal that navigation, the side menu. So here, the use of the ion-split-pane will enable views to automatically adapt the view for different screen sizes. So for large screen sizes, the side menu automatically becomes available on the view and fixed onto the view as you saw in the example earlier. Now, this is where we will surround the content in our application using the ion-split-pane element. So the ion-split-pane element will enclose the content. Not only that, when you use the ion-split-pane in your view, as an example, in our exercise, we will surround the content and the app.html. The root components view in ion-split-pane. Now, when we do that, one of the elements, the ion nav element that is in the Android.html will be assigned an additional attribute called main. When you assign the main attribute to the ion element, that part of the screen real estate will be declared as the main view. And thereby, the other part, which will be the ion menu that we have in the app.html, will be treated as the side menu and will be hidden on small screen sizes. So the default behavior that you've already seen will be resorted to on small screen sizes. But for larger screen sizes, the sidemenu will be fixed onto that view. How does the ion-split-pane decide when it should show the side menu on the screen, and when it should use the hiding behavior of the side menu? This is where we can divide the screen sizes into five different classes here. xs for extra small, sm for small, md for medium, lg for large, and xl for extra large screen sizes. Now, how do we define these screen sizes? So any screen work that is below the small size will be declared as an extra small. The small screen size arche at the minimum width of 576 pixels all the way up to 767 pixels, and the medium obviously starts with 768 up to 992 and so on, for the large and extra large screen types. So when you use the ion-split-pane, you can declare additional attribute called when, which you can assign to one of these. Say, for example, if you say when is equal to large, as shown in this example, that means that the split-pane behavior will come into existence only for large and extra-large screen sizes. So, for extra-small, small, and medium screen sizes, the default behavior of hiding the side menu will persist, but for larger and extra large screen sizes, their split-being behavior will come into action. And lastingly, this classification of the screen sizes will also be applicable when we use the ionic grid. So it is important for you to note this screen grids, you can also customize this as what we call as the break points for these different screen widths by changing some variables within your ionic code like you have. But in this course, we will stick with the default behavior that is automatically configured in ionic. The second part of the adaptation to larger screen comes from the ionic support for the grid, if you have taken the Bootstrap course earlier or even the Angular course, we have seen the use of the grid. Specifically the Bootstrap, we have seen how in Bootstrap that content will be divided into rows, columns and each row containing 12 columns. And then, you declare your content to occupy a certain subset of those columns. So, when you look at the Ionic Grid you will notice that the Ionic Grid is also designed to be responsive, mobile first and fluid just like the way the Bootstrap Grid is designed. And in fact, the Ionic Grid is inspired by the Bootstrap grid and so if you have taking the Bootstrap course, you would have already learned the ionic grid. And so, what I will explain next will be like a deja vu for you, because I will use exactly the same examples that I used with the Bootstrap Grid, but now using the ionic way of specifying the same behavior. So let's go in and look at some of the details of how we're going apply the Ionic Grid within our ionic application. The ionic grid itself leverages the CSS Flexbox Layout. And as we have seen with the Bootstrap Grid, also the CSS Flexbox Layout essentially, comes with a lot of interesting support, which can be leveraged very well for rendering contents to be responsive. So this is where the CSS Flexbox can easily handle dynamic and unknown size of content containers, and also, it provides a direction-agnostic layout of the content. We have dealt with these concepts in the Bootstrap course earlier, so why does Ionic use the CSS Flexbox Layout? Exactly for the same reason why Bootstrap uses CSS Flexbox Layout, it provides for easy vertical alignment of the content within a parent container, as you will see in the examples that will follow. And also, it allows you to easily reorder the content on different screen resolutions. So on one particular screen resolution, the content can be rendered one way. And in a different resolution, you can reorder the content, so the content will be displayed in a different way to adapt to different screen sizes. And also it provides an easy way of doing CSS only columns of equal height for your great grid based layout as we will see in example that follows, so how does the ionic grid work? It starts off with a container for that content, which will be declared inside an ion-grid element. Now in Bootstrap, you saw the use of the container class to apply it to a div. This is the ion way of doing things, so you have a container class defined by the Ion Grid. Inside the Ion Grid, you will sub-divide the content into rows each row will be specified inside an ion row element. So the ion element will contain the content that will be laid out in a specific row in your view. A great component can contain multiple- Ion-row element within the grid. Now, within the ion-row itself, the content is now divided into 12 columns, so once you specify an ion-row element, then whatever the content is inside there can now be laid out in such a way that this row will span 12 columns. And so, you can decide how many part, how many of the columns you're content will actually occupy. Once you get these 12 columns then you can do the layout using these columns, now you may ask, why 12? 12 because 12 is a multiple of two, three, and four, and so it provides a lot of flexibility in the way you do the layout of the content. If you don't like the number 12 you can always change it in the ionic configuration to a different number, but 12 is very convenient and, so I will retain that value of 12 cards for each row in this course, so to summarize, each row in ionic is divided into 12 columns. And the content itself, you can enclose inside an ion col element, and to the ion col element you can add additional elements to specify how many columns of the rule will be occupied by this particular context. So you can use col-*, col-sm-*, and md-*, as you see, if you use column hyphen star, that applies for all screen sizes. Col-sm-*, means for small up to extra large, and col-md-* for medium up to extra large and so on, for defining the layouts for the various screen sizes. So this will specify how many columns within a row this piece of content will occupy within our view. Examining this further, looking at the Ionic Grid we have already seen how the ion-grid and the ion-row enable us to divide each row into 12 columns. Now you can lay out your content by putting the content inside an ion column, and then you can then apply attributes like this. So here, in this example, I am applying column SM5, so which means that for screen sizes from small to extra large, this piece of content will occupy five columns in electronic columns for extra small screen sizes, this content will occupy the entire width of the screen. So similarly, now that we have occupied five columns we still have seven more columns left. We can then layout additional content surrounded inside another ion col, in this example for simplicity I've just I used yet another element, ionical element, for which I applied col-sm-7, now if you don't specify the column hyphen. Attributes, then you can do auto-layout of columns. So if you simply specify ion-column and surround the content, then in that case, say for example, you three ion-columns inside an ion-row, then each of them will get, by default, an equal share of the entire width of the content. So you see, in this case, since we have three pieces of content, each of them will get 12 divided by 3, which is 4 columns of the width of the screen, in this case. Now you can also explicitly specify direct for a specific piece of content, then in that case, the four of the remaining content. For example, you'll see on the left and the right side. And simply specify it using ion-col. In that case, they will inherit the remaining piece of the screen real estate that is left over after the middle piece of content is laid out. So since the middle piece of content is occupying six columns, then we have six more columns left. So the left and right piece will each get three columns for laying out their content. And you can now see various permutations and combinations that you can easily use by applying various combinations of these column-attributes for your ion-col limits. If you want to do vertical alignment of that content, you can apply to a row an attribute called as align-items-center. So in this case, whatever content that you lay out will be centered vertically within that particular row there. So in this case, as you can see, depending on the height of each of the content, they're always aligned vertically in this case. you can also apply the align self center to a specific ion-col element, if you want only that ion-col element to be centered in that row and the remaining ones being rendered just like the normal way. The default is to align everything to the top of the row. Similarly, you can align content horizontally by using justify-content-center as an attribute to the ion-row here. So in this case, then your content which will be rendered like this, will be justified horizontally. Now, notice the use of the col-auto for the middle one which means that this particular piece of content will occupy just enough columns to be able to render that content, so it will automatically decide how much of the columns that it wants to occupy. So in this case it decides that, it needs only four columns of the entire row. And so you are left over with the remaining eight columns. But the remaining two ion-cols have explicitly said that they only need three columns. So that's why they're occupying three columns. But note that the entire content is now centered horizontally within the row there. Not only that, sometimes you may want to offset the column from the left edge of the screen. So this is where the use of offset with a column number associated with it, say, for example, in this case offset-1, meaning that this content will be offset to the right by one column. And the remaining content would be laid out like that. So if your view is benefiting from off setting the content, then this is something that would be useful for your layout of the content. In addition, there are many more attributes that are available. Now the details are in the ion-grid API, a link to which I have provided in the resources. But this will get you started with using the Ionic grid within your Ionic application. In the exercise that follows, we will use this ion-grid with the ion-row and the ion-column limits in order to design the screen layout for various screen sizes for our Ionic application. [MUSIC]
