[Music]
hi hello everybody my name is Stefan
Aguilar I'm fronting developer an
illustrator
I'm from made in Colombia and this is my
first time in Berlin I love training and
learning new information about
technology and the Colombian tech
communities have been a source of
inspiration for me
in Colombia we have about 19 tech
communities providing spaces for
innovation and collaborative learning
imagine I'm one of three leaders of
maize in CSS community the first and
only CSS community in my country a
community with more than 1,000 members a
community that creates positive change
and educates for the future today I'm
going to talk about CSS logical
properties in CSS we have a lot of
keywords to describe physical positions
such as left right top and bottom let's
take this image for example if we want
to move an element of the screen we will
use a container with a relative position
the element with absolute position top
50 pixels and right 50 50 pixels but of
course moving an element is not the only
thing that we want to do we also need to
work with other physical properties such
as margin top bar the bottom padding
left these properties come naturally if
we are working in an English grading
system for us they are written in a web
page is top left because we graph from
left to right but have you ever thought
how our layout will look in a different
rating system in a different alphabet
for example in Arabic Hebrew and Persian
vague right from right to left and the
origin of the screen is top right so
what you will see on the left side on
the English reading mode you will see on
the right side in an
Hebrew impatient grading 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
grading modes but I want us to look at
how these specification works and what
we can gain from it
these riding modes can help us better
understand CSS green flexbox and the
work involved in creating a web page in
a new language the gradient mode affect
both the organization and election
allottee in our web page so the grading
note is the first building block of its
design that we create CSS is able to
support many different international
grading systems systems that rise from
left to right such as the latins this is
the most commonly used writing systems
around the world with more than two
thousands 500 million users systems
derived from left to right such as 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 these are a combination
of Latins and Arabic alphabets systems
that are verticals such as Asian
characters because CSS support all these
many languages there are five possible
career mode options horizonte tbéamé
vertical l are vertical RL sideways l r
and sideways r l agrarian mode in CSS is
determined by the properties of reading
mode direction and text orientation it
is mainly defined in terms of block flow
direction and in line based direction so
let's look Iranian CSS words if you have
work with CSS before you might be
familiar with display:block and
displaying
if we are in a default grading mode we
will see that by using display:block all
the elements are placed very curly from
the top of the page to the bottom
but if we use display:inline we will see
that the elements are placed
side-by-side from left to right this is
the align base duration within the case
how we read read and write but block and
align concepts will help us understand
CSS logical properties ahead let's take
a look at some examples for different
values rally mode horizontal tbh
horizontal T beam is the initial value
the text is displayed from left to right
we have locked row direction from top to
bottom
both the grading mode and the typography
mode are horizontal reading mode
Berrocal are L the text is displayed
from top to bottom with a block flow
direction from right to left
both the grading mode and the
typographies mode are very cool reading
mode very kal-el are the text is
displayed from top to bottom with a
block flow direction from left to right
both the grading mode and the typography
mode are vertical running mode sideways
L ll the text is displayed from top to
bottom with a block flow direction from
right to left the grading mode is
vertical
but the typography mode and the symbols
are placed on the right side running
mode sideways L are the text is
displayed from bottom to top with a
block flow direction from left to right
the growing mode is vertical but a
typography mode and symbols are placed
on the left side is important to
consider the compatibility between
running mode and browsers in this table
from Cana use we can see which browsers
are compact
malinka remote property everything shown
in green is the support of Belgium but
in some versions of Chrome Safari and
opera the color red indicates it is not
super yet another consideration is that
some versions in a peck fix like WebKit
or MS to be able to use running mode
properly and you can look up here in
disappearing huh where it says lowell in
May
2019 is 19 7.16 percent that's great
another important property of Reading
Mode is direction the election property
defines how inline content such as the
characters in a paragraph the paragraph
flow on the screen
it can have two values left to right is
the first one and the other one is right
to left
CSS logical properties automatically map
layouts to a constant Direction cell
with the direction and the gray very
mode a properties before we use physical
position to be layout but more recently
we have started using a new approach to
building layout flexbox
and CSS grid let's take a deeper look
into flexbox and the logic involved
flexbox doesn't take into account
physical dimensions such as left right
top and bottom it uses values like flex
estar and flex and these values rely on
the direction of the main and cross axis
which we using flexbox this is better
because concept like start and L are up
in are relative in Flex box and can be
easily flipped
here we have an example of flex box in
action the first thing that you need to
do to create this example is define the
container we display flex by default all
the elements are placed side by side
from left to right
if we need the elements to be placed
very column we need to add another
property to the container flex direction
we need to keep in mind that flex box is
a single direction layout concept that
is the elements can be placed in
oriental rose or vertical columns for
this reason flex Direction has four
different values row row is the default
value and depends of the direction of
the under reading mode property if you
are in an LTR direction you can see that
the elements are placed side by side
from left right but if you are in an LTI
direction you can see the elements are
placed from right to left row rivers is
the same concept like rows but in this
case if you are in an LTR direction you
can see the elements are placed side by
side from right to left and if you are
in an RTL direction you can see the
elements are placed side by side from
left to right column is the same concept
like row but in this case the elements
are placed top to bottom and culinary
wealth is the same that row reverse but
in this case the elements are placed to
bottom to top with only these two
properties display flex and flex
direction we can see the magic in this
example and when the bottoms change to
the values of the growing mode property
in horizontal tea be very kal-el are and
vertical are in flexbox the behavior of
their lives depend of the flex direction
property for example justified content
along the elements horizontally if flex
direction is row or Rory where's mark
vertically if the flow direction is
column or curl
column
reverse this is the real beauty of
flexbox and this is the beginning of the
logic concepts in our layout Joseph I
content property can be take five values
flex start flex and center is space
between and space around but let's focus
on the first two flex start and flicks
it in this expect in this example you
can see that the start and end concepts
change dependent of the gradient mode
problem after flexbox the most powerful
layout systems appear CSS grid CSS grid
is a two dimensional system created
specifically to solve the layouts
problem we have been hacking from a long
time CSS grid doesn't know left right
top and bottom properties basically CSS
grid flows the same logic ax place books
you can define the position of the green
items with properties such as green rows
are or green called column end similarly
to flexbox CSS grid also has logical
properties instead of physical points
let's take a look at one example to get
started you have defined the container
we display grid the elements we also for
coordinate the elements you need the
container define with rip template
columns or greet and paid rows to place
the children into the grid we need to
define each elements with green column
start one green column and two green row
start one and grid row and two or use a
shorthand like write Rho star / M real
row start end the way of thinking in CSS
logical properties a very important
thing in CSS is the box model
we use we are used the box model shown
on the left side on the screen this is
not wrong this is still correct but in
but in order to use the CSS logical
property
we must stop thinking in in terms of
left right top and bottom and replace
them with inline star in line and block
start and block end you can see this
change in language shown in the second
box model now we return to this source
property these two concepts blood and
star and in life when we are work with
logical properties we start understand
the block and align axis as we ship to
this way of thinking of our layout
begins to make more sense now
our logical properties will be like the
list shown on the left margins on the
left of this table you can see the name
of the property of the physical property
margin top margin left margin right
margin bottom and in the right side you
can see the equivalent of these a
physical property for example of margin
top the equivalent is margin block star
in a logical problem at the same in
margin right the equivalent is margin in
line end this is an example of margins
in this case I use margin block star
property and we can see how it changed
when running mode property change you
will want to keep your eyes on it on the
space between the first block and the
second block this is the margin block
palette this is the same of margins on
the left side you can see the properties
the physical properties such as padding
top padding left padding right and param
bottom and the right side you can see
the logical property
the Kimmel analogical property so she
has padding block star black Palin
inline star Palin in line and I'm
Pauline block and here there are some
examples for palates again you can see
how Palin's change when they grow in
mode change the container here is
showing their purple and the shy is
representing with them with the border
in color white there are purple
outside of the white dots is the party
borders in this table you can see a
little of the left side the physical
properties this is a little bit complex
because is the border top and you can
place the size or style or color and the
same the logical problem the logical
equivalent property is bordered block
star and you can set them size style or
color this example of borders might be a
little more complicated the different
colors of the border shown here will
help you track how they they change
differently with the red border I use
the border in line start preparing for
the purple border I use the border
inline star properly and affect the
other block with yellow border I use the
border block eight positions on the left
you see the name of the property as use
of the old box model top left right and
bottom and the left side you can see the
logical problem equivalent like instead
block start instead in line start
instead in line and are in safe block
and just like running mode the
compatibility is important
and again some Belgians need a prix fixe
and you can lick you can see and this
upper right hand when say global is 19
to dot 49% in conclusion we need to
think in ways of create webpage that
accessible to everyone thinking in terms
or logical properties is a good practice
when creating a webpage with multiple
languages but ok I have a little quiz
for you please take out your phone and
write Kahoot that I team
Oh
okay in your phone you can see effects
game thing here you put the eye the code
yes okay
[Music]
hops everybody join the game okay okay
see you logical properties the first
question which is the first building
block of this design delivery
[Music]
[Applause]
the next okay which concepts help us
understand the CSS elements where is the
logical property equivalent to the
margin top physical profit
[Music]
whoa what is the logical property
equivalent to the party left I don't
know what is the name of a case the last
question thinking in terms of logical
properties
Yakub practice when creating a webpage
[Music]
okay the winners please find me today
finally during the coffee break please I
have a little gay for you
Columbian candies and okay
everybody I have a Snickers for you
don't worry
ma I have a groom
rape onions we have a new member of the
CSS come family CSS come Columbia and
one of the leaders of the CSS conf
Columbia I'm very very excited to host
this conference in managing the next
year um thank you find me on social
media at DEFCON
[Music]