UI design with Penpot | Penpot Hands-On Demo

[Music] [Music] hello my friends and welcome back back to another pen poot handson in these sessions we are live which means you can ask questions as we go and I'm going to demo using penot today I'm very specifically going to look at UI design with pen poot and we are going to work on a design from start to finish so please wish me luck because I'm hoping this is going to work if you don't know what pmot is well pmot is an open-source design tool that is great for both designers and developers or designer developers and hey you know it might be just the alternative you're looking for on a day like today so without further Ado let's Jump Right In I'll give you the opportunity to ask ask questions throughout and so if you have any questions you can just pop your questions into the comments on whatever platform you're watching on and I will do my best to answer them live and if not you can always jump into our community the penot community and ask questions there and I'll make sure I get back to you later so here is the design that we are going to work on today here is one I created earlier now I've done this so that we can see exactly what we're going to recreate and try to recreate create it fairly Faithfully uh I mean unless you have any suggestions on how to change it it's not the most beautiful or exciting design in the world now this is kind of a UI design for like a smart home Hub app dashboard thing of me this is based on uh a bunch of requests that we've had for UI design and me showing you what you can do with it so in here we will have typographies colors components grid layout Flex layout there's an image in there there's blurring there's icons there's all sorts so these are all the things that we're going to get to today so how am I going to get started with this design well you know what I tend to start with is typography because without text we don't really have very much content in a design like this so I'm going to start off by creating a board and I'm actually going to use a size preset for this um you need a board because anything useful will happen on a board so we'll go for oh that's a bit narrow I'm really bad at remembering what width boards come up us it's too big okay I'm going to resize it automatically there we go and best practice give our board a name dashboard so maybe I'll put these side by side for now now we're going to start off with the text content so to see that I'm going to grab the text tool going to start off by typing in home Central zoom in so you can see what I'm doing there that's our title and we've got a whole bunch of other texts you know what it's going to take me way too long to recreate that text just give me two seconds I'm going to if I try if I spend the whole time typing you're going to be bored to death so I'm going to just grab in this one I made earlier just going to grab these texts I'm holding down the shift key and the command key and this allows me to point and click on specific objects to copy them so okay I'm cheating already but we'll get there right so I've copied those now I'm going to jump back into this new one and paste them all on great so we have a bunch of text um it's kind of cheating because I've already got some typographies but you know what I'm going to do is these are just text right now with some styles on them there's no there's nothing usable or repeatable here and that's where typographies are really useful so for example uh this big this is kind of display text here um it's big because you want it to be eye-catching so I'm going to make a typography of this and I'm going to call it uh D1 display one and so then I will apply open my topography palette apply that to there these are kind of H2S I reckon so I'm going to add that one as in H2 as in second heading level that's an H2 so I'm going to apply H2 to that is this one H2 yeah if you think about H2S instead of thinking about them in the size of text it's more actually about the hierarchy of the content so H2S are the most important like titles below the title of the page title of the page here it's a logo it's smaller than all the other text but it doesn't mean it shouldn't be an H1 it's the most important thing on the page it's the thing that you need to know what is this page when the page loads it's home Central which is my madeup little brand name so I'm going to add that one and call it H1 now next up we have some h3s oh I'm missing one bit text here these are my recent scenes see this is why I couldn't have uh typed it all out because I can't type to save my life so these are my h3s so I'm going to rename that you see by default they're named after the font and the font weight um so that's why I'm renaming them as well so that they're easier and it's much more useful if you're working with developers or you're going to develop later that you remember okay this is what this was for that's an H3 now these are just kind of body text equivalent I guess so I'm going to call this one body oh no if I'm going to stick with the HTML theme I'm going to call it P for paragraph just it's edited right cool so these are all PS I can pick it from either the left or the bottom I'm going to pick from the bottom now we have some navigation links so these here I'm just going to name that uh this is not a specific HTML type so I'm just going to say nabl link so these are all nav links uh these are these are status links or status text could always think about what element I would make that Dev wise later on another status text and these are room names oh there we go what have I missed oh there's some text here now that's display textt isn't it is it a bit bigger yeah that's display text okay so we have our text all set up now now I think it's probably good to look at the colors too now because I'm picking from a design that already exists here just cuz I thought it would be nice for you to see that I'm not making up as I go along and nobody wants to see me make up a design as we go along we'd be here for like two days so uh I'm just going to pick the colors using the Color Picker um so it's useful to to the colors here going to add a color and I'm going to add this dark color is that's my uh second is that yeah secondary background we don't want to get overly into me being bad at naming things at this point but trust me I am I always changed my mind about a million times over uh this will be my primary background Now text colors we have this zoom in a bit for that text do and zoom into you you're a this is a lighter color than this one so I'm going to say text emphasis this is going to be just body text if anyone has any tips on how they come up with names for stuff I would love to hear it this is something I always struggle with consistent formatting good names how have we got all of the text colors I believe so okay so next up we'll go into these accent colors so this is accent yellow accent pink because they're kind of arbitrary they're not really semantic in anym anyway so I can just name them after the colors accent purple and we're missing Accent blue now I'm going to oh this is another color here nearly missed that so that is going to be button background got a nice little set of colors going on here I'm going to apply these colors to the text but I'm just going to put the background in first so to do this I can pick it from here I can pick it from the left panel as well or I can pick it from the color palette at the bottom I like this because it shows me the names too so I'm going to say that is my primary background these are body text not body text text yeah body text see I Nam them so badly I can't remember what they are text emphasis any of them that's body text this is my dark text which is why you currently can't really see it against the background we'll be able to see it in a minute if you squint text dark right so we have our text done now let's work on the navigation so all of the things that are this text that is just laid out on the board right now these are just positioned with X and Y values so they're just play statically as I like to say on the board but when it comes to things like navigation we often want to lay it out better automatically make sure that everything's lined up nicely so to do this I'm going to add a flex layout so I'm going to group these elements I'm going to call this navigation and I'm going to go into my right side bar and add a layout Flex layout now what this is automatically done is pulled a layout out that's kind of matches what we already had but making them evenly spaced and so these are all aligned and this is the they're aligned to the top I want them Center aligned just in case I have text of different sizes Center alignment means it all sits nicely to the middle now the direction is currently right to left I'm not going to change no I am going to change it I'm going to be pedantic so basically you want the order of these items to be the same as they are in the content so if you are reading the entirety of the page as a list of we thinking about accessibility so I'm just going to change the order of these so the home Central goes at the top just to move these around I'm actually using the arrow keys on my keyboard now I've got Flex layout on it works with grid layout too I can just move it around so what have to remember the order that it was in before uh updates I think devices then scenes then utilities memb settings updates great now if you remember before I had these actually grouped in separate little groups so there was the grouping with the logo the grouping with the devices scenes utilities and the grouping with the members settings and updates so these are kind of almost three little Flex groups of their own so I'm going to add a flex group for this one this is going to be my logo that has its own Flex layout I'm going to group these together and these are links give them a flex layout and these ones you don't actually have to group and then add Flex layout you can just select them all and add Flex layout like that saves you a step and these are vaguely settings related links you see I'm really fussy about naming my layers as well because it's easier for maintenance when you come back to it later you can search for the layer name and find out what it is it's way easier than just sort of lots of different things called object or text copy or something like that so I'm going to give all of these a their own little Flex layout now the logo there's not actually anything in there right now to make it a flex layout I'm going to do this is a little cheat that I did in that I have added a utilities Library here and actually the only thing that's in this library right now is a bunch of icons and this was because I didn't want to waste your time showing you how to make icons hey if you want to know how to make icons you should let me know because I I can show you that it would just take up too much time right now so I drag this little home icon in that's too big and to make it like 21 so now we can see some Flex layout in action right now it's flowing from left to right from start to finish it's aligned to the top we want to align it to the center how much spacing do we want between this little uh icon and the text maybe 10 so that's our spacing in between and right now I want the entire container to fit the content both in width and in height and I'm going to change that icon color to the light color as well next up we have these links now these are too far away because they've got a default gap between them of 121 bit too wide I'm going to try 20 no bit too close 30 and I'm going to do the same for this one 30 now you can see that this is currently just filling the width of the content um I'm going to leave it like that for now we're going to look at the overall layout for the whole design a bit later on um but I will uh I'm going to set the flex layout so right now these are Justified to the start the left of the container and it's got a spacing of1 between them um we're actually not going to have any actually put bit default space in case they get jumbled up together um put a bit more in so you can see what I'm doing and what we're going to do is rather than it have it be left aligned we want when this navigation is in a responsive design we want it to fill the full width of the available design and so I'm going to set set it to push the uh elements outwards so it's going to put the distribute the space in between them so that's Justified content in between we'll see that in a bit of action later on right I think this is a good point to pause and ask you if you have any questions so far I might answer them as I go along um but if there's anything that is jumping out at you right now now would be a good time you can ask ask your question on any of our platforms here we go the typography color palette at the bottom panel can those be dragged onto the canvas is that its purpose no it's not its purpose so its purpose is more like uh something to pick so if you select something you can then pick the colors or the to switch so I'm going to show the colors from the far like library and so you select an item an object on the canvas and then you select one of the options in order to apply it to what's on the canvas so it's clicking rather than dragging I hope that makes sense do we have any other questions okay great I'm going to move on to the left side bar so let's look back at the original design so here we have a dark background both of these have rounded corners and there's some spacing between the title and the content uh and even spacing between these items here so I'm going to first of all these are just floating random text I'm going to give it some layout so add Flex layout there and I'm going to call this status panel we'll do the same here and add a flex layout that is my room panel and actually I want slightly different spacing between the title and this list which is I know it's got two items in it but it could have more it's a list so I'm going to group these together and I'm going to add Flex layout to those and I'm going to call the statuses and the same for the rooms these are my rooms now let's make sure the flex layouts work I'm going to give some background color first because these are kind of similar they're not similar enough to make them into components but I'm just going to give them the secondary background the same give them some rounded Corners 30 is too much and I'm going to give them some padding what do we think 30 and 30 that look about right nope I think it's more like 20 okay and now I've got on this the default gap between the items is 25 uh I'm going to make that 20 and do the same for this one and then the spacing between the rooms so this is currently put that in the right order so this is ordered from top to bottom they're left aligned they're aligned to the top that works for me right now but currently the spacing between them is a bit too much I'm going to make that 15 I can see that you see they're much narrower but the text isn't quite big text looks a bit smaller doesn't it I'll handle that item am I recreating it Faithfully or not we'll see and this battery level and Wi-Fi level so these are aligned to the left I'm going to order them from top to bottom they are aligned to the top as well and I'm putting 15 in between them now again I've used icons here like I've did with this home icon so let's pop these icons in so I'm going back to assets to the library I added earlier now our battery level is going to be hey we're going to have full battery today I'm just dragging these in and Wi-Fi there we go these are both a bit big so I'm going to that's to constrain the size so that they stay the correct ratio at 21 maybe little 18 now you see because this icon is made using Strokes rather than fills When We Shrunk it it's maintained that same stroke size um which is not really ideal so I'm actually going to undo that change for a second and show you a little trick so I've selected my icon and I'm pressing the K keyboard shortcut now that changes the way that you can scale so now when I hover over this you see I've got this double-headed Arrow cursor and now when I shrink this down to 21 what it is doing is it's proportionally SC ing the stroke to the size that I've resized it to so that's what the um K keyboard shortcut does it proportionally scales it's really useful if you're working with uh strokes and text sizes and things like that where you want to shrink everything inside the container to the same proportions as the container going to make sure I press K to turn that off as well and this one just going to resize it the same way now in the design I've got these are they're again in a flex layout where I am floating the icon to the right side of the text I noticed that I've got these the wrong way around so I'm just going to switch those around and the battery isn't even in that Flex group so I've popped it in there now so I'm adding Flex layouts of these you can Nest Flex layouts as much as you like and it's so helpful because it gives you just ways to control how things react proportionally to the things around it things objects bit more precise this is my battery status this is my Wi-Fi status these are both going to behave in the same way we are going from left to right still just like to be very precise about keeping my text in a good order CU that will translate the code much nicer and I'm going to put 15 in between them yeah I don't if any of you can see what the problem is here and uh it's that this is not really aligned so I also want to make sure in my Flex layout they are vertically centered so I think that looks good now we've not quite got the same text sizes going on but I might actually prefer this version so maybe we'll stick with it for now now next up I want to have a look at identifying and creating comp components because so far what we've done is we've worked out colors that are repeatable and reusable and typographies that are repeatable and reusable you can't see I'm counting these on my fingers and we've also identified a couple of Standalone objects that don't necessarily need to be components unless you're going to reuse them in a different project but now we're coming to some items that are looking very component and that is these scenes and these devices like they're really similar in their layout in their color in the typography they've all got an icon so Prime candidates for components so I'm going to create uh my first component I'm going to make the good night scene first and this can be my default scene component so here I've got some text I'm going to put it in a container in a group and I'm going to call it scene now I'm going to give this a flex layout and now it's got a flex layout I can give it a fill color and that fill color I'm going to grab from the bottom here and that is Accent blue so we're getting there maybe if I just I'm going to screenshot this this is just so we can have a little reference closer you probably can't see my Act of screenshotting right now but that is fine you'll just see the magic when I drag this image onto the canvas there we go right so I'm just going to use that as a little reference there okay so the good I Scene has an icon inside it as well and this default one is a moon icon so I'm going to drag in the moon icon and the moon icon color is the same as the text color oh that there I changed the fill of the whole group rather than the color of the Moon itself so I select this and I'll pick the text dark color there okay now I want to add some padding me guessing at padding again now you can see actually this text this recent scenes is actually a title for the whole group so I'm going to ignore that for now um so we've got our items are aligned to the left inside of it yeah um but they're going to be arranged from top to bottom now the text size looks bit funky cuz that's not big enough uh we've probably let's see is it 20 yeah that looks about right 20 on either side yeah and is it 20 between yeah that looks about right the moon isn't big enough so we're going to make our moon a bit bigger we're going to make that maybe 40 okay and rounded corners of course so here we have our little default one maybe we've got some more padding on the top there haven't we so what I'm going to do is I'm going to hit this multi- padding button and it opens up the option to apply different padding to each side and I'm going to put at the top maybe's like 60 I think that's close enough for now and we can tweak it later but I think that works it means there's a nice big hit area in there so we have a good default component here so I'm going to make that into a component so that's my component and you might not want your main components on like inside your working file probably my preference is to put them on a in a different file as a library but for now I'm just going to stick them in a main components page sorry this is so bright let's make you a bit darker there we go nice and soothing don't need bright gray and dark mode and I'm just going to copy that component across to here I'm going to delete this one and I'm detaching this component because I've just deleted its instance and I'm going to create it again there we go so that's probably the quickest way to move a main component onto to a different page that I've worked out so now I've added a component and going to my assets and in my local library I have the scene component and there's my good night scene and I want one for a wakeup scene so my wakeup scene and that has got a cup of coffee so the am I going icons right so I've got an icon that I've used inside of this component so this is my component instance with the icon component and I can actually swap between different icons if I go here to the component swapping panel I've got it selected in the sidebar and I'm going to switch to coffee now because I did tweak the size and the shape of this icon I do need to do that again I'm going to use proportional scaling and scale that up to 40 and make sure its colors it's the dark text okay so there we have our wake up scene oh it's a different background color as well that's yellow next up another one I've just duplicated that using the command d shortcut TV time scene anyone else have a special scene for when they're watching TV I do in my house and TV now how's that sizewise scale that up and change its color and this one is Pink and then dinner party scene how am I doing for time doing okay right so my dinner party scene uses the cutlery icon and I'm going to scale that up though I can't see what size I'm making it we go and I'm going to apply the dark text color to that and that one is purple so now I have these four scenes they're slightly uneven and funky looking I'm actually going to make them align to each other with you guessed it Flex layout so I'm adding a flex layout this is lined them up automatically and put a it's guessed at the spacing that I want between them P this scenes and the scenes are going from left to right so I'm just going to use the arrow keys to reorganize them spacing between it I'm thinking maybe 15 yeah that looks about right and we've of course got this recent scenes text now with this recent scenes text um it's actually part of the scenes like information so I'm going to group them together and I'm going to apply you guessed it Flex layout so adding a flex layout you see automatically it's put it to the left so I'm going to run it from start to finish I going to give it a background it's got that oh no it hasn't has it got a background on it no no background but what you can see is that this title should be overlaying the first scene now the reason I did this was it just is a good way of saving space um and also that's why I've added the padding in here so that you can leave space in there but it's not lying in the right place right now um because because of the flex layout but what I can do is I can pull it down into the correct space using a negative margin if you're a developer you might know this trick from CSS but you can do it in pan poot you don't need to know how to do code so here I have in the flex Element Section I have the margin options so I can organize put both top and bottom margins together or both uh right and left margins together but I'm going to look at them individually again now you think about negative margins what I'm doing is I'm using the bottom margin I'm going to pull it down so for that I'm going to put minus I'm guessing here 50 no maybe 30 you might not be able to see the outline of the text is there uh and I might want to put a bit of no I think it'll be okay right but you can't see the text and that's a problem because you're like how do I control the layering on this and the answer answer is with the Zed index so by default everything has like the equivalent of zero Zed index everything is lying on the same 3D plane and I want to pull this thing up on top of everything else so I'm going to give it a zed index of one and that's what it does if I do minus one it will push it down if I make it two it'll be higher than one and so on and so forth and now because um this isn't very nicely aligned I'm going to add a left margin as well 20 which makes it all nicely lined up now I think effectively for this set of active devices um they're pretty similar layouts to the components above there's just one more so I'm just going to duplicate these and call this devices container and I'll just adjust it from there so I do another little screenshot situation so I can see what I'm copying I have to keep shifting backwards and forwards okay so we have big light desk lamp TV itself as a device we have a stereo and we have another one I'm going just duplicate this last scene you see it automatically aligns it perfectly with the others because it's inside a flex container and I'm going to call this mirror light and now to just switch out my icons so this is a bulb and this one is a musical note I'm doing very well at remembering the icon names today even if I do say so myself uh this is a desk lamp it's a bulb so switch that for a bulb and big light is obviously a bulb I'm going to tweak the size of these all at once oh although not the TV cuz it doesn't need it and I'm making sure I've got proportional scaling on make sure I can see the size to reference and these are all going to be 40 it's been too clever with the snapping come on why not just nudge it like that that's the easy way of doing it sometimes you and you want to be really precise it's easier just to enter the values in rather than trying to be precise with your mouse and your hands now I want to change the selected color of those to the dark text color and then we have it although these are all currently called seen when they're devices and you know me I like to have good precise layer names then when and someone I work with comes back to look at this later it makes sense now we want to I got to hurry up a little bit Laura we're going to add in our buttons I'm just going to move these and delete that text is not going to be too distracting for later now in this design we have a couple of little buttons the the idea is that if this there's a lot of recent scenes or a lot of active devices we can scroll them on and off the screen and so I'm going to make some buttons for that now the basis of these are some Arrow icons so here is my arrow icon oh you know what I'm going to do just copying that I'm actually going to make this component from the main components page speed up the process so this is a nice big arrow and it's going to have the color be nice and bright now I want to add a background and I want to position this icon in the center so what I'm going to do is I'm just going to group it so that's putting a container around it for the button call it button I'm going to add a flex layout so now I can add a fill to it which would be the button background fill now it's round uh so I'm going to add very rounded Corners to it oh that's padding not the rounded Corners the rounded Corners up here so I'm going to add very rounded Corners there and I'm going to add padding as well 20 is too big and there we go we've got a nice round button turn of proportional scaling I'm going to create that into a comp component now when I go into my front page I can grab this component button in here and I've got two of them so one there and one there now these buttons should be with their containers so I'm going to pop this into the devices container and going to pop this one into the scenes container now this is aligned wrong because of my title being on top of my scenes so I'm actually going to wrap the scenes themselves and this button in their own Flex layout scenes and button oh I accidentally hit the slash key and hid the UI and then I'm going to position that from left to right and I'm going to make sure that they are Center aligned and I'm going to pull that button in with a negative margin on the left side this time 20 so it's overlapping maybe I'll do a bit more I can't remember what was in the original design so I'm just going to free whe for now for the sake of time and the same here again adding a flex layout devices plus button making sure that it's aligned from left to right and Center aligned and then negatively pulling this button into the left margin which was minus 40 there we go we've got our little Carousel SL thing yeah I actually like what I've done now better than that so I'm just going to keep it like that right I think uh yeah now is going to be a good point for more questions if anybody has any you can ask your questions in the comments uh section of whatever platform you're watching this on if you're watching us live about when we were adding colors to the text is it possible to assign the colors to the typographies instead of selecting one by one no right now your typographies and colors are treated separately if you wanted to create a typography with a particular color assigned I would do that by taking a bit of text like default sample text adding a typography to it adding the color to it and then create a component because then you can use you can replace the text in a component easily and and it will still keep that same typography and that same color so I think that's probably the best technique for it you're kind of creating a whole new design pattern outside of it do we have any other questions no way to make the newly selected icon follow the style of the icon in the component yeah what I could have done is create uh another component from that icon component with the color applied and the size applied and then I could have switched them out and it should have taken those new Styles so yes you can do that I didn't because my brain decided not to work then and any other questions it would be nice to find a tip to quickly reverse the order of elements when creating a flex layout not just reversing the flex Direction yeah there it would be pretty cool if we could have a keyword shortcut for that or something uh yeah I agree uh I think because for development um and for accessibility like when the code is on the page we want the text to be in the correct order because if you think about someone who might be um like understanding the screen programmatically like using a screen reader or something like that their software will read the contents of the screen to you in the order that it is on the page in the code not according to your design layout and so it's really important that it makes sense so that everybody can enjoy the content in the same way right do we have any other questions other I got to hurry up and do some layout great right so I'm going going to move on next to this little image section here where we have a kind of rainy background now I'm trying to remember how I did that okay we're going to start off with a we're going to start off by laying out these elements so these are all grouped together in a flex layout and I'm going to call it out side now the order these if we look we've got an icon as well a little rain umbrella icon where's my umbrella oh it's in the weather section umbrella change the color of our umbrella not the background color the actual color of the icon and pop that in side this Flex layout okay now at the top we have outside and rainy so I'm going to group those and call that top CU they're aligned to each other and at the bottom we have the temperature in the umbrella so I'm going to group those in the flex layout and call that end and the outside board itself is going to be organized from top to bottom now there is ,500 pixels in between these items let's just make that zero for now and so it's hard to see that text let me apply a background color so we can see what I'm doing okay now we have some rounded Corners there and we of course we'll have some padding going on now the end is above the top so something going on here right we're organizing from top to bottom we have that we're going to have 20 default gap between them they're align to the left that's fine for now they're align to the top that's fine for now so we switch these around now there's 706 pixels between these we don't need that we're going to make it 30 but we're going to do is we're going to make them push them space between so they sit on the outside of each other it's quite hard to see that in effect here but you'll be able to see it on this one because these are a bit narrower so here I'm going to put the space between on there too and I'm also going to make these fit the width of the container so there now you can see they're being pushed to the outside I'll do the same for this one so it will be an effect when the container is wider but I'm going to I'm when I'm making these components I don't tend to think too much about the layout because I know what it's going to be but I'm just going to make this a bit bigger so we can see what we're doing and what I also want to do is push the tops from the bottom so that the top content sticks to the top of the container and the bottom content sticks to the bottom of the container so I'm going to use space between but that way so there we go next up we have the images now I have a little trick for this I'm going to add a board and this is going to be my image the thing about a board is it allows you to clip things and so it's really useful if you're adding an image to it the background for my board is going to be an image you're not going to be able to see me picking this image from my operating system but you can trust that I am so there's my rainy image that's going to be my background and you know what I'm going to add the text emphasis color maybe a blue on top of that image but I'm going to make it like 80% so it kind of has a nice color feel over the top that will work on the web as well and then I'm going to position this absolutely so that then I it will sit behind all of the rest of the content inside this layer and make sure this content is clipped it's clipped it means the rounded Corners will apply to what's underneath and I'm going to make sure this is Zed index pulls it on top of the image uh now because this image is independent from the rest of this content I can apply blur to it and it's not going to affect anything else in the content and so that way I can add a slight blurry background effect to now I think we've got to the point before I run out of time that we're going to introduce the grid layout so here goes nothing so here I'm going to what's the best way of doing this when I'm making grid layouts what I like to do is create a separate board and I'm going to give that board the primary background this is dashboard mark two and now I'm going to apply my grid layout to this board so what is my grid layout so it's not 2 by two is it it's more like there's two columns kind of because this is a column and this is a column and we've got a row here a row here and a row here or maybe it's two rows here so we've got four rows and two columns so I'm going to in my grid I'm going to add I've got two columns there I'm going to add four rows now the top row is going to be the size of the navigation which be about 50 pixels I think and then this is much taller this row than the next row down it's in fact two times the height so I'm going to make this one back to editing the Grid it's going to be two to one and one now this spans just one of those cells whereas this spans two rows so I'm going to select both of those I select the top row and I'm going to give it manual grid cell positioning and this is saying span the third line to the fourth line the third line is here and the fourth line is here but I want to spand third to the fifth so that's 3 2 5 so there we go and the navigation that spans the entirety of the width of the layout so I'm going to select this first cell here and I'm going to go to manual again now I want it to go right now it's going from the first grid line to the second grid line I want it to go from the first to the third so I'm going to type three in there and now that's spanning the whole width now sometimes it's easier remember the purpose of these cells if I give them a name and I can do that in the area section so I can call this nav you see it's highlighted it and says nav here I can call this one scenes I can call this one devices here is rooms and here is statuses and this will show up in the code as well so it's really useful to be able to assign things to these spaces and now I'm going to start popping my content in there I'm just going to copy it in right now I think that's one of the easiest ways to do it so I'm going to select the grid cell and paste my navigation in and my system status goes in here and my room panel goes in there and my outside section goes in there my scenes container goes in there my active devices goes in there done so I deleted the original one it's not quite taking up all the space that we want it to though is it and actually I kind of like the width orientation is slightly different here so what I'm going to do is I'm going to go to my grid and you see here this is one and one which means they'll be exactly the same width I'm going to make this one to three there we go so that's a bit nicer proportions and currently it's set so that the contents of each cell will stretch to fill that space but we need to tell the flex layouts to do that as well so I'm going to select this Flex layout and I'm going to make that full width and I want to keep it the height I need some padding on the top and the bottom there as well doesn't it so I'm going to oh it's got no padding on the sides either so these are margins yeah I'll do with the margins there so get that maybe 20 and 20 that's too wide for the available space that I've given it oh there we go I was editing the grid layout not the flex layout there we go so 20 and 20 15 maybe and that's going a bit wider than we wanted to there we go and this one I want it to be the full width of the space but I still want it to fit the available space and I want this to be the full width of the space but I still want the height to be the height of the contents this outside container I want that to be full width and full height now look my image has exceeded the height and width so I'm just going to change the size of that as well and this is going to be full width full height full width and full height now that's just the containers I need to make sure I also do it for the flex layouts inside of there so that's full width and full height and inside this section full width and full height and it's inside of there full width and full height and inside of here full width and full height and you can see that these are just fitting the available space they're not filling the space that they could so for each of these components they're currently a fixed height and width I want them to fill the width and fill the height and the same for these next ones as well I want them to fill the width and fill the height now that's oh actually maybe I'm going to make them height of the content I that's a little bit tidier okay that one should be full there we go height of the container now we've got a little bit of funkiness going on here and there's no space in between each of the columns there's no room for it to breathe and so I need to edit that in the grid itself and I'm going to put 15 pixel grid Gap there and a 15 pixel row Gap Maybe or 20 20 looks a bit better and maybe I'll do the same around the outside of the grid too going resize that to accommodate that right now so we're getting there I got the proportions are a little bit skew with uh so what can we do about that oh there we go we've got a fixed height in there so we want to make that the content height content height this one's going to be the height of the content but make sure that's also the height of the content there we go got a little bit of an alignment issue there that's maybe to do with my negative [Music] margins there we go so make sure we're offsetting that nicely 10 and 30 do the same for this one 10 is that the wrong way around 10 and minus 30 10 and minus 30 that's it they're filling the space much better now I'm now actually am I changing my mind about making these full the indecisiveness but we're getting there and we have got one more minute to go so I better wrap up I should have looked at the time before then the one thing I haven't shown you is how to do this border line and so if you join me afterwards I will show you in the pimpo community um there's a thread for this event and I will show you a little demo of how to do that in there uh it's using Flex that's a top tip now uh I want to uh if you have any questions as well any followup questions I'll make sure I jump in the chat afterwards and answer any questions that you've got um and uh or you can ask me in the community too so the next Hands-On demo will be on January the 29th where we will be looking at plugins and libraries now speaking of plugins uh there is a plug-in contest currently on for pmot plugins and you can enter the first prize is $11,000 and there's 20 honorable mentions that will each get a prize of $200 the deadline for the plugins contest is just next week it is the 15th of December 2024 so make sure you get in and enter there some really great plugins there already the URL for that is pmot doapp plugin in- contest so you can find all of the information there uh you can get all the latest updates from penot by signing up for pimp poot uh and it's free so you should go do that but also by following us wherever you are watching this or on any of these social channels and yeah make sure you sign up for pmot and I will see you next year goodbye [Music] okay

2025-01-06 23:47

Other news