In this video, we're going to be building a responsive dashboard using Bubble, with left side navigation and top header navigation for mobile. We'll add dynamic data to tables and talk about strategies to make sure the dashboard looks great on both desktop and mobile.
​

Bubble editor: https://bubble.io/page?id=bubble-surf...

Page: https://bubble-surface-course.bubblea...

Resources: https://e08fe517a40cde7fb3e416a79bd50...

Welcome to part two of the design course! Now we're going to shift our attention to building application UI, specifically an admin dashboard. All applications need an admin dashboard, and dashboards form a large part of most applications. So let's have a look at the demo app and go through what we're building.

So the current width we're looking at is 1440 px. We can see that it fills most of the screen real estate. But I have to go one size larger to 2560 px. You can see that the design is still in the center, okay? It's not left-aligned, it's not right-aligned, but it's in the center. More realistically, the latest Apple Pro Mac is I think 1600 px or around about there, so that's what it would look like.

We have a fixed Floating Group on the left-hand side where a user can navigate to different views, and we're building this on a single page. So you can click through to the "Users," "Analytics," but we're just going to be building this "Home" section because what you learn from this "Home" section, you can apply to different views.

Now I mentioned that this is fixed on the left-hand side. It's also fixed top to bottom, meaning that if we scroll on the page, this doesn't scroll - it stays, or it persists, to its current location. The same goes for the navbar across the top.

Now I've actually specifically designed this dashboard so that it can be mobile-responsive, but this is up to you to decide if you want a mobile-responsive admin dashboard or user dashboard. Most dashboards lend themselves to a much sort of more crowded UI, more data, tables - things that don't look that good on mobile. And for instance, if you take Stripe payments as an example, they have a desktop app that I keep pinned in my browser on a day-to-day basis, I have a look, but then also when I'm out, they have an app, the Stripe app, which is far more simpler and it's redesigned for mobile. I did actually want to go through the exercise of making this mobile-responsive, just so you can see my thought process and my design choices to enable that this also looks good on mobile.

Okay, so let's bring this down to 1024 px. You can see that the left-hand navigation bar has dropped away. If we bring it down to mobile sizes, it looks slightly different: everything is stacked top to bottom. I've removed the email addresses from these users just because there actually isn't enough space.

If you wanted to see email addresses, what I would do is have these rows clickable to show a Popup or another screen where you can see more information. But the main point here is that you don't want to overcrowd your designs, you just want the most important bits of data available on mobile. To bring the Floating Group navigation back, we'll click on this icon here, that'll bring it back. Then we'll change our view.

Now you'll notice again that I've specifically chosen to not have any color in this dashboard: everything is black, grey, and white, but you could have accent color. For instance, your brand color could be when this button state is selected and maybe on the iconography as well. But, in terms of dashboards, you don't want to make them too distracting; you just want the most important information to be easily viewable and accessible. Then down in the bottom left-hand corner, you've got your own account and the little "More info" button here where you could build out further menus if you'd like.

So the first thing we're going to do is just focus on layout. Let me reiterate: beautiful UI design is really about layout spacing and sizing. If you get that right then you're more than halfway there.

So we're going to add two Floating Groups: one on the left and one across the top. Then we're going going to have a Container in the center that is scrollable and we're going to divide this Container into its respective parts.

Okay! Let's go ahead and create a new page. You can call it "dashboard". Go ahead and create that. Double-clicking to bring up the Property Editor. Going to call this "Dashboard | Surface" as the Page title. And on the Layout tab I'm going to make this a column and 1200 px width. You can leave the default height to whatever it is set to currently.

Now for the left-hand navigation Floating Group, let's head over to the Containers section, find our Floating Group, and just drop it on the page for now. Let's rename this to "FloatingGroup navigation." I tend to leave the name of the Container there so I know what it is; if I just type "navigation", it wouldn't be obvious if it's a Group or Floating Group, and they have different properties.

This will be fixed width, so it doesn't matter what the width of the screen is or the browser. It needs to be, let's say 280 px or perhaps 240 px. This isn't an exact science, this is just a creative choice. I'm going to uncheck "Fit height to content" so it spans the full height of the page.

On the Appearance tab, what I'd like to do is add a new background color. This is currently set to "Surface". Let's head over to the Styles tab and to "Style variables". So we've got basically two whites here, we've got one called "Primary contrast: and then we've got another one called "Background." I want to adapt this Background color to be a light grey: let's make it #F7F7F7.

Okay, so let's actually set the background on the dashboard to this new background color, which means means now we can make this Floating Group white. And let's add a border on the right-hand side. So I've checked "Define each border independently." I'm going to find "Border style - right," set it to "Solid," and then I'm going to select my border color to be "Grey light."

Fantastic, let's preview the page! I've removed the debugger bar, you can do the same, and here we go! Nice and neat.

Let's now add a Floating Group header across the top. So let's grab another Floating Group in the Containers section, drop it on the page, going to rename this to "FloatingGroup header." Going to change the color to white, and in fact, we can just edit the style as well to be white for future purposes.

Okay I want this to be a fixed height, so I'm going to go across to the fixed height and choose 80 pixels (just a creative choice), and then I'm going to uncheck "Make this element fixed-width" because it'll never be fixed width. And then remove the min width as well.

Now you can see some overlap happening here, okay? Some overlap. We'll get to that in a second. I just want to add a bottom border to this "FloatingGroup header," so on the Appearance tab, scrolling down, finding "Define each border independently." Going to choose a border style of "Solid" for the bottom and change it to our Grey light. Okay, now we can clearly see the overlap happening.

So what we need to do is this. I actually want my "FloatingGroup header" to start over here, okay? And the way to achieve that is to simply just add some left margin! The left margin needs to be the same width as the "FloatingGroup header," which is currently 240 px. So head over to the Layout tab on "FloatingGroup header" and let's add 240 px left margin. Nice and neat.

Okay, now let's talk about the actual content area. I'm going to go back to the demo app and I'm going to head over to the Design tab. Let's have a look at the anatomy, first of all. Going to close this all down in the Elements Tree.

Okay, so at page level we have a "Group container," okay? This is it over here: "Group container". And let's have a look at the margin on this because much like we added 240 px of margin on the "FloatingGroup header", we're going to do the same for this "Group container". So this is the most parent group on the page itself. Remember: we don't design on the page ever! We always have to put down Groups which act as containers that contain our UI.

So it has a top margin of 80 px, so it starts beneath this Floating Group and a left margin of 240 px so it starts to the right-hand side of the Floating Group. If we didn't do that then the content would sit underneath, because these are Floating Groups, so these have a z-axis of more than zero, okay? So they're above the content. That's why we need this margin.

And then we have just have some neat padding of 64 px at the top, then left, right, and bottom padding of 32 px. And you can see that the content at the top here, the "Group card revenue" starts at the same y-axis as the "admin" text here, okay? Just keeping everything nice and neat.

So that would be the "Group container". And regardless of whether we're clicking on "Home", "Users," "Analytics," "Group container" is going to remain on the page. But then we have another group inside, and that would be the "Group Home". So these are the ones that are collapsed when hidden, and these are the ones that we would show if we click on these navigation links! So if I click on "Group tab user," then I would hide "Group Home" and I'd show "Group User". And we'll talk through the best strategy for this.

Then within "Group Home," I have a Group up here, some Group columns, and then I have some Group tables down here. Now inside "Group Home," I have some row gap, but inside these Group columns I have some nice and even column and row gap spacing as well.

So let's grab a Group from the Containers section, just drop it on the page, and let's go to the Layout tab and uncheck "Fit width to content" and then uncheck "Fit height to content" as well. Now let's just make sure we can see what we're doing, so let's go to the Appearance tab and let's change the "Background style" to "Flat color," let's choose maybe a blue color, you know what we're going to do here: just change this to 10% so we can see what we're doing.

Let's rename this to "Group container". Topmost Group, and now let's add our margins on the Layout tab so it sits to the right of "FloatingGroup navigation" and underneath the "FloatingGroup header." So margin left 240 px, margin top 80 px.

Now remember that we have padding inside this Group as well, some global padding. So 64 px at the top, 32 px, 32 px, 32 px, 4-point system. These could have been 48 px at the top, 24 px - it doesn't matter. This is just my system that works quite nicely.

And this is always going to be viewable, okay? We'll change this back to transparent in a second, but now let's grab another Group and drop it inside "Group container". Let's rename this to "Group home" and this will be collapsed and hidden on page load, and we will select when we want to view it.

So let's do the same: let's just add a flat color, let's grab this color here then apply it to "Group home". If you can't see "Group home," you can always find it in the Elements Tree. Let me bring this down, there it is there. And I'll add this flat color just because we're doing some nesting here, and I don't always do this, okay? I don't do this at all, but when I'm teaching, it's much easier to show you how nested groups respond, because the what we're actually going to do is make this desktop responsive before we do the actual design!

Okay, once you've done that, over on the Layout tab we can uncheck "Fit width to content" so it spans edge to edge, and we can uncheck "Fit height to content" so it heads down to the bottom. We will come back and actually change this setting once we have some UI in here, but for now this is fine.

Okay, so we had those four cards across the top, so the first thing we're going to do is grab another Group because now we are organizing. We are organizing the structure of the page. So I'm going to grab another Group element, drop it in. I'm going to call this "Group cards," and I'm going to do the same thing: I'm going to head to flat color, paste in that blue color, change this to 10% opacity. This will be edge to edge, and let's make the "Min height" about 200 px for now. This will obviously change when the cards are in here.

Then beneath that we had some tables. So I'm going to save myself some time just by duplicating this content and changing this name to "Group tables." And for Group tables, I'm going to uncheck "Fit height to content" and just let that fill the rest of the space.

Now I don't want these Groups touching each other: I want some gap spacing, so I'm going to apply the gap spacing on "Group home". For this you'll need to head to the Elements Tree, find "Group home" (because it's sitting behind these Group cards) then apply some gap spacing of 20 px. So we can see things starting to take shape now.

Let's preview the page. Okay, excellent! Now what we want to make sure is that we do have a centered column for this "Group home", okay? Again, if someone's on a large desktop, you don't really want to fill the entire desktop. You want your content to be slightly centered so it's easier to navigate, easier to use, and it's a more predictable layout for you as well. If you didn't have a max width, if you didn't have the column in the center, then your designs might look a little bit messy and not what you'd expect. And that would be out of your control. Let's take back control and set a max width.

So we can set a max width actually on the Group container, the parent Group container. Now this could be 992 px, wouldn't really go less than that. Could be 1200 px, could even be 1400 px depending on what you're building. That's up to you. We're going to split the difference and just do a 1200 max width.

Let's preview and see what happened. Okay, so it's pulling to the left now, that's fine, let's change that. I'm going to go to horizontal alignment on "Group container," set that in the center. Let's preview. All right, nice and neat.

I'm going to show you the demo app because there's something I want to point out in terms of making the cards responsive that are going to go into this Group. Okay so we've got four cards, all right? So I'm going to bring this down and notice that now instead of four cards we have two on the top and two on the bottom. Now this is because I'm grouping the cards. If we look at "Total Revenue" and "Subscriptions," let me bring this back, "Total Revenue" and "Subscriptions," so I'm keeping them in a Group and then I'm keeping the "Sales" and "Churns" in their own Group as well.

I'm doing this because if I didn't, what would happen is we would have three cards across the top and then "Churns" would be across the bottom, which I don't want. I want a nice, even layout. And then when we get down to a smaller page width, then we have single columns. Back to two, back to four.

So now we need to grab another Group, drop it inside "Group cards". This will just be called "Group column," going to let that span edge to edge and then I'm going to duplicate it in a second. So just let it span edge to edge first of all by unchecking "Fit width to content" and I want you to click back on "Group cards" because this needs to now be a Row layout. Once you've done that, let's go to the Appearance tab and let's do the same thing again. Let's just apply some blue with 10% opacity.

Okay, on Group column's Layout tab, I'm going to choose vertical alignment and let it vertically stretch. Now I'm just going to duplicate "Group column" and it's going to put another column next to it because its parent, "Group cards," is set to a Row layout. There it is there, next to it. You can just remove the "(copy)" from the name and there we go.

And then inside these Groups, we would have our cards! Okay, those four cards would have two in here and then two in here which means these need to be a Row layout. So Row layout on "Group column" (left) and then on the right we have a Row layout as well. And I'm going to set some gap spacing on the "Group cards" just to push these two groups apart slightly. So on "Group cards" we have a column and row gap spacing of 20 px. You obviously can't see anything yet because it's currently in a Row layout that will switch to a Column layout naturally.

Okay, one more preview and then we'll get started by adding some detail! All right, looking really good! Floating Group at the top, this scrolls independently of the side moving which is fixed into position, and this is the layout that we're after.

Okay and I think what I'd like to do, folks, is I would like to just push on with responsive design. I think it's actually easier to demonstrate when we're just looking at colored blocks on the screen, so let's see how far we can get to spend the next 10 minutes making this mobile-responsive.

Okay so if I navigate to the responsive tab now and I click 1200 px, we can see our design doesn't do anything. 992 px, if we did have our cards in here, they'd be very, very squishy. So we actually want a breakpoint at 1200 px. At 1200 px, what I want to happen is I want this left-hand Floating Group to actually disappear altogether. And then I want this "Group container" to fill the remaining space. So in fact, at 1200 px or below 1200 px, this "Group container" will be the full width of the page and we'll remove this left-hand margin, okay?

So let's do this. On "FloatingGroup navigation", let's head over to the Conditional tab. Let's define a condition that says when "Current page width is < Desktop (1200 px)", we're going to click "This element is visible" and then we're going to remove the checkmark, okay? So now if I bring this handle down, currently it's at 1200 px, if I bring the handle down, that disappears.

It's a Floating Group so what we also need to do is on "Group container" we need to apply the same condition. So I'm going to save myself some time by right-clicking on "FloatingGroup navigation" and clicking "Copy special" --> "Copy conditional expressions." And then on "Group container," "Paste special" --> "Paste conditional expressions."

Now instead of hiding "Group container" - we always need that visible - we're going to find the "Left margin" from the dropdown of "Select a property to change when true" and then I'm going to remove that margin (set it equal to zero). Okay, so if we bring the responsive handle down a bit, we can see that now it spans all the way to the sides.

But I want the same same thing to happen, I want the behavior to be consistent also with this "FloatingGroup header". So you should have your copied conditional expressions from this "FloatingGroup navigation," which means we can now just "Paste special" --> "Paste conditional expressions." And instead of making the element invisible, we're simply going to remove the left margin! So now it spans edge to edge. Nice and neat.

Let's preview the page as well! So go ahead and right-click and "Inspect" if you're using a Chrome or Chromium browser. I've just undocked my developer tools, and I'm going to choose 1024 px, and there you go. Now there is more work to be done here, obviously. We've got two cards here, two cards here, we've got tables that need to stack - for that, we do actually need those elements designed so we'll continue with responsive a little bit later on.

Okay so time to have some fun! Let's start designing our "FloatingGroup navigation" on the left, and then we'll do our nav across the top, and things will start to take shape.

Let's review the demo app! So let's have a look at the anatomy of this. We've got our "FloatingGroup navigation". Perfect. It looks like we have a Group at the top with some left and right padding, and that's where our icon is going to be. (You can find the icon in the Resources link above.)

Then we have a "Group navlinks" and then it looks like we have two more Groups inside and there is a bottom border dividing them neatly. And then across the bottom, we have a "Group account" section.

Now on this "FloatingGroup navigation," our Container layout is actually, on the very right-hand side we have a "Space between" much like when we have row "Space between", which you'll find up here. We can also have Column "Space between." If I just collapse these Groups in the Elements Tree, here is our "FloatingGroup navigation". So we do have a Group holding all of this stuff at the top and then our "Group account" at the bottom, and to push those apart we use "Space between."

Let's get building! Okay, why don't we just go ahead and remove all of the color from these Groups? We can always see the structure in our "Layers" section in the Elements Tree.

Okay, let's grab an Image element, drop that in. Go ahead and upload the image from the Resources folder above. All right, over in the Layout tab let's make this 40 px width and then keep aspect ratio fixed. Okay, fantastic! Let's rename this to "Image icon." Now I'm going to right-click on "Image icon", "Group elements in" a, well doesn't matter, could be Row or Column. Let's just set this to Row. That's "Group icon".

Now I want to make this the same height as the "FloatingGroup header", which is 80 pixels tall. So "Group icon", I'm going to set a fixed height of 80 px. I'm going to uncheck "Fit width to content" and then I'm going to set 24 px of Padding to the Left and Right. Then the last thing I want to do is I'm going to click on "Image icon" and then vertically align in the center, which you can find on the Layout tab.

Now we need our Home navlink so I'm just going to grab some Text first of all, drop it in. Going to type "Home". Then I'm going to find myself an Icon element, drop it in. Search for "home" under the Phosphor icon library, maybe "house". Find yourself an icon and on the Layout tab, let's make this icon 20 px by 20 px, and on the Text, let's actually drop this size down slightly to 14 px.

Now I am going to be overriding quite a lot of styles here and there's something I want you to understand about the styles. So styles create consistency across your app. So we have your H1 to H6, body large, medium, small - that creates consistency. What else does it do? Well, there are also H tags associated with these particular styles, that is basically so Google or other search engines can understand some of your content and the importance of your content. Now, for the marketing page that matters a lot in terms of the H tags. Google cannot log into your dashboard, okay? So H tags are actually irrelevant behind a login, so in this particular instance. But, style consistency is very important.

For the sake of this course, I'm going to be adapting some of the styles slightly because dashboard UI or application UI is a little bit different to sort of marketing UI. Marketing tends to be louder, bolder, larger buttons, larger inputs, which is great, rounded buttons - but in a dashboard, I'd most likely use more squarer or rectangular buttons, slightly smaller text, just so I can fit a little bit more and I can get a bit more flexibility out of some of these elements.

So we are going to be overriding some of the styles. Now, you could go ahead and detach the style, you could design it. So actually the font color is going to be our dark grey and on this icon it's also going to be a dark grey to begin with. And then you could save this as a new style! So this could be called "Dash body". So for any body text in the dashboard, we'll use that particular style.

Now let's highlight both the icon and the text - by the way, these labels exist because in my View dropdown in the context menu, I have "Show element labels" enabled. Because we're going to be micro adjusting a lot in this dashboard, I'm actually going to remove "Show element labels."

Now I'm going to "Group elements in" --> a "Row container" because they need to be next to each other. And I'm going to rename this to "Group tab home". Going to detach the style, we're going to create a new style shortly, but for now I'm going to make the roundness 8 pixels, the background style is going to be a flat color and the color of this Group will be white to begin with (we're going to conditionally change that once it's clicked). On the Layout tab I'm going to choose edge to edge by unchecking "Fit width to content". No min width but I am going to set a fixed height here because the height will never change. It's always going to be 44 pixels in height, that's a creative choice.

Let's add some Left and Right Padding - Top and Bottom Padding doesn't matter because we've got a fixed height. Let's add 12 px and 12 px. Okay, let's arrange this content nice and neatly. So on "Text Home" I'm going to click "Next" and then I'm going to vertically align in the center. Then on the Icon I'm going to vertically align in the center. And now we need a bit of space between these two elements so if we click back on "Group tab home", we can then apply some column gap spacing of 12 px.

Let's just have a look at some of the styling here. So we have this dark grey, which is quite dark. I need an unselected state to begin with so let's go into this "Dash body" style and just change the font color to this Grey medium to begin with. Let's do the same to the icon.

So our other tabs we had in this particular top section was "Users" and "Analytics," so I'm going to duplicate once and then duplicate again. Let's go to the second one, let's change the name to to "Group tab users", change the text to "Users," and change the icon to a user! (Choosing the fifth one along in the Phosphor icon library.)

Okay, the one below that is "Analytics". We all need analytics in our app. If we don't have analytics, we don't actually know what's going on! Change the text to "Analytics" and let's find a chart element here. So let's say, let's choose the first one. Things are looking good.

Now, I don't want these - we can call them buttons, really - I don't want these touching sort of the edge of my Floating Group so I'm going to highlight all three (please do the same), right-click, "Group elements in" --> a "Column container." We can just call this "Group navlinks" and then on the Layout tab I want that to span edge to edge. And then what I'm going to do is scroll down to "Padding" and I'm going to choose 12 px and 12 px for Left and Right padding. These numbers aren't just randomly thought up; if we look at the Left Padding you have 24 pixels. Well, this icon will also be 24 pixels because we have 12 px Padding Left and Right inside this "Group tab home". Then we have 12 pixels on "Group navlinks", which means that when this has a background color it's nice and neat, it's not touching the edges. Again: a creative choice. You could have it touching the edges if you want it to!

So with that done, we need another one, okay? So I'm just going to duplicate "Group navlinks", create another one. You can keep the naming convention the same. And in here, I'm after "Sales", "Transactions," and "Churn." So let's say "Sales" for the first one, change the text to "Sales." And then maybe this icon can be... maybe like a credit card. That works.

Next one can be "Transactions," basically the same thing. Doesn't matter, we're just designing. And for this icon, maybe some money of some sort, maybe this little wavy icon down here back on the Phosphor regular library. And I'm choosing this "Money-wavy" icon.

And then the last one I mentioned was churn. Churn is a very important measure in a SaaS business: basically, how many people have unsubscribed in the month? And for that we need a find a chart element but a negative chart element, so maybe this one over here. So 1, 2, 3, 4, 5 across - the icon is called "Chart-line-down". Okay, looking really, really good!

Let's just sort out some of the spacing here. So first of all, head over to your Elements Tree and let's just collapse a few things just so we can see the structure here. So we have the "Group icon," "Group navlinks," and "Group navlinks". Okay, let's put all of these in their own Group as well. Right-click, "Group elements in" --> a "Column container," call this "Group top container". Then on the Layout tab, uncheck "Fit width to content".

Now I'm going to apply some... let me think here. Let's apply some row gap spacing of 64 px, okay? Because we have... what is the spacing here actually? Yeah we have 64 px so you can see that it's going to start on the same x-axis. But these two are too far away so let me add... on "Group navlinks" on the top "Group navlinks," go ahead and add some bottom padding of 24 px and then let's add a line underneath. So let's check "Define each border independently" in the Layout tab on the top "Group navlinks". That exposes the ability to add a bottom border of our Grey light color.

Now we need to bring this back slightly. So to do that, let's take these two Group navlinks and put them in their own parent container of a column. We can just call this "Group navlinks" as well, and on the Layout tab, uncheck "Fit width to content". And now to create some even spacing, I'm going to add some Top Padding of 24 px. There you go! Nice, even spacing.

Now we did have just some little text up here, so let's grab a Text element, drop it inside "Group navlinks". Let me show you actually a neater way to do this. So in the Elements Tree, just expose the "Group navlinks" so we see these two sort of nested navlinks. Then grab some Text and just drag it in. There you go. Pressing all caps, going to type in "ADMIN," and let's make this 10 pixels in height, or in size. Let's change it to 500 (Medium) so we can actually see it. Maybe let's add some letter spacing of 1, and now I want it to start where this icon is, and this icon is 24 pixels from the left and this is 12 pixels from the left. Okay so to do that, head over to the Layout tab. We just need to add some Left margin of 24 px and then that lines up neatly top to bottom. And then I just want some margin beneath it as well, so maybe 12 px beneath it.

So let's do the same. Let's say copy and then I'm going to close this "Group navlink," go to the next one, and then I'm going to paste. And see where it puts it at the bottom? Now I can just use my keyboard to bring it to the top. And let's call this "Sales." Very nice!

Now we need our little section at the bottom. Now don't forget we want to now change the "FloatingGroup navigation" on the Layout tab to "Space between". And we can do that because we created this topmost container, so now if we put in another element on this "FloatingGroup navigation", it will be automatically be pushed to the bottom. So I'm going to grab an Image and watch - should go to the bottom. Well let's make it 48 pixels and there we go. Aspect ratio 1:1 on the Appearance tab. I want to make this at least 24 px roundness so it's a perfect circle, and you can go ahead and upload your own image or you can upload my image if you want to see me in your dashboard as well. Okay, there I am, so that would be the Current User basically and we can name this element as "Image user".

Now I'm going to grab some text, drop it in as well. You can type your own name here, you can type my name, up to you. But I'm going to make that a bit smaller. Like I mentioned, I need slightly smaller text in a dashboard. And then I'm going to use 500 (Medium).

Now we've got "Space between". We've got "Space between" and this is in the center because the way "Space between" works is it applies even spacing between the elements. To have a top to bottom design, we can only have two elements, so we need to group these together. And we're going to group these together in a Row container. There we go.

This is "Group user" and on the Layout tab, remove "Fit width to content" and let's put the image on the left-hand side and let's put the Name text in the center. And then in "Group user", let's add some Padding! So first of all let's add some Top Padding of maybe 40 px for the top, and then Bottom Padding let's try 20 px. And then Left and Right padding of 24 px and 24 px - actually we can do 12 px and 12 px. Yeah, we can do 12 px and 12 px, that's fine.

And I want a bit of a divider here, so let me just think here... I'm actually going to choose to do something slightly different here. All right, let's just make this even, so Top Padding of 20 px. Then on the Appearance tab I want a line at the top, so I'm going to expose the independent borders through "Define each border independently" and then I'm going to choose a solid border on the top.

Okay, now we need a bit of gap spacing because the elements are touching. Let's choose 12 px on the column. And maybe add my email address here as well. I'm going to duplicate that content. Let me type in an email address (a pretend one) and I'm going to make this font color a dark grey. Now on the Layout tab, please go ahead and remove "Fit width to content" on the text and then do the same on the Name text as well.

I want these two pieces of text in a column layout, so highlight both of them, right-click, "Group elements in" --> a "Column container." Then we can remove "Fit width to content" on that as well. Let's now push the name to the top, and you can see that the email is quite long, okay? It's not quite fitting, so let's talk through some options here.

First of all, we can change this to slightly less size, 12 pixels. And this is where it does become a bit of a design choice. We can't really fit in and I don't really want to go beneath 12 pixels because it's hard to read. So I'm going to change the size of this "Image user," bring this down to 40 px. Okay, still a bit cramped. 36 px, 32 px, what else can we do here? Maybe we can reduce the column gap spacing to 8 px, and there we go.

So you've basically seen that this is just a creative choice I've made. I've gone for quite a long email address example but when I'm collecting email addresses, you know I get to see what they are, some of them are really long. In fact, much longer than this. So we could maybe truncate the email address or we could just choose not to show an email address. We don't want to force the design. We want it to be natural, so if the email address naturally feels awkward or doesn't fit, just remove it. It doesn't work. And let's talk through how we would be able to see someone's email address in this instance.

Okay, so this just works. I'm going to take this image and put it in the center vertically. I'm going to make this email address a bit shorter, but the other option that we could have done here is add an icon. Maybe add an icon inside the Group that's holding the text. Let me type the word "more" (all the icon libraries have different names for these things), "vert"? Vert, that works. Add these three dots here, the icon is called "Dots-three-vertical". Let's change this to 24 px x 24 px.

Now I want you to group the name and the dots together. Going to put those in a Row layout, and you you will recognize this type of design! Then remove the "Fit width to content." And you will see these dots all the time. Use your keypad to push to the right hand-side and then we'll talk through what to do here in a second.

But, you would have seen these dots. So when you're designing, think about how the dashboards that you currently use in your day-to-day life, think about how they solve some of these design challenges. So these three dots usually means that there is a menu or there are more options. And that's how we would do it. Then we would have maybe a Group Focus or a Popup to show more about the logged-in user or whatever the situation is that you're designing for.

Let me put that in the center. Does that do much? Now we can remove the min height. It's currently called "Group Q" - I don't like that. Let's say call it "Group name" there instead. And also we had a random "Group P" here, let's just change that to "Group text".

All right, what about across the top? Let's first preview the demo app. So it looks like we have just a little bit of text here with a searchbox on the right-hand side. Okay so we have a Row layout with "Space between," pushing these two items to the other side.

Grab a Text element and naturally this would be dynamic text, okay? Actually, what did it say? Okay, now let's just apply maybe a Heading 2 here, that looks a bit big- Heading 3, that looks good. On the Layout tab, we can even remove "Fit width to content". You don't have to, but that's fine.

Now "FloatingGroup header" is currently set to Column. We don't want that, we want it set to Row. And on FloatingGroup header I also want 32 pixels of Left and Right Padding. It's a fixed height so we don't need Top and Bottom Padding. Now I can go ahead and put this vertically in the center.

And then let's find a Searchbox Input element. Just get that inside. Maybe click left on your keyboard. We can call this "SearchBox". This could say "Search." Let's edit the parent container slightly, so Poppins 400, yeah, this all looks fine. Placeholder text font color should actually be this dark grey or grey medium. Roundness should be 8 px and borders should be our border color which is grey light. Just remove the hover condition; I don't think we need a hover condition. On the Layout tab we're going to add a bit more Left and Right Padding of 16 px and 16 px.

Okay, so currently it's a fixed width of 250 px - let's just bring this down to 240 px and put this vertically in the center. I think that's all we really need to do. Look at that! Maybe bring this height down to 44 px just so it's the same height as these - trust me, users do notice these little changes. I prefer things to be nice and consistent.

This text feels quite marketing-ish. Let's maybe try that and then also just override the style and choose Semi-Bold. Okay, time to preview. So this is where we left off. Let's go to 1440 px. Excellent, the page is looking really, really good.

Okay, I want to set up the workflow here so we're going to use what are called page parameters. We're going to set a parameter of "home" and then we're going to use that parameter to show and hide the relevant Groups here.

So, let's add a workflow. And we're just simply going to go to "Navigation" --> "Go to page" for the first action. Going to go to the same page because we not actually going to a page, we just want to send more parameters. Going to add a parameter. This could be named anything I like, this will show up in the URL bar at the top. I'm going to say "v" = "home". Lowercase, just so it's easier to remember. It is case-sensitive. That's all I'm going to do here, okay? So that will then set a parameter at the top. Now we can use that parameter to change the design.

So on the Conditional tab of "Group tab home," let's say that when "Get v from page URL is home" ("home" is all lowercase on my keyboard). Instead of hitting enter, I'm just going to click outside the box (sometimes when you hit enter it chooses an option from the dropdown which we don't want). Then we're going to type "color" for "Select a property to change when true" and we're going to change this to our background color of #F7F7F7.

I'm going to do the same - I'm going to copy this expression. I'm going to click on "Text Home," paste that in. Change the color of this font. let's change it from gray medium to grey dark. I also want to change the weight to emphasize that it is currently selected. Let's do the same again. Now in the icon, we want a darker icon: when "Get v from page URL is home," icon color, make that darker.

Okay, so we've got a dark icon, dark Text Home, and a light grey background. We can actually go ahead and test this now. Click on "Home," and you can look in your URL bar. Mine is currently hidden, but you can look in your own URL bar and you'll see at the end it will say "?v=home".

Let's just set up one for "Users". Although we're not setting up the view, I just want to show you the distinction. So if we click on "Group tab users," add the workflow, for the action click on "Navigation" --> "Go to page." Go to the same page, send more parameters, "v" now equals "users".

I'm not going to set up the rest of the design here because you know what will happen, you know, the styling will change. But if we preview the page, the page is refreshed and this is still highlighted. And this is the distinction between Custom States and Page Parameters. Could you have used a State here to basically set the state of a value and then reference that value to do the same thing? Yeah, sure. But with page parameters, it persists. So if the page is refreshed (not that your users are refreshing your page all the time) but maybe you push an update and they need to refresh the page, well it will remain in its location. The other thing I like about page parameters is it means that users can click the back and forward button in their browser and it will follow the navigation that they've gone through or the navigational journey that they've gone through.

So if I click on "Users" it would have changed the style of "Users." If I click back on "Home," we can see that we have used the Conditional tab to change the style of "Home".

Let's now turn our attention to the four cards along the top. What we'll do is design the first card, get that nice and neat, and then all we have to do is just copy and paste for the rest. So let's design this card: Total Revenue. Let's have a look. So Group card revenue, we have a flat color, we have a border, eight pixels in the roundness, and on the Layout tab we have 24 pixels of even Padding all the way around.

Inside, we have a Group across the top that is in a row layout with "Space between" that's holding "Text Total Revenue" and an icon. Then we have a Group beneath that and that is the just some sort of dummy text for now, obviously that would be dynamic. And then some more information beneath that. So that card is obviously in a Column layout with 12 pixels of row gap spacing.

So let's just look at our Elements Tree and just collapse a few things - just collapse everything right down so we can have a look at this again. So we've got our "Group container," then we've got "Group home," then we've got our "Group cards". So we want our new Group in this "Group column" over here.

So let's grab a Group, let's get it inside "Group column", let's call this "Group card." I'm going to detach the style because we're going to create a new one. Let's set a flat color on the background of Primary contrast, add a border style with our Grey light, and eight pixels on the roundness.

On the Layout tab I don't really know the width. Let's just set a width for now just so we have some design space of 240 px. And the height I also don't know, so maybe 140 px. And then let's set 24 pixels of Padding.

Okay now that we've done that, let's set a style here of "Card". And naturally, in my own work, I will have styles called "Card small", "Card medium," "Card large". The larger the design, the more padding I would have. The smaller the design, the less padding. And my padding sizes tend to be 8 px, 16 px, 24 px, and 32 px. Those four sizes. I never really go above or beneath those sizes.

Okay, now for the content! Let's quickly review. So "Total Revenue", just going to copy this number, I like that number. So let's grab some Text, type "Total Revenue," and let's make this 500 (Medium). And again, you could set up a style here if you want to.

Let's find an icon, looking for a chart element. Maybe that one there will do as well. Let's make this 20 px x 20 px. Now these two items I've highlighted both of them so I can put them in a Row layout, and I can remove "Fit width to content." And I can choose "Space between." Going to rename that to "Group title."

So in terms of renaming groups, I tend to just think logically what a Group does, but I tend to keep my naming pretty consistent. If I can't think of a name of something I don't sit there thinking, "what can I name this?" because I can see everything neatly in the Elements Tree! So a lot of the time I will just name something "Group row" or "Group container" because that might be the layout function that's really useful to me. I'm naming this "Group title," I can blatantly see it needs to be a row layout, but I could have also named it "Group row."

What I don't like to do is leave groups unnamed: "Group QVCI3v" - terrible example, but because to me that, for my own process, is telling me that I might have forgotten to actually style that Group or set out the correct layout, or remove the min or max width. I change the title just to signal to myself that I've done some work here.

On the Layout tab, let's remove the min height. Now we need some Text beneath that, let's get it inside. I'm just going to paste in that big number from earlier: $24,059.94. For that, I'm just going to pick one of these headings, maybe a Heading 4 looks quite good. But Semi-Bold because I don't like using Bold in my designs.

Okay, and then we need some more text beneath that. And I'm just reminding myself what I said here, okay? So this is just a little statistic which is quite nice. I'm going to paste that in. Because it's less important, obviously it's smaller, and I'm also going to change it to a "Dash Body" style. There we go, now we've reused one of the styles, which is great.

So in terms of the spacing we discussed that the "Group card" needed to be a Column, which it is, we know that already, but that we need some row gap spacing. Let's try 12 px. Fantastic. And then these two need to be in their own group. Right-click, "Group elements in" --> a "Column container." We can name that "Group stats" and then remove "Fit width to content". Really, really liking that!

Now, we need another card inside "Group column" here, right? We need we need two in here, so "Group column" is currently set to a Row, so if we duplicate "Group card" it'll sit next to it. But now we do need to adapt the the min width. So I'm going to remove the min width first of all, that's step one. So now "Fit width to content" is checked, which I want, and it's hugging the content. For now, I'm going to actually remove "Fit width to content" because I want it to naturally fill the available space in here.

So with that highlighted, I'm going to choose on my Mac command+D for duplicate. You can also go command+C, command+V. Let's rename this one to "Group card sales" and the one on the left I'm just going to rename to "Group card revenue".

Okay, let's design this and then we'll talk about the spacing. So this is going to say "Total sales" and below this will be a number, so add in four digits. But, we've got a lots of space over here to play with and then maybe we can say, "+21% from last month". But you can see that the the width is hugging the content, so this card visually feels like it's shorter, or not as wide, as this card here. So let's highlight both of them, head over to the Layout tab and then remove "Fit width to content." And now it's going to utilize all available space in this "Group column". That's exactly what we wanted. I want some gap spacing so I'm going to choose 20 px on the Column.

Now in terms of the height, I'm going to, on the Layout tab of the left "Group column", going to change the vertical alignment to the top and not the stretch, because the stretch was stretching its parent Group's height, and we want it to instead reference the child Group's height.

Then on "Group cards" I'm going to remove the min height because it's currently the minimum 200 px, which is too tall. So if I remove the min height, it's going to fit height to content, where content is the Groups within.

So what else do we need here? Okay so that was actually "Subscriptions", that's fine. We'll do "Subscriptions" in the next one. So we're going to do "Subscriptions" and "Churn". So I'm going to take both of these Groups, copy, and then I'm going to highlight "Group column" on the right and paste.

First one can be called "Group card subscriptions". Change the icon to a credit card here, rather, and maybe on the sales icon maybe we can make this a money sign, though it doesn't matter. And let's say "Subscriptions" for the text and let's say that we had an added... going to use a "+" here, "+912". Let's change the stat, let's change it to a single digit. Let's say "+8% from last month", okay? I'm adding a plus here because in subscriptions because they actually can go down if you had more churns, more unsubscribes than subscribes. Then this one will say "Churn" and that's going to be the chart element. This one here say "-25" and I'm going to leave that stat where it is.

All right, folks, it's looking really, really good! Now let's head over to the Responsive tab. So we're currently at 992 px. Things look great. At 768 px, we've got a bit of a problem here. So let's say this. Let's go back to 992 px where things look good and let's say beneath 992 px that we want to change this: instead of four columns across the row, we want two columns on top and two beneath. To achieve that what we need to do is this particular technique.

So on "Group column" I'm going to go to the Conditional tab. Say When "Current page width < Tablet (992 px)". And now I'm going to use the min width technique by first selecting "Min width" from the "Select a property to change when true" dropdown. I'm going to change pixels to percents, going to choose 100%. Going to copy that expression, and in fact, I'm going to right-click "Copy conditional expressions" and then I'm going to go to the "Group column" on the right-hand side and then "Paste conditional expressions."

Now if I bring this down slightly, you can see it's forcing this to be 100% on its own row. Same with this, so they're dropping beneath each other. That's exactly what we want.

Okay, so let's start again. So we've got 1200 px, looking good. 992 px, fine. 768 px, okay great. What about 375 px? Oops, it's a bit squishy again. So we need to employ a similar technique. So what we did in this particular Group, we need to put them on the individual cards as well. And we're going to do that at a 576 px breakpoint.

So on "Group card revenue" at the 576 px breakpoint, go to the Conditional tab and add a condition: when "Current page width < Custom (576 px)", I also want min width at 100%. And I want this on all four of these cards. So I'm going to right-click on the "Group card revenue", "Copy conditional expressions" and then just paste on each one here. So "Past special" --> "Paste conditional expressions" on the "Group card sales", the "Group card subscriptions", right-click "Paste conditional expressions" on the "Group card churn", "Paste conditional expressions."

Okay look what happens now. You can see we have a row gap problem here, so on the "Group column" I'm going to go to the Layout tab, I'm going to make sure we have 20 pixels there on the row gap, and then on the column beneath, 20 pixels as well.

Okay, let's have a look at our tables now. So we have two column layouts, table on the left, table on the right. The designs look absolutely identical. Let's have a look at the anatomy quickly. So it's definitely a Group card, that's fine, some row gap, but more importantly, we have a Table which is conducting a Search for Users. So we're going to need some data in the database here. We have the sticky row that's 40 pixels and then row number 1 is 72 pixels. Two columns: User and the Time that they signed up.

Let's build the "Group users" first. So let's just neaten everything up. Collapse everything in your "Group container", "Group cards". Okay, here we go: "Group tables". So, let's start again. Let's go to the UI Builder and let's go grab a Group, drop that in, and I'm just going to change this Style to "Card." Change the name to "Group users". And we need some space to work within, so I'm going to uncheck "Fit width to content". What is the width of this group? Just so we can design, I'm going to set that to 380 px max width, just so we have some space. Then I'm going to uncheck "Fit height to content" so that it fills all available space of its parent.

Let's grab some Text, drop that inside. Going to type "Users," and let's have a look at our Heading 5 for that. So Heading 5, and then I'm going to change the weight to 600. Now I'm going to grab this text here, copy it, and then paste it inside: "Here are the latest signed up users".

These two for proximity purposes need to be in their own column container. Rename this to "Group header" (so you can see a bit of a pattern to my naming now). On the Layout tab let's uncheck "Fit width to content" and then let's just add some gap spacing of 4 px.

Okay, let's move on to our Table elements. Now, before we do that, tables need data: they need Option Set data or they need database data. Now, if you are on a paid plan or you have taken out a trial, you can upload the CSV for users that's in the link above and then you can import the users. If you're on a Free plan, and I'm actually on a Free plan so I need to do this, you're just going to have to upload some users.

So jump into your Data tab and then "Data types" and let's add a new field to our User data type: let's add "name" that is of type text, and let's add an "avatar" field for the user's profile image. Of course, that is of type "image".

Okay, now on the "App data" sub-tab, I'm going to upload these one by one. It's only going to take me about 60 seconds to do so. I'm going to click "New entry," first I'm going to upload the avatar. You can head into the Resources folder (linked in this article above), look for "Images", and the first one we'll choose is Jasmine Jones. So you can just match the person's name to their avatar file name. Then for the email just do [email protected] and just follow that pattern for the rest of them.

Now if you chose the route of using the CSV file uploader, I'm guessing you know how to do that, so I'm going to let you get on with that and then I'm just going to manually upload these user records. Make sure that you upload the User record table first because you actually need to reference that User table when it comes to uploading the Transactions, okay? All right, let's do the rest. I'm going to just fast forward this.

So once you've done that, let's go ahead and create our "Transaction" data type. "Transaction" singular, go ahead and create. And what we need for this is to reference a User, so who is is making the transaction? This field will be called "user" and is a User data type, and then we need an "amount" field that is just going to be a number, okay? Going to choose lowercase as a naming convention for all of my fields (not super, super important).

So you can see that on the User data type we have "Privacy rules applied". I'm going to click on that. And at the moment, only a User can see their own data, which means if we try to load our Table, nothing will show. Now for the example of this course which is a design course, I'm going to enable a few more fields here. So in the "Everyone else (Default permissions)" section, let's enable the "avatar", "name", and "email."

Naturally, we would never show the email to Everyone else! That's, you know, one of the most important pieces of data that we can collect from a User, so because this is just a design course, we are just trying to render some table views, this is why I'm doing this. But naturally, we would protect the email, okay?

And then to show these three fields in a Repeating Group we need to check "Find this in searches".

So in the App data sub-tab, let's go to "All Transactions" and let's just create six quick Transactions. You can also upload the CSV here, you will need to match the User input with this User data type on the CSV upload, but I'm going to manually create this. I'll do the first one with you and then I'll fast forward. So I'm going to find a User, let's think of someone's name, maybe Jasmine Jones? There we go, and then just add an amount, so anything from say 10 dollars to 1,000 dollars, so I'm just going to say 50 here.

Okay, so now we have six Transactions and we have six Users and we can see this represented by the six entries. Now we can populate our tables in the frontend with these entries!

Let's head over to the dashboard page and let's look at Users first. Let's grab a Table element, click once, and then drop it inside "Group users". So the "Type of content" is, of course, "User" and we're just going to Do a Search for all Users as the Data source. Let's sort by Creation Date, doesn't really matter but I always like to add a sorting option. So the table direction is vertical, of course, and let's quickly review the design from the demo app.

Okay so we have horizontal separators but not vertical separators- just horizontal. So for the Style of Vertical Separators on the Appearance tab of "Table User", I'm going to choose "None". For Horizontal Separators, I'm going to choose my border color for consistency purposes. On the Layout tab, I'm going to remove "Fit width to content" so it fills the available space. I'm going to remove the min width, and we're going to come back to the min height. We need some height to work with in here.

Now we only need two columns, so let's delete Column C so we just have A and B. Then click on on the first row: Row 0. And on Row 0, on the Layout tab, I want you to make this a fixed height of 40 pixels. On the Appearance tab, I want to make this row sticky so that when we scroll, this header column remains fixed in position and we can see what it is.

Okay, now I want you to highlight Column A and Column B in the first first row. I want you to go to the Layout tab and I want you to add 20 pixels of Left and Right Padding. And now we're going to go to the Row 1 (Repeating), which is the repeating row; much like a Repeating Group, we only design in this first cell. And let's make the height - this is also going to be fixed - let's make it 72 pixels, just a creative choice (part of my design system, the 4-point system). Then for the Row count, we're not going to have fixed, so we're going to uncheck "Set fixed number of repeating rows", because if we choose fixed number of rows, it's only going to show the first three, four, five, whatever we determine. But I want like an infinite scroll, and the way to do that is to uncheck "Set fixed number of repeating rows", but then do fix the height of the element itself. So the element will be fixed but we'll be able to scroll within the element.

Let's head over to the Layout tab again. We can see we've got 72 pixels of fixed height, and this is now rendering one, two, three rows, and I want about six rows to be visible. So I'm going to go to the Layout tab on "Table User". Now, we're almost at 300 px for min height, so let's try 600 px. How many rows does that get us? (We're going to sort out this overlap problem in a second.) That gives us about seven rows, so what about 560 px or so? Still I can see about seven rows.

Right, first of all, click back on "Group container" please and I want you to select "Fit height to content". Then click on "Group home", we also need to check "Fit height to content". Then click on "Group tables" and check "Fit height to content", then click on "Group users" and check "Fit height to content." And there we go, so "Fit height to content" checked on all the parent Groups: "Group tables", "Group users," "Group home," and "Group container", all "Fit height to content."

Now, we didn't start with "Fit height to content" checked because there's nothing inside- "Fit height to content" means that we want the container to fit height to the content within. If there's nothing in it, it just collapses. That's why we didn't have "Fit height to content" checked initially - we do that afterwards.

Let's go back to our "Table User". Let's try and get a clean six rows in here. We going to set it to 480 px for the min height, and it looks pretty good! 480 px looks pretty good.

Okay now in Column A and Column B, and in the first Repeating Group Row, I want you to click "shift" and highlight both of them. And let's add 20 pixels of Left and Right padding inside. We don't add Top and Bottom Padding here because it is a fixed height, it doesn't matter.

Okay now let's review the design. So we've got an avatar on the left, then we've got the name, email address, and then the time that they signed up. So let's grab some text, type "User" in here and make this 14 pixels and a little bit bolder, so Medium (500). On the Layout tab, I'm going to center this vertically. Great! Going to copy and then paste inside column B. I'm going to type "Time," but I want this on the right-hand side, so Row 0, Column B on the Layout tab, I'm just going to align to the right-hand side ("Cell 0B").

Now the name needs more space, right? We had a lot more information in there, we have an email address which needs a lot more span width. So I'm going to apply fixed width on Column B. So I'm going to click on Column B and I'm going to apply fixed width here, let's try 80 px to begin with, maybe a bit more space because we have padding in there, maybe 120 px. Okay, great!

So let's grab an Image element and place it inside Row 1. In the "Dynamic image", this is going to be the "Current row's User's avatar," and let's set a roundness. So I want this image to probably be about 40 pixels, but let's just set a roundness of 40 px in case we want to increase it. On the Layout tab, the width is 40 px, and I'm going to check "Keep element aspect ratio fixed". Then I'm going to vertically align in the center.

Now I want a placeholder image in here so I can actually see what it looks like, so I'm going to go ahead and upload Jasmine Jones's image. Now I'm going to grab this text here, "Text User," and I'm going to copy and paste it inside Row 1. And let's dynamically insert the data from the "Current row's User's name" in the Appearance tab. So that something renders nicely, I'm going to type in a canvas placeholder of "Jasmine Jones."

Next we need the email address. Just going to command+D to duplicate the text that's showing Jasmine Jones's name. Don't worry about where it is now, we're going to sort out the design shortly. Then I'm going to change "Current row's User's name" to "Current row's User's email" and then I'm going to type out her long email address in the "Canvas placeholder." Okay, I want this font color to be slightly lighter, so I'm going to choose "Grey medium" and let's change the font weight to 400 (Regular).

Okay now let's highlight the name and the email address, right-click, "Group elements in" --> a "Column container". Going to go to the Layout tab and remove the min height. I'm also going to change this name to "Group text".

Now we need this to be a row distribution, Co column A, row 1; ah, this set to a Row and this is I think because we got "Fit width to content" checked. Okay, so in "Group text," head back to the Layout tab and remove "Fit width to content". And then inside the cell, we also want some gap spacing, so let's try 8 px of column gap spacing.

Okay, now for the Time, copy the text that currently displays "Jasmine Jones," copy, and then paste into Row 1 of Column B. This will say "Current row's User's Creation Date:formatted as 10:28 am" and we're going to format it as the time. We're getting a preview over here, so 10:28 a.m. that's the time for me currently. I'm going to just type that in here as a canvas placeholder, and on the Layout tab I actually want this on the right-hand side so I'm going to click in Row 1 Column B and just right-align it like that.

Now click back on "Group users." I want to add some gap spacing between the Table and the header. Let's try 20 px of row gap spacing - looking good, maybe a little bit less, let's try 16 px.

And just looking at this, so if I click back onto "Group tables," just so I can, you know, remove the Editor view here, I actually want - we've got these faint lines or dividers, I actually want "Time" to start on the very right-hand side, "User" on the very left-hand side. Same with the content so that everything is neatly lined up.

So what we'll do is this. Click on Column A, Row 0 and Row 1, and just remove the Left Padding, set that to zero. Then do the same on Column B, Row 0 and Row 1 - ah, looks like we can't do it, we have to do it individually. Okay, so Row 0 Column B, I'm going to remove the Right Padding and I'm going to do the same for Row 1 Column B: remove the Right Padding. That just lines up a lot more neatly.

Okay, I'm happy with that! So we're done on that part. Now we have a a max width of 380 px. This needs to be dynamic, right? But let's first get in our Table next to it. So I've highlighted "Group users". I'm just going to collapse everything down so I can see it neatly. There's "Group users" there. I'm just going to command+D to duplicate, and let's put it beneath. So before I do anything else I'm going to rename this to "Group transactions."

And then "Group tables" needs to be in a Row format or Row layout. And let's add some gap spacing on "Group tables" on the Layout tab of 20 px for the column and the row because when it comes down to mobile, these two are going to stack. All right, and now we have this empty space here, so this is where we can dynamically set the width. So highlighting both of them, remove the max width.

I can see now that we're in this particular dynamically-set width that we've got too much available space for the "Time" column here. So I'm going to click back on Column B, I'm going to change this fixed width back to 100 px. I'm going to do the same in this right-hand column here, set the fixed width to 100 px. That allows the email to render a little bit better. You could even make the email address down to 12 px in size if you want to; let's have a look at that. 12 px, yeah let's do 12 px. Lots of space then.

Okay, so these are exactly the same. Why don't we change this first Table's title to say "Transactions" instead of "Users" and write beneath it, "Here are the latest transactions." And we can keep that Row 0 title as "User". Let's just remove this image in Row 1 here, delete that. And then let's change "Time" to "Amount" for this one. Now let's change the name of this "Table User" to "Table Transaction" and then Search for Transactions in the data source.

So we can actually keep the "Group text" in Row 1's "Type of content" as "User". Check this out: so we can say User and then we can say "Current row's Transaction's user" in the data source. So that stays the same. And then in the "Amount" column, we just need to change this to "Current row's Transaction's amount:formatted as $1,028", and you can format this as you like. Here we chose currency (it needs to be a currency), USD, with two decimal places. And then let's just make sure that we have a placeholder. I'm going to do $900.00 just so I can see what it looks like. So "User", "Amount", "User", "Time".

Then I think in the design we had a button on the right-hand side here, so I'm going to click on the Button element, drop that in. Going to type "View all" as the label.

...

Let's just break this down. So this Group on the left-hand side lets call it "Group transactions". We've got this "Group header," then we've got the Button, and then we've got the Table. The Table has the User and the Amount. To the right of it, I've just renamed this back to "Group users". (Earlier on I named it "Group transactions" by mistake.) In there, we have our "Group header" and then we have our "Table User". Okay, up to speed.

I want to put this Button on the right-hand side next to "Group header," so to do that, I'm going to highlight the "View all" button and the header and right-click, "Group elements in" --> a "Row container". This is the new "Group header" now. On the Layout tab, I'm going to remove the "Fit width to content".

Now let's design this Button. So let's add an icon and label. In the icon search, let's look for an arrow. Maybe an angular arrow would make sense here like that. And I'm going to change the roundness of this button just so it's 8 px (I don't like rounded buttons in dashboards).

On the Layout tab of "Button View all", I'm going to move the arrow to the right-hand side and I'm just going to reduce the Left and Right Padding a touch - square buttons or rectangular buttons need left less Left and Right Padding. Looks really good! Maybe the height can come down to 40 px.

Okay, hopefully you got through that, and remember that you have access to my Editor to look at exactly how I've set this up for this particular build. Go ahead jump into my Editor and have a look!

Once we've done that, let's preview the app! Okay, we're just missing an email address for the User, but this looks pretty good. We've got a bit of extra white space here that we need to deal with, but I'm pretty happy with this. I also want to have a max width around these two elements.

Let's just go back and add the email address in here. So what was the problem here? Click on the "Jasmine Jones" Text element in Transactions Table and change it to "Parent group's User's name" and then beneath that change it to "Parent group's User's email." That's all we needed to do because we have the User data type in this "Group text".

Okay, then up here what I'd like to do is, so we have our "FloatingGroup header," and then we have the two pieces of text inside. I want to add a container element or Group around both of these, so highlight both of them, right-click, "Group elements in" --> a "Row container". Just rename this to "Group container" and then remove "Fit width to content" but do set a max width of 1200 px. What we also need to do is set the container alignment on "FloatingGroup header" to be in the center as well.

Let's preview. Okay, now we've got a bit more width here because we are missing our Left and Right Padding, would actually make more sense in the container. So let's do the following. Just in this new container we've just created, let's add 32 pixels of Left and Right Padding. Let's preview, and there you go. Nice and neatly aligned.

Okay let's have a look at mobile now, so I'm going to Inspect this page and let's go down to 1280 px. Things are looking good, obviously we need to be able to get our navigation back, we'll deal with that shortly. 768 px, these tables aren't looking good. We need to sort out these tables, so lots to sort out here.

So let's have a look. We have a condition on "Group card revenue". Go ahead and click that for me, please: when the "Current page width < Custom (576 px)". Okay, so currently, what is the width of one of these? 438 px. So at 438 px, it actually still looks quite good, so we can use this 576 px breakpoint. So actually, let's just right-click on

"Group card revenue," "Copy special" --> "Copy conditional expressions" and then click on "Group transactions," right-click, "Paste special, "Paste conditional expressions."

Let's do the same for the "Group users": right-click, "Paste special" --> "Paste conditional expressions." Now what we will need to do is in "Group tables" just make sure that we have this row gap of 20 px, okay? Just so when it breaks and stacks on top of each other, these two groups, that there is some space.

Ah, I see what I've done here - okay, we need to actually break these earlier. Let's go back to "Group transactions" and let's rather choose the 992 px breakpoint here, and let's do the same here on "Group users", change it to 992 px in the Conditional tab. All right, let's try that!

So my "Time" is missing here, I need to look into that. Looks like it's missing altogether, but anyway, let's go down to 1024 px, let's bring this down to 992 px, yeah. Looking good, which means that at 375 px (ignore this text of the the top) we've still got some work to do on 375 px. But this all fits nicely, but we can create some more space.

Let's continue refining for mobile! Just going to go to the Responsive tab and have a look at this top bar here. So 992 px, but it's at 1200 px that this navigation falls away. In fact, it's at 1200 px that we need to be able to bring this navigation back, because if I go one pixel beneath, then I've actually lost all of my navigation. So what I'd rather have at 1200 px is a different view; I'd rather have the logo on the left and then a way to open the drawer on the left.

Let's double-click this element "Group container". Let's add a condition when "Current page width < Desktop (1200 px)", that's when the sidebar disappears, and we also want this to go as well. And then on the Layout tab, just make sure that we have checked "Collapse when hidden."

Okay, let's go back to the UI Builder and talk about what what needs to happen at that particular stage. Let's make a copy of this "Image icon." Just going to command+C on my Mac and I'm going drop it inside the "FloatingGroup header". It's okay being on the right-hand side, totally fine. Let's now grab an Icon element and just put it to the right of the logo. Then let's look for the "Text-align-left" icon here, so this icon will be pressed to invoke the side drawer to come out. Let's just put that in the center as well.

Now we need to group these two because we need to conditionally show these two elements. I'm going to right-click, "Group elements in" --> a "Row container". Let's call this "Group mobile header". I'm just going to add a bit of gap spacing so I can see what I'm working with here. Just add in 20 px of column gap spacing and then uncheck "Fit width to content" because it needs to fit width of whatever content is available on whichever device a user is using. Lastly, in "Group mobile header" we need the "Space between" container alignment.

On page load, it's invisible. It's collapsed when hidden as well. When do we bring it back? Well, we bring it back on this condition here. So if this condition says - let's copy it - when the "Current page width < Desktop (1200 px)" hide it, well, then we say that it's the same expression, but that's when it is visible because it's hidden by default.

Okay, let's try it! So let's just go down to our 768 px breakpoint and there we go. Go back up again. Perfect, looking good. If we scroll down, Transactions are looking good. I do need to address this "Time" here, that we'll get to in a second. But why don't we sort out the workflow to click this Icon, bring back the Floating Group? Let's do that first.

So I'm going to click on the Icon we've just added here, I'm going to add a workflow. Now we're going to animate this so it feels a bit more like an app by using the "Animate an element" action. Okay, what element are will be animating? It's the "FloatingGroup navigation" and now this is quite important: I want you to type "nobounce" for the Animation because this gives a really nice animation. So click on "Transition NoBounceLeftIn" and we're going to halve this duration, so let's make this around 300 ms, actually maybe 400 ms.

Okay, let's try to run this workflow and let's just go down to mobile size here which will be used the most. Okay, if we click it, there it's coming in. If we click it again, it sort of wants to run this workflow again. So now we need the opposite, we need to be able to close it and this icon needs to change. We also need to be able to click on "Home" and close it as well.

So back on the workflow, let's say Only when "FloatingGroup navigation isn't visible," that's when we're going to be animating it to open it. Now I want you to copy and paste this particular workflow, and on the second one I want you to say Only when "FloatingGroup navigation isn't visible," when it is visible, and then instead of animating to open it, we're going to find "Transition NoBounceLeftOut" with a duration of 400 ms.

So the other thing we need to do is just give some feedback on the design. On this icon, head over to the conditional statement. Let's change it to an "x" icon when the Floating Group is visible. So, When "FloatingGroup navigation is visible" then I want the icon to be an "x". And that solves that problem.

Now, we also want a User to be able to click on these particular navlinks to change the view, of course. So I'll show you how to do "Home" and then you can work on the other ones in your own time.

So let's edit the workflow for "Group tab home". So currently, what does this workflow do? It changes the URL parameters. Fantastic. Let's add another step here. So a "Go to page" action always needs to be the last step, so let's add one first that animates the closure from a mobile phone. So click the "Animate an element" action and choose the "FloatingGroup navigation" as the Element. We want the animation to be "Transition NoBounceLeftOut," but only when we're on mobile, okay? So Only when "Current page width < Desktop (1200 px)." And this needs to actually be 1200 px because that's when this UI appears. So this step will only conditionally run when the page width size is less than 1200 px.

Let's try it! So it opens, changes to an "x", we click the "x" again, it closes. Opens again, click on "Home," then it closes. So we'll do the same thing for "Users" and for the rest (instead it would navigate to "v=users" in the parameter).

Okay now I just want to conditionally change some of the padding as well, and that's the last thing we'll need to do in this video. All right, we can actually create a bit more space, we can regain 16 pixels on the left and 16 pixels on the right. Let's head back to the Design tab and let's have a look at the "Group container".

So at the moment, this "Group container" on the Layout tab has 32 pixels of Left and Right Padding, 64 px Top Padding and 32 px Bottom Padding. Let's adjust some of this and I really only want to do this below 576 px, okay? So let's copy this first expression and paste it below and then adapt this to 576 px. And then let's bring up all of the paddings: Top, Bottom, Left, and Right. (Okay, so some of this reorganized itself, so the Bottom padding is now the first one.)

So 32 px on the Bottom padding is fine. Let's change the Top padding to 32 px and then Left and Right padding of 16 pixels and 16 pixels because we want to maximize the real estate on the mobile phone. We don't have a lot of screen space to work with. We did this in the previous part for the marketing page, we'll do the same for the dashboard.

Now that I've done that, let's preview the page at 375 px and voila! This looks a lot better, less space here but very nice and even on the left-hand side, and the Table elements we can see nicely. It's also possible to set up a scroll animation. For this we need a min width value which we're not going to cover on this course, but you can actually set this up so that the Group stays the same width just as it does now and you can scroll in these individual cells.

Let's just sort out the "Time" and then we're finished with this video lesson. So what's the problem? So if I click on "Users", "Current row's User's Creation Date" and this is because of Privacy Rules. So if I head back to the Data tab and then the Privacy sub-tab and I click on User, we just need to check/enable the Creation Date.

Now don't forget to come back, if you are building an app, come back and remove this stuff, okay? The public should not be able to see other people's data unless it's, for instance, a social media app, which then would set up more advanced Privacy Rules to be able to show a person's name, their avatar, their posts, that kind of thing. But just remember that user data is very, very important, and most of the time it's private, okay?

Let's give this one more check. Okay, we've got our "Time" back. 375 px breakpoint, we can navigate, there we go, bit of space here, that works. One more tweak I'm going to do is on the User Table I'm just going to change this email address down to 12 pixels.

Now if you want to continue on from here, what I would do is just set up some dashboard styles, okay? So I've overridden the Body style here. I would set this to like, maybe "Dash Title" and then we could have a "Dash Email" or "Dash Body Small", but because I'll be using these values quite a lot, I probably would go ahead and set up some styles here.

But this course is getting a little bit long, so I'd like to stop here. And do me a favor: in the comments of the YouTube video linked above, please let me know how you felt about this course, if there's anything else you'd like to learn. Lots more courses are coming. I hope you enjoyed it, I hope you it gave you some good foundational knowledge for designing in Bubble, and I'll see you in the next course!