What's new in CSS? Introduction to CSS Grid and CSS Custom Properties

Slides: https://thamas.gitlab.io/css-grid-custom-props/

CSS Grid is the most exciting layout feature which became part of our available CSS toolset since Flexbox. It allows us to get rid of the hacks and workarounds we used to use in the past. It brings simplicity to declaring layouts. And while I mentioned it with Flexbox you do not have to choose one or the other! You can use them together (if you want).

CSS Grid gives us powerful new abilities: it is bidirectional so the layout can be aware of both horizontal and vertical space at the same time. It also lets adapt to the available space without the need for media queries.

And how about CSS Custom Properties? I'm sure that you are familiar with variables in CSS preprocessors eg. in Sass. Custom Properties are a similar but more dynamic thing available directly in CSS. And they can be used in any preprocessor too if it is needed. And you can reuse preprocessor variables in the native ones.

And… and if you are interested, you may want to come to this presentation… I will introduce you the new syntaxes, I will show you some basic and some little bit more complex examples which you can adapt to your own tasks. I'll show you too how to use these new things without worrying if they will work in the targeted browser

Concerns?

You may say, ok-ok, but how about browser compatibility? Good news! CSS Grid has arrived in Safari 10.1, Firefox 52, Opera 44, Chrome 57. And it is available in MS Edge behind a flag (currently). CSS Custom Properties are supported by all modern browsers too.

You may also afraid of learning a lot of new syntax. But you only need a fraction to get started. And it is not so complicated.

Well, you have a lot to win and nothing to lose. Do you need anything more?