►
From YouTube: BackdropCMS - Installing HAX and Webcomponents modules
Description
How to install the HAX and webcomponents modules into a Backdrop 1.x.x CMS site. Backdrop is a fork of Drupal 7 so porting both modules from Drupal to Backdrop was very easy. This talks a little bit about Backdrop and plays around with HAX and some of the more advanced concepts in Webcomponents module.
Yet another video illustrating that when we say these things work anywhere... they work anywhere.
A
Hey
everybody
bt
o
pro
here
today,
I'm
gonna,
show
you
how
to
get
hacks
and
web
components
going
in
backdrop
CMS.
So
for
those
not
familiar
backdrops
CMS
is
a
fork
of
Drupal
7.
So
it's
very
similar
conventions.
Drupal
7,
you
see
any
my
mention
upgrading
from
Drupal
7.
So
it's
not
quite
the
the
leap
in
in
mindset
that,
like
a
Drupal
7
to
Drupal
8
is
but
so
on.
Here
we
have
web
components
module
and
we
also
have
the
hax
module
ported
over
there
just
and
so
basically
it's
really
easy.
A
If
you
can
make
a
module
for
Drupal
7,
it's
really
easy
to
port
it
to
backdrop.
It's
almost
automated,
but
so
I
have
a
little
play
space
here
of
a
backdrop
site
I
just
have
running
in
a
VM,
it's
in
an
Elms
VM
I.
Just
you
know
for
the
sake
of
having
an
environment
here,
it
doesn't
touch
Elms
in
any
way,
but
so
I've
got
just
a
boilerplate
site
that
I
installed,
and
so
now
we're
gonna
get
web
components
on
there
and
so
go
copy.
A
This
link
here
write
backdrop
and
I'm
gonna
go
into
modules,
so
the
this
directory
structure,
a
backdrop
is
a
little
different
than
your
traditional
Drupal
7,
okay,
with
components
and
that
file.
Ok,
so
now
they're
slightly
different
structure,
it's
a
little
bit
more
like
d8
in
that
way,
just
if
you
haven't
seen
it
before
it's
a
little
cleaner
at
the
top
level,
you
actually
do
put
things
in
modules.
All
of
backdrops
actual
core
is
located
in
core,
so
it
keeps
it
a
much
much
cleaner.
A
A
A
A
There
we
go
so
web
components,
module
you
can
see.
I
polymer,
selected
I
was
doing
that
part
previously
and
there's
some
other.
The
other
aspects
reported
they
may
or
may
not
work
quite
as
well
as
the
d8
version,
but
we
can
enable
the
hax
module
as
well.
Those
are
enabled
now,
if
you
watch
the
any
of
the
other
videos
you
see,
we
have
this
offset
and
the
elements
auto
load
thing
right
here.
However,
we
need
to
actually
get
some
web
components
in
place
because
I
didn't
finish
that
part
of
the
install.
A
Polymer
get
my
see
my
powered
out
JSON,
you
see,
there's
also
apps
there.
So
I
was
messing
with
some
stuff
to
do.
You
can
do
some
more
advanced
stuff
with
that
do
whoops.
How
are
install
not
power
garbage
is
so
Bower
install
is
gonna
run,
just
as
it
has
in
other
videos
to
show
that
the
workflow
is
exactly
the
same.
It's
kind
of
what
I'm
trying
to
illustrate
with
these
is
that
we
can
have
the
exact
same
development
patterns
across
platform
here.
So
it's
gonna
run.
A
It's
gonna
result
some
dependencies,
much
like
another
video
choose
option
3
for
that
option.
Two
for
that
and
our
location
give
out
an
option
to
at
least
four
hax
based
work.
We
we're
running
polymer
1x,
but
a
lot
of
our
elements
are
polymer
2
just
because
they
are
compatible
okay.
So
now
we've
got
those
in
place.
Let's
frag
the
cache
is
on
here
and
see
if
it
picks
them
up
there
we
go.
A
So
this
is
something
that
web
components
module,
gets
you,
whether
it's
for
backdrop
or
d6
or
t7
or
actually
sorry
won't
do
in
d6
it'll.
Do
it
in
d7,
so
it
noticed
that
there
are
attributes
in
there
that
there
are
web
components
and
so
it
and
not
to
only
loaded
them,
but
now
I
should
be
able
to
inspect
view
source
there.
We
go
so
rata,
loader
them
and
threw
them
onto
the
page.
A
Things
we're
matting,
let's
do
full
HTML.
Let's
make
this
a
book,
because
we're
gonna
illustrate
something
else
to
hopefully
save.
Okay
now
I
have
hacks
mode
there,
because
this
is
running
hacks
and
the
admin
menu
needs.
I
need
a
button
to
make
it
go
away,
but
there's
my
little
hacks
create
button.
Let's
see
if
I
can
shrink
this
down
and
scroll
below.
No,
it
is
a
fixed
okay.
A
A
Need
like
a
really
tall
page,
probably
I
need
a
really
tall
pit.
Hey
there
we
go.
We
can
scroll
over
here
yeah,
so
you
know
I,
that
is
again
cuz
I'm
an
admin,
but
so
I
can
pull
that
out.
I'm
just
trying
to
get
that
to
pull
out
cleanly
and
so
I
hit
text.
You
know:
we've
got
text
there
headings
as
we've
seen
in
other
videos,
gizmo
browser
still
there.
Those
things
are
loaded
in
just
like
in
some
of
the
other
videos
fiery
and
a
Wikipedia
article.
A
If
I
type
backdrop
yeah,
it's
okay,
oh
it
does
come
up
with
this
backdrop.
Cms,
let's
see.
Oh
there
we
go
much
like
I
did
with
the
Drupal.
One
tells
you
about
the
fact
that
it's
a
fork,
okay
insert
so
now
we
got
that
article
in
there
make
it
50%
wide.
We
could
change
the
switch
term
dynamically.
It's
pretty
cool
yeah,
don't
show
the
title
jump
back
into
this.
I
actually
wanted
to
see
on
this
they're
kind
of
just
trying
to
illustrate
the
power
of
this
development
workflow.
A
Let's
do
the
ye
olde
injective
video
from
YouTube,
whoops,
I'm
sure
when
I
click
there.
Oh
I
hate,
you
know
what
I
hit
back
on
my
mouse
like
that's,
not
a
thing:
yeah,
okay,
there
we
go
video
from
YouTube,
a
very
old
version
of
hax
actually
found.
This
is
kind
of
funny.
This
is
what
the
hacks
system
was
being
envisioned
as
two
years
ago.
It's
a
prototype
that
I
found
make
some
modifications
I
don't
want
to
be
responsive,
heck,
let's
duplicated
a
bunch,
I,
don't
know
what
other
videos
you
have
seen
person
watching
this.
A
So
we
have
duplicate
elements
and
checked
a
bunch
of
artax,
so
fire
up
get
some
little
brows
or
kind
of.
Eventually
you
start
to
reach
the
point
where
maybe,
if
you've
had
enough
coffee,
you
could
just
kind
of
overwhelm
people
with
what
this
is
able
to
do
and
realize
that
it's
not
written
for
backdrop.
This
is
a
huge
advantage
to
the
methodology
we're
following
any
of
these
videos.
You'll
see
this
is
written
against
the
platform
and
what
is
about
platform.
A
The
platform
is
the
web,
and
then
we
teach
these
CMS's
how
to
play
nice
with
the
platform
so
that
whether
this
is
backdrop
CMS
or
when
I
type
grab
in
there.
Otherwise,
all
of
my
front-end
and
all
my
UX
components
are
abstracted
from
the
rest
of
the
system
so
that,
when
I
hit
save
in
this
system,
that
little
message
says
saved
it
has
actually
saved
and
we
need
to
clean
that
up
as
far
as
it
injecting
those
after
the
fact,
but
we'll
see
in
the
editor
here,
I
turn
off.
A
A
Our
videos
insert
cool,
save,
let's
see
if
it's
saved
hey
there,
it
is
cool,
so
that
was
the
input
format.
So
again,
you
know
if
you
have
concerns
about
doing
all
this
stuff
in
the
front
end.
Here's
a
really
good
use
case
for
why
back-end
processing
is
so
really
important
in
these
content
management
systems.
That
was
respecting
my
input
filters.
So
I
previously
had
this
page
set
to
not
allow
for
the
sophisticated
content
to
go
in
there
and
as
a
result,
it
didn't
let
it
right.
A
So
another
principle
packs
that
the
things
that
I
put
in
into
the
Dom
is
exactly
what
I'm
getting
it's.
Not
what
you
see
is
what
you
should
get
it's.
What
you
see
is
what
you
get
literally,
because
it
is
just
touching
the
DOM
and
manipulating
it.
So
now,
if
I
go
to
view,
I
have
the
thing
that
I
did
with
my
video
put
in
place
exactly
where
it's
supposed
to
be
all
my
headings
that
I
smashed
in
there
and
now
we
can
go
in
and
we
can.
A
You
know,
delete
some
of
this
stuff
cleaning
up
a
little
bit.
I
do
have
a
lot
of
spacing
in
there
it's
another
part
of
the
power
of
this
okay:
okay,
okay,
okay,
okay,
okay,
get
rid
of
those
duplicate,
this
video,
what
save
pool!
So
if
you
need
to
make
any
tweaks
to
it,
you
know
in
content,
authoring
and
hacks.
Perhaps
you
have
a
theme
that
kind
of
messes
with
some
of
the
box
model
positioning
stuff,
there's
a
setting
for
that.
If
say,
we
don't
want
our
users
to
use
this
PDF
element
tag.
A
I
can
take
that
out
of
there
and
now,
when
I
go
in
and
I
go
to
this
book
page
again,
I
should
now
with
hax
mode,
not
have
that
guilt.
I
still
do
that
that
gizmo
option
so
I'll
have
to
see
what's
going
on
with
that.
As
far
as
reading
off
of
the
configuration
option
there,
but
that's
the
idea
with
that
setting
is
that
it
would
remove
things
from
that
listing
still
there.
Okay,
no
without
our
flaws.
A
This
is
in
an
outline,
and
so
let's
do
something
else,
a
little
fun
here,
it's
out
of
age,
real
quick
thing
save
and
let's
find
that
ID,
because
you
see
there's
a
where
does
his
book
there
and
I'm
gonna
make
it
kind
of
screw
up
on
purpose
stuff
and
things
in
the
name
of
the
book.
It's
seven!
So
let's
go
to
our
I'm,
not
super
familiar
with
backdrop.
All
the
time
structure
menu
there
we
go.
A
A
If
I
go
to
that
I
have
this
little
thing,
it's
a
little
outdated
because
it's
you
know
been
in
development
since
then,
but
this
is
our
LR
in
app
bulk
application
and
so
that
app,
if
you've
seen
it
in
any
of
our
other
videos,
looks
like
this
when
we
run
it
in
in
Elms,
and
actually
this
is
running
inside
of
Drupal
seven
right.
So
I
have
my
pages
laid
out
in
such
a
way
and
clicking
go
to
them,
but
these
are
fundamentally
nodes
behind
the
scene.
A
Well,
we
can
you
know-
and
this
is
a
slightly
older
edition
of
it,
but
this
illustrating
that,
if
we
are
able
to
teach
our
CMS
is
how
to
handle
the
platform
right
and
how
to
handle
these
native,
these
tags
that
were
manufacturing,
we
can
actually
start
to
kind
of
decouple
ourselves
from
any
system.
You
know,
obviously
within
reason,
but
this
is
an
older
version
of
that.
That
was
illustrating.
You
know
that
you
could
load
this
into
the
book
player
in
this
case
and
then
it
would
just
read
off
the
notes
from
the
file
system.
A
The
web,
the
web
component
module,
helps
with
the
routing
right,
so
it
generates
routes
automatically
based
on
your
front-end
assets,
because
we're
trying
to
build
things
from
the
way
they
should
look
and
function
and
then
our
CMS's
are
going
to
come
in
and
sprinkle
in
the
data.
It's
kind
of
the
workflow
we're
going
for
here.
So
that's
hacks,
and
that
is
the
web
components
module
for
backdrop.
A
If
you
have
any
any
questions
about
on
BTO
pro
on
twitter
be
doing
a
lot
of
stuff
with
hacks
and
the
hacks
to
let
hacks
of
the
web
initiative
as
far
as
it
goes
with
Elms,
but
I'm
also
porting
it
to
all
these
different
systems
really
illustrate
its
raw
power.
So
if
you
have
more
questions
about
what
the
web
components,
module
can
do,
there's
a
lot
more
documentation
on
backdrop,
CMS
org,
slash
project,
slash
web
components.