Responsive Web Page Layouts Using Bootstrap in Indigo Studio

INTRO:

Hi everyone, it’s Ali. In this video, we’re going to introduce you to some of the great new responsive features found in the latest release of Indigo Studio. Let’s take a look!

Body:

When you pick the browser viewport you will see a couple of new options. One is to start with a Mobile First Approach or you can pick a responsive layout which is more traditional desktop or tablet. So let's just do Mobile First.
You should be seeing a Bootstrap container which has been added to the design canvas. This is because Indigo Studio uses Bootstrap to do the responsive stuff. So in addition to the Bootstrap container, you would see a secondary drop-down. The secondary drop-down actually has the four breakpoints available via Bootstrap. One is for the phone, tablet, desktop and large desktop. You would see that by default we have added something called a row, which is the same as Bootstrap row. And inside the row there are three cells. The row actually has to have at least one cell.

So the Bootstrap container uses a twelve column structure for doing layout. In this case, the cell already has a span of twelve columns. If I adjust it from the right side, you can see that we are adjusting the column span. If I have it at six for the first cell, I select the second cell and also adjust it to six, you will see there is just enough space for the second cell to stack alongside. You can edit a cell by double-clicking or by dragging and dropping something into the cell. And add some content in here, let's add a title. I'm just doing alt-click and searching for a title. You will also notice that elements which are added into the cell also have the concept of column span. So they're not adjusted via pixels but the horizontal width is in multiples of column sizes. So if I want to shrink the size of this title as I am resizing this edge you will see that I'm also adjusting the column span. So while in this edit mode, I can edit the second cell by just single selecting, or I can exit out of here and just try dragging and dropping. Let's crop this image, get it on to the design surface, and from here I'm just going to drag and drop and as I'm hovering on top of the cell, I get this invitation to hold-space. I can hold-space and as you see that the image also gets resized directly.

Now a cell can contain more than one UIL. Let's edit the second cell. The height of the cell is kind of determined by it's contents. As you add more content to the cell, it will resize accordingly. In this case, let's add another title. As you see that it automatically went right below the image and that's typical of the web fashion, where things don't overlap. If there's not enough room, the text will just stack. So, in this cell, we have more than one element. The other thing to notice is that the elements by themselves have a default bottom margin. That's how you'd like to space out elements inside the cell. And that's more web friendly to begin with. Let's exit out of this edit mode.

Quickly duplicate this cell because that's pretty much the layout I would like. So I can use the duplicate function here. For the second block, I can just space select for the special select behavior and I can pick a new image. If I would like to space out this content block, you can just select the last element inside that cell and give it more of a bottom margin. Let's give it a bottom margin of thirty. So you have your basic phone layout done.

Now you would like to create a tablet layout. That's where this Responsive views picker comes in handy. I just select that. There are shortcuts available to quickly switch between the viewports. So I go to the tablet layout. So this tablet layout, what I would like, is these two cells to basically stack side by side, and have this featured article alone spanning the entire width. For that, I can just select that cell and adjust its width to be only six columns wide, same thing for this one. If I want the buttons to actually not be that wide, I can just select the buttons here and give them a span of, say, four. In typical Bootstrap fashion, the customizations you're making for a form factor, say tablet, is actually done on top of the phone form factor. If you look at the Property Editor, we have this section called Responsive Options for Tablet. All of the properties you see in here, they're originally inherited from the phone form factor. But any changes you make for the tablet form factor are actually preserved.

Just to make a little bit more clearer, let's create a desktop layout that is slightly different than a tablet layout. Again, responsive views picker, pick desktop, and in this layout, what I would really like is for this image and text to be side by side. So for that I can just select the image and just adjust its width to say, "OK, you need to have a column span of seven." And for the rest I can give it a column span of five, because that's the amount of space remaining in the twelve column layout. OK, fine. To space out elements from the image I can just select the image and give it a margin on the right side. The changes I'm making here are again, changes on top of the tablet and they're unique for this particular desktop.

In order to see how this actually works responsively, just hit Run Screen. As I resize my viewport, you can see the responsive thing kicking in. Once it hits the tablet view it actually switches to the tablet layout. If I keep shrinking it, it will switch to the phone layout.

Closing:

And there you go. Everything you need to know about the new responsive web page layout capabilities in Indigo Studio, using Bootstrap. For more videos like this, be sure to subscribe to our YouTube channel – thanks for watching!