Building layouts with flexbox and CSS grids

[Music] welcome everyone welcome to the wagon my name is Boris I'm the CEO and one of the cofounders of Flor de Gong and tonight for trap will be about building layouts in CSS so just a quick disclaimer it's a workshop for someone who has already some basics in HTML and CSS so I won't cover the really basics of HTML and CSS and at the same time I won't overwhelm you with the lots with too much information about CSS degrees or flexbox my objective is more to give you a good general knowledge about layouts and the useful techniques to build the most common and the most popular layouts that you can find on the websites right so just to give you a bit the structure of the workshop first we'll start to see together what exactly is a layout what what we mean when we speak about layouts then I will give you a bit of culture with real-life examples of different layouts that you can find on popular websites so we'll see lots of them and then we'll discover that there actually there are three different categories main categories of layouts there are so many outer structure by Rosa ok with different section that are one on top of each other thou layouts structure by columns and a layout that are a bit a mix of the two other ones and we will call them the grid layouts right and I will give you a real-life example for all these categories and then the big part of the workshop will be to see useful techniques and code some of these examples all right so let's start right now so before I give you some some first elements on layout so there is a small setup for this workshop so I just show you so that you can do that yourself on your own when you at home looking watching the video but I've already prepared this setup so basically the content of this workshop you can find it on the Lutheran github account so if you go on github.com slash luego then there is a repository called layouts 101 ok and that's exactly the boilerplate I will use during this workshop so actually on the master branch here you can download them all the code that I will do tonight although solution if you want and if you change them to the boilerplate here branch then you can download the starting points the what I will use just to start the workshop okay without the code just the starting points so in my case I already have downloaded this this project which is called layouts 101 boilerplate so I just open it in sublime text so that we can see what's in the boilerplate and also I will launch a web server so that we can inspect the HTML file that we have to start with okay so try to be with me it will be an intense workshop and I want you to be a to be focused with me so what do we have in this starting boiler place let's start with simple things here what do we find here come on guys wake up images right so I have a fellow it's some images that I will use during the workshop so images of cities well live aguma is running a bootcamp Barcelona Berlin the logo of lagoon a bunch of other topics shows of my two co-founders Sebastian and Roma all right so I just have a bunch of images what else here yeah I've got a bunch of HTML files and if you look actually every a Shamir html5 will be a different layout so that's the for example we will code tonight first we'll call the layout for a blog post but I don't want to start from nothing because I would have to write all the content and I want to save time so instead of like starting with an empty file on I just start with a really simple one so if I just open it in Chrome oh let's look at this page it's called blog post dot HTML and for now it's a stupid navigation bar right with the center D major so this code is where do we find the navigation bar here here right at the top of the page just a diva with a small CSS design but really you know like ten lines of CSS and below what do we have guys what is what is it yeah some really plain text content headers and powers of text rights so here I will start with this one and wh it will be to build up the layouts of a blog posts okay and for every example I will start with really a row structure and then we have to build this the layout together so we have images we have a bunch of HTML file and what else do we have yeah so we have a link here to the main stylesheet style.css and if we inspect this main style sheets normally you have some basics of CSS so you can understand what it does what does it do here yeah it just importing a bunch of google fonts for us while your case you have some nice from family so then here it's importing a bunch of layouts of stylesheet and for now this layout style sheet are empty because that will be the designer of every different layout so we will have to code these style sheets but for now it's empty and if we go on on the main style sheet then here it's really simply just a bunch of CSS to set up the background of the body the font family of the body the font family of the headers and at the bottom of the page here what do we have just the CSS to design the navbar with the santur logo okay so that's the starting points there is nearly enough nesting in CSS we have to cut everything ourselves is it clear for everyone this starting point okay so now we can really move on to the topics of layouts so actually to your opinion what how do you define a layout what's the layout how do you define this in your own walls yeah so in French collecting line is impartial when we mange the page structure okay the skeleton of the page so actually you can watch another workshop that I did on our YouTube channel about building components so components when you speak about components it's actually the elementary blocks of your user interface okay like kind of the legal bricks of your page so come do you know components like common components in a website you have cards such as the cars on Airbnb you have buttons you have avatar or some nails you have forms is there a vertical form or horizontal form for for search and you are for instance tabs tabulation for navigation okay these are examples of components which means the elementary blocks of your website so this is the component but then when we speak about the layout so this is the global structure of the page all right you can see that as the kind of skeleton of your page and it's like a game when you have the structure of the page then you can just inject the components inside this layout and you have a web page okay so you have the global skeleton and then you can inject the navbar in the in the top section you can inject the tabulations here in the second section you can inject a bunch of cards components in the content section because you have the layouts part and then you just have to inject the components is it clear for everyone so we will not cut components okay it's another workshop here we want to talk of the structure of the page which is the for me the most like the hardest part of the web page okay so if it's clear now let's speak about real-life examples of layouts okay that we can find on the popular websites so what kind of layouts do you know we I will help you a bit let's start with the first category which I called I call it the row layout okay for me it's just you have some rows that are just one on top of each other what kind of example of role layouts do you know which one the one pager oh yeah so I call it the home page or the landing page if she wants okay the home page of a website is is the typical example of a row layout it's just sections one after the other and you have to scroll on the page okay so if we look here on the it's the previous home page of Airbnb we have two rows okay one for the banner at the top of the page and another one presenting the I don't know the popular cities of a B&B or whatever can you find another example if I do you know the website medium.com yeah so what Tower what is another example of row layout a blog post right if you look at a blog post like this one is extract fact from extracted from medium oh it's another example of basically section that are scrollable okay one after the other so here the first section for the headers with the information about the author and title of the of the blog post then a banner with the background image and then another affection with the content of the blog post okay and is there example of a row layout now what about column layouts the Downloads actually I it's it's easier for you to find examples because column layouts from it's 95 percent of the layouts you can find on the web so there are lots of examples of column layouts can you give me a bunch of them so which one will she come as Amazon or something like yeah so I didn't give this one actually in my site but yeah the e-commerce is the you have some breadcrumb navigation you know the navigation with the categories of product on the left and then the page content with the result of the product on the right so that's an example yeah so like inbox aww yeah so I give you as a one that are not that obvious so this one if you forget about the navigation bar you forget about the filters in the navigation bar okay just the main navigation but then below we typically have two columns layout on a B&B first column with the results okay second column with the map so that's an example of a column layout even if then inside the layout we have a grid of cards on the on the Left tablets the main structure is two columns results and map okay this is another example an inbox okay so all the inbox is basically a column for the different channels or the different inboxes and on the lab on the right the colon with the different messages right actually the social feed line mean if you look at Twitter Facebook LinkedIn they all rely on the three column layout I don't know if you noticed they all have the same structure and of course inside each color there's some white cards with different information but the social feed is always tricky on this way and you got on the left the first colon you have some information about the user rights some statistics and trends on the main feeder colon in the middle and on the right it depends but some suggested or ads column is the same on Facebook it's the same on LinkedIn it's a three column layouts what is the example actually all these software-as-a-service applications so if you look at SLAC Mixpanel intercom you name it stripe okay they all have this kind of also different navigation level so here on slack you've got you can select the bottom okay your board on the on the on the left then inside the board you have a second column where you can select the channel on which you want to discuss then you have the main : well you've got the the chat messages for this channel and then on the rights so here it's more like the files upload with your team or something like that okay so if you look do you know if on does the startup studio it's a startup studio from Belgium and you look at all their products you will see they all have the same column layouts he found us e e like e like elect like e founders like fondles yeah he found us and all that product they have this kind of SAS software it's a it's a startup studio that do lots of SAS platform so they did a front application I mentioned Mel jet and and they all have this kind of structure ok alright so we've seen ro examples of row layout examples of column layouts and actually there are some example where it it's neither only Rossum no money : it's a bit a mix of the two right so here if you look at this page well if you look at the blue box it taking 2 : but if you look at the purple box it's taking 2 rows so we can't say it's only Khurrana and we can't say it's only rows it's a bit of the two words basically and in this case well it's what I call a grid layout on and what are the example you can find it's not easy this one is not easy well actually III I tried to look at some example I I discovered that the newspaper they use this kind of layouts a lot that's something I discover I didn't know that J Konami is Financial Times they have some news on and they want to put the focus on some news on so this is from Jay economist and you see the main news on is taking three columns one row then you have three little new on the ad at the bottom of the page and you have a kind of update section that takes the two rows and one column on the right so it's kind of a grid layouts and another more obvious example is all the analytics dashboards okay they always have this kind of statistics and most of the time they prison that's in the grid okay in something where you have some sections that are merging rows some section merging columns so here is an example I don't know what is this website I just picked that from dribble so is it do you have a good vision about the different kind of layouts and examples so I don't have a designer background so that's my my vision of the different categories of layout but maybe if you discuss with other designers they will have a different categories in mind okay it's just my personal way of classifying let's say the different layouts okay so if you have that in mind now we can start to suffer a bit and to cut some stuff so let's start to code the simple ones because the row layout is from either the simplest layout we can we can code them and I will take the example of this blog post okay so I think we can cut that maybe in 10 minutes we have to code this blog post layouts so for that the only things to understand is when you have some row layout with a scrollable navigation like a page with a page on which you can scroll it's really important that your content is not full screen okay because a full screen content it's terrible it's ugly no one's wants a website with the content that is full page so when you have some-some row layouts with different section one after the other you have to use what we call in fronting development the container okay container is just a diva with the fixed width and which is sent the other with some space on the left and on the right and that allows you to Center your content and what is cool with the container is if you reuse the same container on your page what is the interest what is the good thing with that what's the point of using here the same container you see the two red container here is the same the same CSS class so what's the point of this yeah they have the same behavior the same size and maybe the same responsive behavior so it means the different content of the different section we'll be aligned basically okay I know it straightforward it's it's not rocket science but that's how you build that for me the most important thing to to understand when you build such layouts like you have to use container otherwise your content is not aligned and it's not centered and no one's wants to read the blog post with full screen content okay so the only thing to keep in mind we have to use container so what is the structure of this page well it's a structure for for newbies right it's just I just give you the HTML it's a banner for holding the background image inside the banner we've got the container for centering the contents okay and then after the banner section we have another container to Center the content of the blog post everyone has this structure in mind when you look at this page yeah one banner who is the bagging image inside the red container to Center the content and then below the banner another container to center the page content the blog post content okay so let's cut that so what will be the cut for the container so you know this technique is I think one of the first technique you you you learn when you with stuff CSS it's a technique to centers and compounds so instead of trying to compute yourself the margin on the left and the margin on the right you set the width you say I want you two to be 900 900 pixel widths and then you put an automatic margin on the left and on the right so it's a way to Center Adira by just giving it a width it's a really popular technique of centering because that's the simple container and we will see in the live code that sometimes you want some responsive behavior for your container so basically you want to contain now that will have a different size on the big screen on the mobile on the tablets okay and for that we use media queries so media queries in CSS is a way to have different CSS code that will apply depending on the size of the screen okay it can be other condition but one popular condition is the size of the screen so I will always give you a lot of theory but then we do that with the live curl right so it's normal if you you will be a bit overwhelmed so actually let's cut its now that we have that in mind so for now what is my page it's terrible what is it is just there is nothing right it's just the text H 1 P H 2 blah blah blah okay so if I look at this in my in my browser it doesn't look like the final results so now I'll turn to college so do you remember the layout the structure what is it so if we start after the navbar and we have the first section which is called before the content now we need something to hold the background image before the container okay so we'll put the banner to have the full screen background image right and inside them we'll have the one that is responsible to center of the content which is the container right okay and I will put this content here okay the title of the blog posts and the path inside this container then my banner is is done and another section another row if you want another section of my page will be another the same basically the same container with the same behavior and inside this container I will inject my blog post content this is the layout this is the structure of my page okay okay with HTML because after we move to the CSS so we have to get the HTML rights so I will cut my CSS in the blog post that CSS here so let's start maybe with the banner okay it's a graphical path so we can cut it quickly so what's the well what's the CSS for the banner what is the responsibility of the banner so a digital raise 100% by default so we need the background image right the banner is that's the background image with Berlin so how do you do that with CSS background image and then you give the URL of the image so here I'm inside this layout fall down so first I need to go back to the CSS fall down step to the parent one which is the main folder and then go to images and find the Berlin that what is it called it's called Berlin that GPG okay so when you have a background in major it's common to say background sighs do you know the property to make it cover the diva it's called background sighs cover you want the image to cover all the banner and so for that you say background sighs cover and if you want to Center the image on the diva you've got another by one position called the nose up bag on property called background position Center okay you Center the image on your banner so let's have a look so for the monkeys like that what missing some padding so let's put some padding maybe just I don't know like 70 pixel top bottom and zero pixel left and right okay and also what's missing and the color of the text it could be okay let's say we want white text but then we don't see really because the image is really contrasted so here I give you another CSS trachea we want to kind of filter on a bit transparent on top of the background image just to put some contrasts because here we can see the text because the image is too contrasted right so for that you can before the URL here and say I want to put a linear gradient and Shirish I show you a trick I want to filter which is a bit the same color as the image okay it would be nice so I will take my color picker and I will choose exactly you know the color on the top right corner of my image and I will from here and I will say okay I want to graduate and you know rgba it allows you to have some compound see at the last parameter so I can say maybe 0.5 okay it's it's half-transparent and like that so I have kind of filter a bit from talent which is exactly the same color as the image okay which is nice because it's it's a it doesn't really create some weird colors with two filters of different colors okay so I have got my banner now what the other part I need to design the one responsible for centering the contents is the container that's the important one so let's do the dump container okay the stupid one so you remember how we do that we select the container and we say which let's say 900 pixel and then we we say margin and we say okay nothing on top and bottom and on left and right automatic okay you compute yourself I just give you the width and you compute the left and right margin okay and so here as I use the same container for inside the banner and below they are exactly aligned to the contents inside the banner and the contents in my blog post but you agree with me that this container is a bit bad because if I resize them well it's not really good right so here we can introduce media queries so we say I never remember the breakpoints okay you have some dimensions for mobile so I think laptop is nine nine - I paid in seventh six eight and mobile is four eight zero you remember that because I want I will need you 99 to 7 cm blah blah blah okay let's try so I say basically if I'm below which was the first one if I'm below nine nine two pixel on maybe I want to select my container and give it a different size right I want maybe two boots I don't know 750 pixel okay then I can do the same for different sizes on if I'm below seven six eight maybe I want to be only 500 o pixel and then if I'm on a mobile device that means a mobile it's less than four eight zero yeah well on the mobile I want my container to be maybe three five zero pixel okay and doing so it's like an if it's like a condition here I'm above 99 - if I get below look here you see I get below 99 - and that's the new property that will apply it's resized to 700 or I don't remember 99 - yeah it's recited to 750 pixel if I continue and I get below which one is the next breakpoint what which is the next one the next breakpoint it's seven six eight so if I get below here look seven six eight then the next width will be this one and if I continue and I go below four eight zero on the mobile on I don't have too much space on the left on the right we have a nice display on mobile okay that's basically how you build a responsive container and if you guys have used some libraries like Twitter bootstrap you know Twitter bootstrap they have coded their own container and it's exactly that the container class with some responsive behavior is it clear you prepare because this the simplest example of tonight then it will be more and more complicated okay so if it's clear we can move on to more interesting stuff so okay Rock row layouts is done okay we know we get it container and section one after the other now it's more interesting let's start to build some column layouts and here it will be I will introduce new CSS techniques so calumny outs for me it's one of the most interesting your pattern because it's nearly I mean like it's nice I don't know this is a fake number right this is my number but let's say it's nearly all like lots of layouts up Cullens lots of them there are lots of real-life example so actually it was not really easy to do a while ago but now with the new flexbox part is now ok we have new CSS properties called flexbox and with the CSS properties on it has become really easy to build the column layouts but to do so we need some very basic knowledge of flexbox ok it's a new CSS bunch of properties so be with me I will just give you the essential information about flags box so when you have a dealer okay let's say yellow diva you can make it a flex box I give you just the vocabulary when a diva is a flex box the children of the diva inside we will speak about the Flex items okay so I will always speak about the Flex box which is the main section and the elements inside them I will call them the Flex items so far so good okay so how do we make something a flex box well it's easy we just say display flex okay on the yellow box I say display flex and it becomes a flex box so what happens if I do that so naturally that's how like flex box is designed on naturally the items inside that will be placed by : okay it's a natural behavior of flex box so that way it's useful for columns because I just put display flags and everything is placed by column and from there I can start to move a bit the items so first I can start to distribute the space either around or between the items okay and for that you have the property which called justify contents so if I say on the flex box justify content space a random it's basically distributing the space around the flex box the story around the Flex items you see we have the same space around each item if I say justify content space between is not around them but it's between them so what happens on the first and the last one you the first one is sticking to the beginning of the flexbox and the last one is sticking to the end because it's between but not around them okay so with justify content we start you can try to distribute the space first thing now there is no particle a line item zone and with this property on the flag box you can vertically center all the items even if they have a different height which is really cool because that was really hard to do in CSS back in the day if you have items with different heights anyone that they are centered okay vertically it's really hard to do and just a line item center and boom that's it now let's dig a bit deeper into flexbox sometimes we want to add them to customize the behavior of an item inside the Flex box so first let's say I want to take the two ones on the at the beginning and at the end and I want to set the widths okay to fix the width of them I can do that like this I select them and I say okay Flex I give the Flex behavior and I will try to translate the CSS into English that's only a size of translation here I say okay my blue items on I want you to be 0 0 25 25 thousand so what does it mean in say you cannot grow okay you cannot grow and take more space 0 you cannot shrink and take less space 0 and I want you to be exactly 25 percent of the box ok the first two parameter is it can I grow can I shrink and what's my reference size that's how you have to read that so here if you say you cannot grow 0 you cannot shrink them and I want you to be fixed to 25% now I just take the blue ones first and last look yeah exactly III just put the same color so that we understand so I just select the first in the last and I said that with so at the end they all take 1/4 ok 25% of the flag box so that's the first technique IAM if you kill the grow and the shrink you can set a fixed width on the item another technique which is really useful on let's say I want to take the middle one you see the middle one on for the moment I don't specify the behavior and I want it to grow to take all the space available I can do that wisdom flex grow one okay if I say flag grew legs grow zero I say you cannot grow if I say flags grow one I basically I'm saying you can take all the space available you can grow okay is it clear so we have three parameters the flags go basically I know you can put value like two three but for me it's a boolean it's zero you cannot grow I'll take the space I see that like that okay so this one in don't grow don't shrink take 25% and the red one is okay take the space grow okay and for me it's sufficient to know that to make lots of design okay now it's a lot of things that you have the video to reverse now we are going to apply this to the life color the last thing that we will use to build you know on ambient media I have a grid of a grid of abutments so you have a useful property called flexwrap and if you put the value rap it means like if there is no not enough space for an item it will go on the next line okay we will use this property for building the grid of apartments okay so that's all we need to know to make the life car so let's try to apply that to build this layout or first : layout so I give you my technique the first thing we don't have to rush we have to take our time okay a layout is complicated it's the structure of your website you don't want to rush on this so first you have to identify the main flexbox of your page so here the main flex box is the red one okay the red one and it has two items to flex items an item for the results okay the first one on the left and an item further the map so I don't I don't try to put to the grid of cards I just focus on the main main flex box so it's a two items flex box okay to your opinion which one is fixed myths and which one is growing which item is growing and which item is with a fixed-width yeah so we can decide to change but I decided to fix the map and to make the result grow okay you can decide another design but that's my design so that's the second question what is my main flexbox and then what do I fix what do I make what do i what item will will grow vegetal so I decide to make my results grow and to fix my map okay and then that's for the flexbox part we will need to also other techniques for this designer basically we will set the height of the map to 100 th do you know the VH unit so one VH it means one percent of the height of the window okay so if you say 100 VH you say basically exactly the height of my window exactly so that's really convenient so if we set the map to be exactly the size of the window then we can have a nice effect by using a position sticky CSS property because when we will column the map will stick at the top and as it takes exactly the height of the window well it will be nice okay we will see that okay let's start this design so I'll show you for the moment what I have on my map Pedro try to describe that with me I have some card for citizen and I have my map my Google Maps here okay and we have to build the layout of this page so let's look at the existing HTML so if I go to this one what do we have here let's try to describe the code with me we've got the navigation bar here what do we have the city cards okay so it's just some some class card with some background image a difference for your belly in Shanghai and on this actually I just put a bit of CSS okay but this CSS is a just background size cover I don't know some color or some font size there is nothing fancy it's just too full full full width even with the background image okay nothing fancy on these city cards and if I finish my HTML sorry she's not this one so I've got my navbar here my for full page city cards here and here what do I have my map and here I just have the Google Maps script to load the map into this deep okay that's the code that Google gives me to put the map that's the starting points now I'll turn to build the layout okay so remember the main so it's below the nav bar but there is the main flex box so how do we call it give me something let's see if you have some intuition for naming yeah let's call it maybe not continue because we already have a container class maybe in main container that's fine with you okay let's call it main container and inside we have how many flex items oh two one for the results one for the map okay so let's call it animal cards container the one for the photo cards okay in this part I will inject here my cards oh okay and after my first so this is my first flex item oh and my second one I can directly put the map here okay that's my two items the card container and my two colons okay and now we can start we have done the most difficult part in layouts if you have the HTML the CSS is the easy part so let's do the CSS so how do I select the main flexbox it's called main container how do I make it a flexbox you remember display flex and naturally it will be a : layout because that's how it's walked with flexbox how do I select the results one sorry the cuts it's called cards is the first color is it fixed or is it growing so flags grow 0 or 1 1 see that as a boolean I like to see that as a boolean okay is there a zero you can grow oh it's one you can grow yeah it's if you just have one item with the flags go it doesn't change its if you have several with a flex goal it gives the proportion of space they take so if one is to 1 is 1 1 will take 2/3 of the space 1 1 side of the space but you'd really use this it's like kind of advanced but yeah if you just have one item growing up to a one is the same it's just taking all the space okay so this one is fixed and actually jaws are one it's already there it's called the map how do I set the width of the map you remember in text box flags so we say basically ah sorry don't grow don't shrink and take whatever let's say 300 pixel okay it's just random value just to test alright what's the height of my map I mean here it's 200 pixel but with my layout what do I want yeah I want it to be full exactly the height of my window independently on a small window big window I want it to be exactly the size of my window so I will show you it depends on sort of your layout mr. hundred is not I don't know maybe put 400 okay so let's look together what happens here if I score no okay I don't have enough city to score oh sorry let me add a bunch of cities so let's take this sausage cheese and duplicate duplicate them like that okay I'm cheating a bit so here look at my map it's exactly look you see it's exactly the size of my window 100 eh that's why I use this unit and what would be a good designer if we if I scroll on what do I want ya to stick it because here it's not sticking it's just like that right and so for that I can say it's a kind of funky a CSS property called position sticky and you say it top zero when you reach zero pick values you stick to the top of the page okay and actually I wouldn't either I'm just I will explain why I do that or maybe you know so here it's ticking okay when it reach the top of the page it sticks out okay and as it's full screen it's this kind of nice design why do I put importance here do you know because the JavaScript of Google Maps is injecting some position in CSS and I want to override this and as it's injected into the HTML I need to put important to be overriding the CSS not too bad look at the the line of code it's I don't know like it's 12 lines of CSS to build this design so now what do we need to do on the left part to build a kind of grid okay and for that again let's use flexbox and deflect what you remember flexwrap so so now it's a new flexbox what is my new flexbox oh it's the card container okay I know it's a flex item Oh of the main one but it's also a sex box itself so how do I make it a text box it's this one I say okay so of course it's the Flex item of the main one but it's also a flex box with all the cards inside and I want that the inside card so we'll go to the next line if there is not enough space and how do I set and let's say I want to justify my cut so how do you want to justify the space between your couch around or between well yeah actually I think that will be a bit the same but let's try the one he wants prefer a space between okay and now the only thing I need them so what are the Flex items of these flex box okay give you 10 seconds what are the items of these flags box the cup container flexbox yeah the card right this one and so if I want to set the width to 30% why do I do on this card flex okay 0 0 30 percent so if I do that on this one and what is cool is again it's not responsive for now okay so we'll do the same so I will I will just take the same code as for the the blog post just web the media query and where it's there and share I want to change the Flex behavior of my card okay so let's say I don't know on it will be 50% if I'm on a laptop ok and maybe below the iPad I will be one red person okay and let's forget about it will remain that even on a mobile okay it's a one red percent below that so if I do that if I get below 960 by Baba it's 50% on and then it's oil check that's okay it's not working that much why doing that maybe it's because of the margin I put oh yeah why cuz I'm stupid because it's not which it's cold can I'm really stupid it's I don't it's not to which it's a flexible body I want to alright okay so it's flags and here it's flex it's not to container it's a flex items okay so 150 and okay it's not a puzzle okay so that's not a robust responsive lid is just for you to understand that building a breeder of cards which text box is not that complicated of course it will like require a bit more more code to make it robust okay do you have some cash question about this layout so the cool thing is positions TG just to show you you don't have the scroll bar on this part you can scroll on all the page basically okay I can scroll even if my mouse is hovering the map I can still I can still scroll basically on the page I don't have to go there and scroll there basically I can scroll wherever I want iron on the page okay so position sticky and for the grid of curves here we use flexwrap that's what we've done so that's that's it so now let's try to do another example of : layout zone so you all know slacker to chat up and basically our role will be to design a clone of slack in maybe 15 minutes okay that's all a missional so I won't do exactly slack okay it will take a bit more than just a minute it's a baby version of a slack and again let's start to see what we have as the boilerplate so I call itself 12 service because for me it's kind of a software service laid out and found of a month own well it's like that song it doesn't really look like slack right it's just a list of channels that's just a list of text on an image an 8 header the path of text an image header the path of text and here a bunch of photos some icons with text okay so row text that we need to structure okay already you want to breathe the bit so let's go so let's start again with the HTML so now that we've seen the result we just want to inspect the code so it's in this file on so try to comment that with me it's exactly the same that we've just seen on the page we have is the path value speak a bit because I need to drink a water so it's a it's a list and each list item is a small front of some icon oh okay just to model if it's a private channel or a public channel and the name of the channel Berlin staff marketing okay what do we have here yeah we got to a message so for the month I didn't code the design of the message who is just an imager an h3 with the name of the username and the time of the message m and the text of the message okay I just put two example of message on and here I just put a diva with a file class and inside what do we have on this is the photo some icon for a PDF file PDF file or coding file yeah I do Talia so this tag is for intelligent but we are using a library called font Osama which is loaded here and this give you class that you can put on an eye and tagging and that's a way to have a font of icon it's a font so it's like a text it's like a fountain but instead of a you've got two Facebook icon instead of a B you've got I don't know Twitter icon instead of a C no no it's just that they implemented the library on the I tagged you just they decided to implement it like that they could have decided to implement that on a on the span on but you just decided to implement that on I so again let's do a bit the work of layout so what's the main flexbox well it's actually into all the all container how many columns how many flex items okay three so my old page is basically my Flex box with three columns Oh which one is fixed which one is growing the channel is fixed maybe the file upload is fixed and the messages is growing okay so that's my choice I decide to fix these two ones and make the middle one grow okay so let's cut this designer so you tell me what do I need to put yeah inside them what are the different columns how do you call the first one yeah let's call it side by it can be channel bow okay and inside this sidebar will inject my list of channels okay first column what the second one okay let me say just and inside them okay maybe we'll have to still show the message because the HTML of the message is not structured for the moment for the moment let's put the message like that and what's the last part so let's call it five pure rock so I call messages parole and five parole okay it will be more convenient in the CSS and inside my shot : I inject my different jiva for each file okay so I won't do the responsiveness of this layout okay it's a homework for you will do the basic button app and app is not supposed to be ready okay let's say it's for web news age so you see for the moment my CSS is very advanced it's an avatar I just have one class to set the width and the reduce for my this guy javits ah okay is the only CSS I have is on the avatar for now now we have to cut all the rest so where do I start so what is the Flex box is the main container sorry so I say display flex and it becomes a text box right what are what is the fixed item it's called it's called miss no it's called the sidebar and files and let's say this how do I set the width of this one flex zero zero okay okay we just put freaks out because I'm tired with the cotton page and this one has say it's a zero zero and whatever and the one in the middle is called may sages and how do I make it grow Flags grow one okay so let's see so it's a start okay and actually okay I think it was not is there was some caching so 200 pixel on 400 pixel under on the left and the remaining at the in demeanor so we've done the hardest part we've done the layout part no it's just like playing from C with the CSS rules so let's make the fancy part okay I don't know if I have a slack open I will cheat an openstack to clone it right I hope it's not too sensible channel let's try to find so so maybe that's gone down so we don't have the main navigation for switching the board okay we just do the channel navigation if it's loading commands like wake up it's called shadow loading pretending to put the structure of the page but it's just an imager okay so nothing sensible you just a drink at abouts whatever so here we don't we don't care about this part okay we don't have this part in the layout we just want this bottom and the channel let's try to analyze a bit of design okay we have this kind of slack properly for the background of the sidebar what size is the sidebar 100 eh fooled full screen the color of the of this is white with a small opacity on the icon okay yeah okay so let's do it so I will steal the color here because I'm cookie cations okay so sidebar background oh and slag color what else what's the height 100 VH what's the color white how do I select the least inside the sidebar side bow okay this one done select all I select the list inside the side box so I will just kill on the bullet points o chillen do not do padding left because there is a natural padding left on the analysts that's how it's designed by default and I will put some matching top let's say my margin top on my list it's a salty pixel how do I select the list items on sidebar Li and let's say I want some padding so just a bottom maybe 10 pixel and 25 pixel right and left okay so let's try to see if i refresh I got something like that how do I design my list item so maybe it put the font-weight:bold on my list items on and let's select also the photo summon you remember photo some of the icon it's on the Italian so I can select the iron and put an opacity of 0.5 just to contrast the icon with the texts okay and if we do that you just putting some contrast okay between the icon and the test and also actually I think the icons they don't have the same width so maybe I can set the width of the icon who can 15 pixel or just to have some alignment okay of the channels so that is my channels what do we do next let's do the Miss agent for the message there is a bit more work because for the moment we don't have any box for the message okay it's just image H h3 and para have text we need to put some Deva around okay basically you've got the icon here on the left and then on the right you have the name the username with the timer and below you have the text so actually we will design the message each message as a flexbox first item will be the avatar seven item will be the name and main message okay so let me take this one so how do I call it so this is messages on so let's each message will be massager first sex item will be the avatar and segundo let's call it message body containing don't use on mo and the text of the message okay so each message is a flexbox wisdom one item which is the image and one item which is name and description okay if you want and I just wanted the exact same structure for the second one we put the image as the first flex item and we take user name and message inside the second flex item okay now let's cut it so so it's called what my message is called message okay and it is a text box so display and flex and let's make some quick design on so if I select in the message body the left color the right color now if I select the h3 maybe I just want it to be smaller because it's a bigger h3 I just want to make it from size 615 pixel and also bless you here you see around the time I were to span here okay so maybe I can just select the span and give it an opacity same technique okay just put some transparency and maybe also some contrast on the font weights so just some light font weights font weights to contrast with the username so let's see so for the multi like that one not too bad but actually I've got some matching top on my powers of texture I want it to stick to the top so maybe I will not also select my payoff of text this one and kill the matching top okay to align that at the top of the why is it like that I should not it's all right it's not a P it's a ch3 right so it's on my h3 that I want to kill the matching top so let's refresh okay and what remaining is this text is a bit too big so I will select it so this time it's a pig okay it's not an h3 so this time I can select the P cut the margin top cut the margin top and also put the font size which is more message from size like I don't know okay let's put also 15 pixel alright and last thing we need to do maybe if I take all the message body here I can just put some padding yeah left okay so it's a bit spaced from the image so on the message body hop some padding on the left and finally maybe if you need to breathe a bit write the message that all sticking 1/2 inches on so maybe some put some margin on the message giver and let's say it's 30 pixel top bottom and well let's say such a big cell everywhere just for photo try okay and I don't know maybe it's because of this one okay maybe I can kill the matching top bottom of the h3 as well okay it's a bit too spaced so actually I will also kill or put it I don't know how much but let's try to kill it the matching bottom of my header okay and it does look like a flag message a bit the final pattern to the right path so maybe let's cheat and do a simple Russian so more something like that okay so I just cheat and take the color what the hell okay it's a kind of a light gray and if you and I analyze sorry let's describe the design to get down I don't know if it's really clear but we have a photo photo some icon that is billion and different colors depending if it's a PDF or video on the files even there is a light butter with some border reduce okay light border for each file on and the font weight is bold and small for the name of the file everyone has that in mind so let's try to reproduce this so how is it called the right path it's called files it's this one right so this one on first starting with the background the light gray background what's the size the height sorry exactly 100 vho and that's it now let's design the file so maybe before the file is designed the h2 there is the main tag like there is a title on the section right so it's in files on h2 and I will just put some I don't know font size of 20 pixel and maybe I don't know some margin of such a big cell because it's so typical on the other ones own and 20 pixel actually I don't have a title I was a bit dreaming up but maybe put a title maybe all files okay there is no title for the moment I just delete that so maybe before the thighs here I put the title on h2 all files okay because if there is no title the user does not understand okay so I've got my title and now I need to design my file box okay my file boxes so again I can make it to sex box right one item is the ICO your item is the is the name of the file so here we go what is the class name dot oh yes sorry so the test it's called file oh yeah file on so how do I make it the flex box display flex on and let's benefit from that to put some marginal so let's say 10 pixel 10 bottom and 20 pixel I want the same left margin than this one for the h2 right and also let's put a border so a small one about one pixel of Bodom solid border and let's put a light light gray so let's start with a black and put 0.1 of capacity okay to have a really light ball down and also I want to align the items of my text box so the a line items remember it's not the original space is the vertical space so it's to Center the icon with the text is the one we haven't really used so you can say a line item Center and let's try that okay so it's like that what can we do maybe some padding on the file on right because everything is sticking to the ball down and now we need to design the icon so maybe we can put different class whether it's of a video or PDF okay let's click file PDF and this one will be file cut off sorry it's a cutting file say it's Ruby as it's a ruby file actually Ruby and file PDF okay so how do I select I can select the file on okay all my icon I want them to be bigger so let's say from size 30 pixel and may need margin right 10 pixel and how do I select only the icon inside my thigh video PDA sorry I said that's I put the class file and relay an element which has both the class file and PDF and inside isolate my icon oh and I put a color red okay and if I want to select my coding file I can say phyla code and inside I select my eye and Tyga and I make it blue kiss yeah sorry oh yes thank you that's why it's not working thank you that's a nice a nice body in the audience okay so dr. Shi T okay maybe let's put okay well set that bad let's put two nice so a nice circle oh it's a bit small but let's take this one for the bloom and well let's do red is fine and the last thing well if you want you can put a bit of border edges here okay just to soften the corner of the of the file but what about if we have lots of message so let's say instead of two messages on that's why we need templates instead of to message Adam I've got lots of them so look so we could use sticky but here I show you another way of doing them if you really want to scroll here because maybe we want to be able to scroll differently in the different section so if we just want to scroll on the way on the main on the middle page on well I'll show you it works you can say what's the main section is called messages that's this one you can say height and you also said that 200 VH and you say what's overflowing on the y-axis what's what's overflowing my page on the on the vertical axis I want it to be scrollable okay and if you do that you can scroll here but you can't call here or here because maybe you want to scroll differently on the right section with files okay we've done the half but I hope it's still recording you what no problem with the video guys okay cool yeah any question yeah no my sidebar is a night Emma is the first yeah okay so each file here is a two item flexbox with the final image okay so let me yeah so if I you easily it one message here this one this is the Flex box and I'm sorry the files the files this is the effects box first item is the iron second item is the text you don't need you put you can put a Spanish you want but you don't need text box is really smart you don't need to take it but yeah it's matter than all of us but yeah it's basically here you have two items first one here and second one here yeah because it depends you can't fix really the weeds because it depends on the it depends here a bit on the size of the you basically want to fix the two other ones and you want it to take all the remaining space to set the width you don't know exactly what it will be okay so actually it's pretty advanced but so you see with flexbox it's a really if you just know how to fix the height and use this position sticky another flow you can really quickly build some column layouts you still have a bit of energy okay so we've seen row layout so we've seen : layouts and now we'll see grid layouts and when I speak of freedom I don't speak about with we've just coded a grid right the grid of flats you remember with specs rap so here it's really advanced with because otherwise we can use flexbox as well so what I mean by advanced sorry let's go down what I mean by grid layout so is we have at the same time some section that takes different kalonzo and subsections that takes different rows okay it's a mix of the two and basically the natural way of doing a column layout is flexbox the natural way of doing grid layouts is using CSS grid that's also new CSS properties and I find it's more easier than text box actually yeah you will see so you can you go to on can I use that come on switch but yeah yeah I don't guarantee that everything is to button on really old stuff you need to check that so first this is the 101 of flag freedom so remember how do you make an item how do we make a diva flexbox you say display flex how do you make something a gradient you say display grid so far so good and the first step is to define the different color than the different rows of your grid okay it's the first step and you do that with grid template Collins and grid template rows so let's try to translate that into English here I say my colons I got for Collins oh you see the color here the first one is taking a look at the code I've got for : so the first one is taking 400 pixel ax and then I've got three colon that each take one fraction of what remains okay and on the other axis how many rows do you have on this grid three rows on the first one take 50% of the height and the two other rows take 25% of the heights okay so I just it's an example to mix pixel fractions and percentage just for you to understand that you can mix all the configuration but you don't basically yeah zero yeah but it would be that if it's just row we can put some basic Diva and if there will be position X rows you know like the first blog post we did you don't need this kind of advanced stuff if you just have some blog post layout just put Deva and it's walking alright the first step is to define the grid and the different colors and different rows of the grid and then you will see it's really cool because you can select any elements in the reader and decide how much : it takes how much Rose it takes where it's positioned so I give you a first example here I select the proper element and I try to translate the code in English I say basically this element it starts at the at the first row and it takes how many rows no yeah it started the first rows and it takes it takes one row only right and this element it starts at which : the first column and it takes no it takes two columns let's do it again this element is start at the first rows and it at the first row when he takes one row and it started the first Cardinal it takes two columns and so you can in CSS which we translate it's a grid Row one span one win : start at one take two columns okay also example I put a red one so this one don't look at this color just look at the grid it starts at which row first row and it takes how many rows three yeah he started first row and it takes three rows it starts at which column no 1 2 3 it tapped it started the South : and it takes how many colors no it takes how many columns one column okay start at first row take three rows start at Short color no take one column it's a gymnastic but sure you'll get it right it's where do you start and how many rows or columns do you take basically so basically doing that so you can position stuff wherever you want in the grid and also what is cool on you can have a media query redesigning all the grid on the tablets you can shuffle things the order in the HTML doesn't matter anymore you're free to redesign the grid the way you want on the tablet say that this one it will be I don't know like it will start at the fifth row and take whatever so you can really redefine the grid as you want on any device is it clear if it's clear will cut this one so sorry I didn't have time to find a real life example it's just the profile of my CTO but if we do the job so again I let's cut this one again I show you where my starting points so my starting point is called dashboard HTML and we if we open that that's the final life drive code after we can have a beer so if we go to dashboard HTML for now look what we have we have actually you recognize the behavior here so what do we have to opinion what the what's the stuff to some type content that we saw at the beginning yeah we have a container right you see that it's exactly it has some weeds behavior so we have a container and inside we have some basic Deva one for the profile went for some statistics and one for the description the futa okay so it's just some white cards inside the center container going back to the HTML let's verify that so we have a container here and inside and what do we have oh we have some actually I just put the cutter okay sorry I put the cut of the grid I should not have closed the eyes for ten seconds okay it give me just one minute let's go back here okay so I've got two container and inside my container I've got my white cards okay they are called dashboard cutter and I just put some different class to be able to design them differently in the grid the first one is main the three statistics they call stats and the final one called description okay if we go to the CSS there is a bit of CSS but actually it's just to design the white cards okay you see like the there is some design here green button green text box shadow so I don't want to cut that I just have the design of white card to start but all the rest is for us to build so let's start to create the grid so inside my container here I can inject my grid and I will call it - bot that's my grid and my video elements will be my grid items will be this - god cards okay the grid is dashboard and the dashboard card the other element of my grid so what's the first step is to define the grid so you remember yeah I say display grid on to make it agreed on how do i define the different columns creator templates left off with the rows sorry the Rossum so in the objective how many rows do we have that's my objective to and they take each how many percentage of the okay the same size rights let's analyze the two rows and each of them takes half of the grid and how many columns Oh one two three four maybe the first and non-obese the first one is set to 300 pixel let's say and the other one they are equal same one fraction okay so let's design this rate so grid template rows 50/50 and grid template columns first one let's say hundred and then one fraction one fraction of what remains oh yeah three bit yeah one fraction I think that and I don't remember the keyword you can look at Flex is CSS grid documentation but I think you can do something like that let's imagine you have a grid with a 100 fraction you don't want to write one fraction one fraction one fraction so I think you have something like that but for now I will stick to the stupid syntax okay what's the height good question what's the height of my grid oh it's a it's a one beer question you will find look if we win a beer so once B what's above here we've got the navigation bar so what's the size and let's say this navigation bar it's 70 pixel what's the height of my grader we've got a winner of the Year contest well read the H minus 70 pixel we've got to CSS genius in the in the class okay so and you can do that with calc okay coach 100 VH and I just show you that my nav bar actually wears it is there my novel height:70px oh okay it's a 70 piece in the back so I can say couch - 100 eh - 70 pixel okay let's finalize the greeter so remember I've got the main section I've got and I've got the description section that's the one that will be tricky so what's the main section you remember it's called grid row and here we say where it starts how many rows it take so main section you you see which one I'm speaking about is the one with the picture yeah I think it will be 100% by default but we can adjust I think it will take it will add calculate I could even take all the space so what's the behavior of this one where it starts at row Trevor it starts at Row one and it takes two rows so grid Row one span - and it starts at Cullen one and it takes one column so it will be read column one span one okay let's do the same for the description so the description is this one east eisah bit okay so let's take our time on it start at Row two and it takes no row itself at Row 2 and it takes one row only okay and it started : oh - and it takes three columns okay you got it so it starts at Row two when it takes one row it started : - when it takes three column all right so so so what is nice let's say we want some media query here okay so I will cheat I will just implement one media query which one I'm just to implementing maybe the the laptop media query this one alright so I first I start with the stupid media query below 9 9 - you are not you are not to have sex box no sorry you are not to read any more you go back to a block element a normal diva without to grid behavior so if we do that look I'm agreed on and below 9 9 to ID come back a normal stupid diva okay but you could decide on to actually say okay below let's make something we are below 9 9 to my description what can we say my description ok my sorry my main one is a one row span one okay start at one and take one row and it's one colon on span four okay I'm trying something I am Not sure it will work I'm not even sure what I want to build actually so let's say we want the full the full banner for the profile and where else and then below I just want to show that you can customize really the grid on the media query and for the description if you have an ID so it's now or never let's say okay you know what let's try to say what we want on the tablet on the tablet let's say we want to skip do okay the main one here the description here okay something like that so what could it be main one span one one span two and description one span one three spend two I'm not sure about that let's try to test okay but then I need them just so here I don't I need to adjust with my designer but basically this one is taking the two first columns on this one the two last columns oh okay I didn't think before about this design that's my point here the message is you can have a stupid or responsive behavior which is just I take my grade and I go back to display:block but if you want and if you have better idea than I have now you can also relieve override the responsive behavior of the grader repositioning all the elements inside the way you want basically okay any question on this so just for you to understand the magic the statistic here they go in the same order as the HTML I could select them and say this one is one span one two span one one span one three two and one and so on but by default if I don't say that they will remain the same order as in the HTML and say and there will be 1 1 1 1 by default okay that's why I don't have to write all the code for these guys but I could I could select them and also define the grid behavior right okay so that was the final life column so just a recap about we've covered a lot of different layout technique iam but it's good that you have this vision there are basically three categories of layouts layout by rows layout by columns and layout with grids for Roseau it's simple planes even the only thing is use container to Center the content dynamically it's important that the only seems to really know on a row layout zone for column layout so well use flexbox because it is really the best pattern we can use for this you see it really powerful and that the current layout is 95% of the layouts you will build on an app on the product and from hit layout so it's not that useful because dodgeball is for analytics that both are really advanced page structure but for that the CSS grid is really straightforward you define a grader you define the elements inside and that's it's basically alright thank you very much [Applause] [Music]

Channel: Le Wagon

Views: 26,610

Keywords: dev, code, tutorial, bootcamp, workshop, frontend, js, html5, css3, design, web design, product, html, css

Id: 2GxAElWKaAo

Length: 91min 16sec (5476 seconds)

Published: Mon Jan 15 2018