►
From YouTube: REMs vs pixels
Description
Demonstration of an important aspect in refactoring the Bootstrap CSS utilities into gitlab-ui utility classes.
SPOILER: We can never assume 16px as the default font size on the users' computers
A
At
the
moment,
we
have
several
efforts
and
targeting
refactoring
and
getting
away
from
the
bootstrap
utilities,
bootstrap
utility
classes
to
gitlab
ui
classes,
and
now
I
would
like
to
show
you
an
example
that
shows
one
hard
to
notice
gacha
that
might
actually
lead
to
a
lot
of
visual
regressions
and,
in
the
light
of
our
recent
code,
quality
discussions.
I
think
this
is
quite
essential
to
share
this
information.
A
So
we
are
on
a
merge
request
where
we
have
this
tabs.
The
tabs
have
these
pages
right.
So
the
interesting
thing
is
that
they
are
shown
only
on
the
screens
that
are
bigger
than
the
small
screen,
so
the
small
screen
in
bootstrap
world
is
defined
by
the
width
of
576
pixels.
So
if
we
look
at
this
screen
on
576
pixels
width,
the
badges
are
here.
If
we
go
one
pixel
down,
the
pages
are
gone
and
some
other
elements
have
been
changed,
because
a
lot
of
elements
are
connected
to
this
breaking
point
right.
A
A
The
thing
is
that
in
the
gitlab
ui
world,
we
are
dealing
with
not
with
pixels
but
with
rams
rems,
and
this
is
a
bit
different
value,
and
this
is
where
the
difference
is.
So,
let's
try
to
convert
this,
this
badges
to
the
gitlab
ui
world.
If
you
take
a
look
here,
so
we
have
selected
the
first
badge
on
the
overview
tab
this.
If
we
go
go
down
and
hide
it,
we
will
notice
that
this
is
the
style
that
tells
us
that
we
have
to
hide
the
badge
on
the
screens
with
the
max
width
576..
A
A
A
A
A
A
A
If
we
go
in
to
the
settings
of
our
browser-
and
let's
say
we
increase
the
font
size,
so
you
see
all
the
font
size
have
been
increased
and
large
in
this
system
in
brave
means.
The
base
font
size
now
is
20
pixels
and
we
go
back
to
our
page.
You
see
the
font.
Size
has
been
increased,
but
our
page
is
not
here.
A
A
A
One
in
order
for
the
badge
to
show
up-
and
this
is
pretty
dramatic
change
comparing
to
the
previous
implementation-
that's
why
I
left
the
neighboring
badges
intact,
so
that
we
would
see
the
difference.
The
badges
that
were
implemented
that
have
been
implemented
with
bootstrap
classes
are
already
here
at
as
early
as
5
76
right.
A
A
Please
make
sure
you
check
your
refactorings
on
with
the
screen
with
the
settings
where
the
base
font
size
is
different
from
16
pixels,
because
rem
value
is
calculated
based
on
that
base
font
size
set
in
your
browser,
gitlab
ui
supplies,
rems
bootstrap,
gitlab
ui
is
based.
The
breakpoints
in
gitlab
ui
are
based
on
re
apps.
The
breakpoints
in
the
bootstrap
are
based
on
the
pixels.