 So well, hello everyone. Thanks for attending Let me make a small challenge for you The challenge is about that you should imagine that you are a front-end developer Yeah, I know it's hard, but try to do it. Okay, so you are a front-end developer and You got This nice wire frame from your designer That's okay. It's nice. You like it, but it has some requirements Let's see The title in this hero may be one or more line longs, of course And the title as you can see overlaps the image, but the teaser text aligns to it The text the title and the text should keep this layout even if there's no image You have to keep the same layout All and This image is part of the content. So it's an image tag and not a background image And if it's not enough the height of this hero depends on its content length It may be dictated by the image or the text Which is higher oh? And this just a desktop layout, but I think it's enough. So I won't talk about now about the mobile layout. I Know you are smart front-end developer. So of course you can do it, but how will you do it? Maybe You will use absolute positioning We like absolute positioning now. We don't like but we have to use now and We will use Zend index you will use Zend index and some margin and padding tricks and a with declaration using some cock and That's it or You will use something else If you don't want to deal all with stuff all this complicated things Maybe you will use CSS grid. I Hope You are here because you are interested in using CSS grid. So welcome everyone. My name is Tom Ash Hoyosh I'm a Dupal and web project manager and the front-end developer, too I work for integral vision limited in Hungary This is a small Dupal agency But a well-known Dupal agency and I work for them remotely, which is the best way to work. I think You can find my online name card at tamash.github.io So and today I want to talk about two new things in CSS and the first is CSS grid These slides are online So you can find them at tamash.githlab.io slash CSS grid custom props. It is important. It is githlab and not github So you can check this you can follow along or check just quickly and if you find it's not interesting You may leave but I hope you will stay here. I work on this So I'd like to ask you don't try to learn Everything today or don't try to remember everything. It's not possible and it has to useful instead. Please focus on Understanding I will show you some examples, but these topics are much bigger. We can't Check everything in this little presentation So we were talking about that we could Create this hero when we could simplify this test using CSS grid. So just check this image And you can see if we have a grid with three columns and two rows and we can place items Into these columns and to this rows into these areas or problem is solved So who will we do it? I won't show it with this but a simple example, but before we go into the details. I Have to say some words about CSS grid and why is it important? Before CSS grid all or web layout methods are some kind of hacks We use tools and route a lot of code HTML CSS just to be able to create the needed later But where they were not intended to create these those layouts what we created with them The first real layout tool in CSS is the CSS grid and it has some new things The first is that it's two-dimensional is true truly through we measure now Which means you can align items in columns and in rows in the same time and the no other tools in CS Which can be able to do is this is the first one and the other thing is that is layout on which mean Layout in and then content out which means you create and grid and place items in the grid So let's see an example how to start Here's an ordinary page nothing interesting here We have four section a page title a main content and a side and the footer and All of these are in a container div. It's really simple HTML structure. We want to create grid layout from this how to do is the first step is Just define or grid container and we do this Just using the container selector and this display properties set grid. That's all we have to do We did it and voila Not in change. Oh Did we miss something of course not? in The background a lot of things happened When we set display grid it just created a grid container and all the direct child and of the grid container became grid items However, the grid items are placed in rows by default and span the full width of the grid container So now we have a real grid container where they have a real full grid But this is the default display Of course most of the time we don't want elements under each other on wider screens So we want to create columns So we define columns how we do this This is the grid template columns property I set it and I created two columns You can check it We have two columns Maybe you wonder what are these FR characters there? This is a really new new unit Created with the CSS grid specification. We could use any kind of lengths while you so we could use M's Big cells or person, but no we use FR FR units represents a fraction of the available space in the grid container in this example the first column takes up two sections and Second column takes one section as you can see it and that's all we have to do Woman you may see too That all or item just auto items just automatically placed in this grid we have for items in two columns and You may see that too that we have two rows of items. However, we didn't Define any rows, but because The browser place all the items in the grid. It just automatically created Two rows for us to be able to place all the items in the grid container so You can see that it's automatically placed But maybe this is not we want so we don't want the main content in a narrow Sidebar just near to the page title. So we have to fix it somehow So we want to place items by columns we have our columns and We want to place or main Section and that's it we all we do it we define the grid column property and two numbers Let's show what we have And then go to the details. So we have now this layout We moved the main content just below the page title. How do you do it? I try to move here and Show you the grid itself What you see now, this is the grid inspector tool of the fire force developer edition Which I really recommend all of you who want to deal with the grid because it's really cool. So If you are close enough you will see some lines and These lines are very important. This is also a new concept grid lines. They separate the grid into fractions They are referenced by number starting and ending With the outer borders of the grid and these lines are these line numbers are used in this Okay, I will be back so in this Definition this means please the main content From the first line, which is here You can see the number to the second line which is here So it's really important if you use any kind of grid tool before You Maybe use to place items defining the columns or the rows No, we don't in CSS. We won't won't define the columns We define the lines in the grid the separating lines and that's we use the position the items So that's nice We like it I like to close That's okay. So a position or main content But unfortunately this layout is a little bit broken now or maybe it's sage at least so if you want to Place other items. Maybe we should place the items not just by columns, but by rows too So oh just forget to go back. Okay. Here we go Please site us by rows First we have to define our rows because we had rows but not enough rows So I use the grid template rows property and define three rows in this case The first row has an auto hate which means it is hate is dictated by the content and the three fraction hate and the one fraction hate rose Then I place my items in this rose and you can see that Grid items can spend multiple rows or columns in this case the main Section will start at the second line and end at the first line, which means it will spend two rows Also, the page aside will start with the at the first line and under the third line Which also means that it will spend two rows and As you can see it happened really So it's nice. We almost done everything we had to do. There's one last thing Maybe you don't want your sections to touch each other What we do now we need gutters Gutters in CSS grid called Grid gap. So we set a grid gap as there's no other thing easier. We just Define grid gap We can use any lengths value again. I have two numbers, which means the gap is 10 pixel between the rows and 20 pixel between columns and It is also important There's also nice thing that grid gaps are only created in between columns and rows not along the edge of the grid container That's it So I have the gaps and just between the rows and the columns now you know Everything about CSS grid everything every basic step. No, you will be able to create CSS grid congratulations, of course, there are a lot of more things in CSS grid Let me just show you some quick examples some more quick examples Here's the first one. This is a responsive gallery CSS grid and If we check this I Can move this and the item just automatically reordered and I wonder what do you think how many breakpoints did I use? Any ideas? five four three two one zero Zero is the right answer. Yes So just let's resize it back To be able to show the code for you zero break points and only three lines of code That's all we need to do this There are some new things here, too. The first one is the repeat function Here and this autofit and min-max these things are all new in CSS The repeat function allows us to specify the same value for more to multiple columns in the grid and it has two arguments the first one is the number of times to repeat something and Second one is the why you to be repeated Okay, so the first one is the number of times to repeat so there should be a number But there is no a number instead. There is autofit This is a keyword which can be used in the repeat function instead of a number To times the repeat this will flexibly change the number of the columns depending on the width of the container It is automatism which can be used very well and the second property is also a function CSS function is the mean Mac function It also has two arguments the minimum side and the maximum size in this case this means one item is 200 pixels wide minimum and one fraction wide maximum and that's all we have to do So let's see an another example is also CSS grid and it also have a nice behavior but this time And that's it It won't be reordered, but if you see the grid gap size is changing So, how did we do this? Let me see Okay, here we are Here's the code But it missing some lines So I will show you the first one Yeah So get column gap property has an interesting value It has war dash dash gutter also a root selector has a gutter dash dash gutter 10 peaks and in a media query or root selector has a gutter 60 pace while you What is it? This is our second topic CSS custom properties for cascading variables or shortly custom properties or CSS variables so These variables are very similar to preprocessor variables. They contain specific values that are intended to be reused so the Really important part is that why preprocessor variables are static. So you create a variables and when CSS created from sus or less there will be a static value But CSS variable CSS custom properties are dynamic. They while use can be changed at any time Let me show you the syntax. It's really easy. So we Just have our query word or definition and preface with two dashes It's maybe ugly, but very useful. It's just like the browser prefixes without the browser name It's the same really the true story. This is the source of this format So this is how we define a custom property and We use the var function to call this property anywhere in our code We can define anywhere or custom property But it is important that it has to be defined inside the selector and then we can use it anywhere and if you look at that rule thing and You are not familiar with that is just the identity code in HTML to the HTML selector But it has a higher specificity which is useful for us because CSS custom properties and these values are inheritable. So it's good to have a Good specificity some more science syntax There's the shoe color semi-colon. This is invalid because we have no where you how I wear Column space Semi-colon is valid because the value is an empty space interesting Also, we can use Custom property as a value and other custom property So this is valid Horror dash dash lower case who is not equal to dash does uppercase who because custom properties are case sensitive so Another concept fallbacks CSS variables can be set with the fallbacks if the variable is not set. So when I call The variable and this while you is not set then the fallback value will be used This is the fallback value So I have a box and if the main color custom property is not set then this box We use the green color of course I can use a CSS variable as a fallback and this CSS variable can have its own Fallback and I can change them any times I want but please don't be crazy so Let me show you some examples For example using custom properties, I could create a Custom property to our possible value of the box shadow Property so I can define box shadow X X and then I could define the epsilon blur spread color and all them And you can see that I defined the property with the value initial This is to prevent inheritance initial means Just use the initial value of a custom property But custom property can't have an initial value, which means it will be nothing. So you won't nothing will be inherited This is big importance not to set everywhere and everything Then I call the box shadow Custom property in the box shadow property and I set the fallback Zero so by default nothing will be shown I can do this for the why blur spread and all the other values of the box shadow And when I want to use the box shadow, I will just Redefine those custom property values, which I want to use so I set these three things I get and I've got this orange box and If I want to change for example the heart color all I have to do just to change the color Property and this will work. I hope Yes, it works That's all so this can help to simplify or code and or to customize our code Just to use what we want. We can create long hands and short hands and a lot of variations And let me show you my favorite example Some eyes and These eyes if I'm right will follow my mouse. Yeah, that's it. So I'm looking at you be careful So, how did I use it? The first thing is Just some JavaScript code I won't go to the details But what this short snippets is do is just get the position of the mouse and Save the X and the epsilon position to mouse X and the mouse epsilon custom Property so the why use I said these two CSS custom properties and then nothing to do Just I use these why use to set the position in CSS and because Custom properties are dynamics as I change the value as I move the mouse the values changed and the position also We change that's all easy simple short code nice One recommendation Don't use custom properties just because they are modern use them with purpose Because custom proper if you don't do this and you define a lot of custom properties just because it's modern and fancy You may have performance issues use the right tool to everything And think that's all I Really recommend racial and you Representation articles and the fantasy grid by example comes side if you want to learn more about CSS Weed and I also had a good use of the CSS variable war subtitle presentation of Lee Leo Rero is nice. It's good to check if you are interested in in more details Of course, please join us for contribution spints tomorrow And please tell me and all the organizers. What did you think about this presentation? I'd like to ask you if you didn't like this presentation Tell me but if you like it tell everyone tell your friends and all others and really please please please really give feedback I really it will be happy to get any feedback. So that's all thanks for your attentions and If you have questions, I'm happy to answer Hi, is it possible to create rules between columns pardon like rules like lines? Yeah So what is the question about rules? Is it possible to create create rules between columns? Rules between columns line lines. Yes. It was the grid gap property Is not lying. Oh, yeah in the middle of the gap Oh, I think so then you won't use the grid gap property because it's an empty space So you won't have gap, but you use another element or something like this and give margin or padding to that So the line would be a rule. Yeah, okay. Thank you never tried it, but I hope it works Just in terms of like checking a quality. I saw you said like foo equals foo, but one's up again Yeah, how does that work with like colors? So for example if you do like zero zero zero, is that equal to six zeros or is it different because it's like You know, it's the shorthand version of the property. It works any kind of why use what it why use what is serious? That's why you so can you use a shorthand or the long hand too. Okay. Cool. Thank you In some of the examples you shown us that you can put it from grid one to two or two to four Yeah, and you have horizontal and vertical versions of that. So what happens if you only use the horizontal? Positioning but not the vertical like how does it what does it do when you don't specify what you want? Any any why you that you won't specify will be specified automatically. So if you You don't have to specify anything you will specify just your need even it is possible if you want one One column wide item it's enough to specify the first where you so the starting line or in the column or in the row So and everything else we will be defined automatically. So basically one line is default. Yeah Oops great great talk. Thanks. Thank you very much. What level of browser support? Oh, I just waited this question So browser support is great it's about Above 70% general and all modern browser supports CSS grid and also custom properties of course, there are some gotchas and Edge has some ideas about great support, but It's worse to mention that the first version of the CSS grid was developed by Microsoft yes and Still Microsoft Microsoft still uses the all specification, but it supports the new version behind the flag So it will be supported soon. So I think it's safe to use and there are a lot of ways to Overriding if it won't work or if you have to support all browsers But it was to start to use it and find ways to support all the browsers if you need that That's all Any other question? So that's thank you very much. I asked you to if you understand if you interested in CSS, please stay here because you can hear about the future of CSS from repel in the next presentation Thank you very much. That's