Hello, everybody.

My name is the fine Angela.

I'm front and develop an illustrator.

I'm from Madge in Colombia and this is my first time in Berlin.

I love Sharon on learning New information about technology on the Colombian tech communities have been a source of inspiration for me in Colombia, we have about 19 tech communities providing the spaces for innovation and collaborative learning emerging.

I'm one off the leaders off.

Imagine CSS community the first on only CSS community in my country.

Ah, community with more than 1000 members.

A community that creates positive change on advocates for the future.

Today I'm going to talk about CSS Logical properties in C s says we have a lot of cure suis cry physical positions such as left, right, top and bottom.

Let's like this image.

For example, if we want to move on element off the screen, we will use a container with our elected position.

The element with absolute position top 50 pixels on right, 50 pixels.

But of course, moving on element is no.

The only thing that we want to do, we also need to work with other physical properties such as margins top bar the bottom, but left.

This property's come naturally.

If we are working in an English grading system for us, there are region in a Web page is Stop left because we drive from left to right.

But have you ever thought how our layer will you look in a different writing system in a different AL from it, for example, in Arabic, Hebrew Impression, Big right from right to left on, the origin of data screen is stopped, right?

So what you will see on the left side on the English writing mode you will see on the right side in an Arabic hero, um, passion writing systems.

Consequently, working with physical properties can become a problem if we want our layout to work in many languages.

I just mentioned the words granted moat, but I want us to look at how does the specification works on what we can gain from it.

These grading Moz can help us better understand CSS greed.

Flex books on the work involved in creating a Web page in a new language.

The granting mode affect bust the organization on directionality in our weapons.

So the grating note is the first building block off its design that we create.

C S is is able to support many different international grading systems systems that right from left to right social, the Lapine's.

This is the most commonly used writing systems around the world, with more than 2500 million users.

Systems are right from left to right switches.

The Arabic grading systems.

This is the second most commonly used writing systems around the world.

It is used in many languages around the Middle East, Asia and Africa.

Systems that are bi directional.

This other combination off lateens on Arabic a bit systems that are very close.

So socials Asian characters because CS and support all these many languages.

There are five possible grade remote options already.

Santa Baby.

Very cold are very cold.

R l Sideways L.

R.

On sideways are ill.

Agrarian mode in CSF is determined by the property's off right in both directions and picks orientation.

It is mainly fine in terms off blood flow, direction on inline best direction.

So let's look at it and see if this works.

If you have worked with CIA says before, you might be family with this plate block on display like if we are in a very full running mode, we will see that by using this play block all the elements are placed very Cali from the top off the page to the bottom.

But if we use display in line, we will see that the elements are placed inside my side from left to right.

This is there a line based relations within the case.

How we rest alright.

Both block underlying concepts will help us understand.

CIA says Logical preparation Let's take a look at some examples for the flame battles.

Ready mode.

Horizontal TB.

Horizontal TB is the initial value.

The text is displayed from left to right, with electoral direction from top to bottom, both degrading.

Both.

On the typography mode are horizontal writing mode.

Very color are ill.

The text is displayed from top to bottom.

We have luck flow direction from right to left, both the grating most on the typography.

Both are very cool writing.

Most very Kal El are the Pax is display from top to bottom.

We have blood flow direction from left to right, both the grinding both on the typography.

Most are very good writing mold sideways air are ill that Max is display from top to bottom, with a blood flow direction from right to left.

Degrading.

No, this very cool.

But the typography mode on the symbols are placed on the right side, writing mold.

Sideways, ill are the text is display from bottom to top.

We are blocked field direction from left to right, the growing more this very cold.

But typography mold on symbols are placed on the left side is important to consider the compatibility between running mouth on dozers.

In this stable from Cana use, we can see which grocers are compatible with growing more property.

Everything shown in green is the support of Beijing, but in some visions off from safari and open, the color red indicates it's no support.

Yet Another consideration is that some emissions in a peck fix like Web kid or M s to be able to use ready more property.

And you can look up here in this upper right hand where it says global in May 2019 is 19 7 that 16%.

That's great.

Another important property off remote is direction.

The erection properly defines how inline content, such as the collectors in a paragraph paragraph flow on the screen.

It can have two values left.

Right is affairs one on the other.

One is right to left.

CSS Logical Properties automatically now mock layouts to a contradiction said with the deduction on the great ray remote a property before we use physical position.

Toby Layouts.

But more recently we have a started using a new approach to building the yachts.

Flex Books on C S.

Says grief.

Let's take a deeper look into flex books on the logic involved.

Flex books doesn't take into account physical dimensions socials left, right, top and bottom.

It uses values like Flexes start on flex, and these values rely on the deduction off the main uncrossed access, which we're using flex books.

This is better, because concept like start on air up in our relative in flex books and can be easily flip here.

We have an example of flex books in action.

The first thing that you need to do to create this example is the Find the Container with display flicks my before all the elements are placed side by side from left to right.

If we need the elements to be placed very column When it to us another property to the container flex direction.

We need to keep in mind that Flex books is a single direction layout concept that is, the elements can be placed in various anti rose or medical columns.

For this reason, Flex direction has four different values.

Rope row is very full.

Bali on depends off their direction off the on they reading mode property.

If you are in an lt our direction, you can see that the elements are placed side by side from left, right.

But if you are in an er t direction, you can see the elements are placed from right to left.

Role rivers is the same concept like rose.

But in this case, if you are in an lt our direction you can see the elements are placed side by side from right to left.

And if you are in an arty L direction, you can see the elements are placed side by side from left, too.

Right column is the same concept like Roe, but in this case, the elements are placed a top to bottom uncle hungry.

Where's is the same that Rory works, But in this case, the elements are placed to bottom with only these two properties this play flex on flex direction.

We can see the magic in this example.

I am when the bottoms changed, so the values off the ground and more property in horizontal TB Berrocal l.

R.

I'm very cold.

Are you in flex books?

The behavior of the lines depend off the flags.

Direction property, for example, Justify content.

A lengthy elements horizontally if flex direction is RO or a relapse, but very Kali if the flow direction is column or courage column rebates.

This is the really beauty off flex books on This is the beginning off the logic concepts in our layout justify content.

Property can be.

Take five values.

Flex, start, flex and center is space between on the space around.

But let's focus on the 1st 2 flexes start on Flix in this expense.

In this example, you can see that this start on end concept changed.

Dependent off the great remote property.

After flags books, the most powerful layer systems appear CSS green.

CSS Greed is a two dimensional system created specifically to solve the layouts problem.

We have been hacking a from a long time CSS great does saying No.

Left, right, top and bottom.

Nobody basically see essays.

Grip flows the same logic.

ALCs Place books.

You can define their position off the green items with property socials.

Green rod We start or Green called column and seem related to flex books.

CIA says Great also has a logical properties instead of physical points.

Let's take our Luca warning.

Some together started.

You have defined the container.

We display greed, the elements with also for coordinate the elements you need the container.

Define with reed template columns or greet unpaid rose to place the Children into agree, we need to define each element's with grief.

Column start one read column and two green row start one angry through and or use a sure hand like Rideau start it slashed, and real role is that they're way off thinking in CSS Logical Properties.

A very important scene in CSF is the book's model we use.

We are used the box model show on the left side on the screen.

This is not wrong.

This is the still correct but in But in order to use the CIA, says logical property, we must stop thinking in terms off left, right, top and bottom and replace them with Linus Star in line en bloc.

Start on block and you can see this change in language shown in the Ciccone box model.

Now we're going to the stools property.

These two concepts block honest are on line.

When we are working with a logical properties, we start understand the block online access as we should do these way of thinking off our layout begins to make more sense.

Now, our logical properties will be like the least shown on the left.

Margins on the left.

Off this table, you can see the name off the property off the physical property.

Martin top, Martin left margin right on.

Margin.

Bottom on.

In the right side, you can see the equivalent off these a physical property, for example.

Off Martin top deck.

You, Alan, is margin block.

Start in a logical property at the same in margin, right?

The key Whalen is margin in line.

This is an example of margins.

In this case, I use margin block.

Start properly and we can see how it changed when running mode property change.

You will want to keep your eyes on your own.

The space between the first block on the second block.

This is the murdering look bodies.

This is the same off margins on the left side.

You can see the properties, the physical properties socials, but in top, parting left, partying right, imparting bottom on their right side.

You can see the logical property, the camel and logical property social as padding block Star black Polina Lina Star falling in line.

And I'm Malin Block here.

There are, um, some examples for products.

Again.

You can see how bad things change when they grow remote.

Change the container.

Hughes is showing their purpose on the shy is representing with them with the border in color white, there are poor people.

A outside, off the white dots is the party board.

There's in this table.

You can see the off the left side, the physical properties.

This is a little bit a complex because is the border top on?

You can place the size or style or color on the same.

The logical property, the logical accumulation Property is border block a star and you can save them besides style or cooler.

This example off bird, there's might be a little more complicated.

They're different colors off the border shown here will help you track how day they change differently with the red border.

I use the border in Linus.

Start property for the purple Border.

I use the border in line.

Start properly on the second day are there look with yellow border?

I used the border.

Look, positions on the left.

You see the name off the property as used off the old books?

Mordor top left, right on bottom On the left side, you can see the logical property cabling like inside block start instead in line.

Start inside in line and are inside block just like running mode.

The compatibility is important and again, some vacations need a wreck.

Six on you can lick.

You can see on these up around Hung when, say global, he's 19 to that 49%.

In conclusion, we need to think in ways off Create webpage that accessible to everyone.