►
Description
Tilo Mitra and Eric Ferraiuolo on responsive design, css, and javascript tooling with Pure CSS
A
Welcome
everybody
to
our
latest
why
I
open
round
table
it's
January,
23rd
2014
and
I'd
like
to
welcome
Eric
Fraley,
oh
and
NT
levitra,
to
our
talk
today
and
I
also
want
to
thank
one
deposit
for
coming
as
well.
Clarence
will
be
here
in
a
few
minutes
and
again
getting
people
asking
for
more
than
hang
out
things.
A
So
just
kick
things
off
before
we
jump
into
the
talk.
I
wanted
to
just
to
give
a
quick
update
to
folks
who
are
watching.
We
did
get
the
development
schedule
set
up
for
the
next
sprint,
which
will
be
sprint
12,
and
that
will
be.
If
you
look
on
the
development
schedule
on
github
Sprint
will
start
generate,
28th
code
freeze
would
be
the
14th
to
commit,
freeze,
be
21st
and
the
projected
release
date
will
be
48
25th,
so
we'll
let
people
know
about
that.
It's
been
kind
of
a
question.
A
B
B
Filing
bugs
and
we've
been
using
pure
we've
come
across
a
couple
of
things
that
not
just
in
pure
but
in
CSS
in
general,
that
we
feel
we
can
improve
so
just
to
make
CSS
in
general,
more
easier
and
fun
to
write
so
with
an
eye
towards
mobile,
first
design
and
just
responsive
web
design
in
general,
but
still
supporting
older
browsers.
We've
come
up
with
a
bunch
of
tools,
mostly
built
on
rework
and
grunt
that
make
it
easier
for
people
to
write
CSS
like
modern
CSS,
but
still
play
well
with
older
browsers.
B
So
we've
worked
on
a
bunch
of
stuff.
I
could
talk
you
through
the
individual
things,
but
I
had
a
little
demo
that
I
made
that
I
was
going
to
actually
like
live
code,
some
stuff
to
show
you
guys
how
easy
it
is
to
work
with
the
new
pure
stuff
that
we've
been
working
on,
so
our
nerdy
Iranian
dad
otherwise
I'll.
Just
like
start
sharing.
My
screen.
D
Yeah,
so
so,
liquid
tula
was
saying
that
we,
we
noticed
the
in
ourselves
as
well
like
when,
when
trying
to
work,
work
with
pure
and
and
some
of
the
things
that
that
are
built
into
it,
so
mainly
around
the
responsive
features.
The
the
fundamental
problem
is
that
the,
if
pure
as
a
library,
ships
with
media
queries,
built-in
there's
no
way
for
a
developer
to
override
those
media
queries
so
that
that
pretty
much
makes
it
where
it's
it.
D
It's
like,
it
doesn't
make
sense
for
anything
to
ship
in
the
core,
not
sure
just
typing,
but
there's
a
lot
of
Tennyson
but
yeah.
So
it's
a
it
makes
it
difficult
because
you
there's
no
way
to
override
these
things
and
when
we
were
looking
at
writing
our
CSS,
we
wanted
to
be
building
up
from
from
sort
of
the
baseline
being
a
a
mobile
design.
D
You
have
to
do
back
and
forth
where
we
needed
our
enough
hooks
in
our
HTML
and
for
that
to
be
laid
out
in
such
a
way
that
that
we
could
start
with
a
single-column
layout
for
most
things
and
then
and
then
expand
that
as
as
the
screen
real
estate
accommodates
for
that.
So
looking
at
stuff,
like
that,
we
we
wanted
to
see.
How
can
we
do
this?
This
idea
of
mobile
first,
but
then
also
incorporate
things
within
pures
grid
system
and
a
lot
of
people
to
customize
the
built-ins.
D
But
like
line
lengths
are
getting
too
long
in
a
certain
section
and
they
want
to
make
that
with
smaller
or
put
another
column
of
content
next
to
it,
and
that's
all
things
that
we
can't
predict
ahead
of
time,
so
people
need
to
customize
that
stuff
either
for
their
content
or
for
the
devices
they're
trying
to
support
em.
But
then
the
flip
side
of
that
is
well.
We
still
have
all
these
people
on
older
devices
or
older
browsers.
D
Like
that,
don't
understand
media
queries,
mainly
the
old
versions
of
ie,
particularly
like
IE
8,
has
a
lot
of
users
still.
So
how
do
we
have
this
like
mobile,
first
content,
first
philosophy
in
this
reality
where
there's
old
internet
explorer
browsers,
and
so
we
are,
and
we
don't
necessarily
want
to
serve
them.
The
deaths
are
the
mobile
screen,
optimized
experience,
but
instead
more
of
a
desktop
screen,
optimized
experience,
so
we
wanted
to
figure
out
a
way
to
alleviate
that
pain.
D
B
Going
to
actually
show
you
guys
a
lot:
a
demo,
I'm
gonna
live
coding,
Mike
messed
up,
I,
don't
know,
but
just
disclaimer
before
I
I
run
through
this.
There
will
be
some
spots
where
you'll
be
like:
oh,
that
could
be
made
easier
and
there
are
some
things
that
we're
still
working
on.
It's
not
totally
flushed
out
yet.
But
I'll
tell
you
guys
when
we
wanted
to
these
situations.
But
okay
I
want
to
screen
sure.
B
Okay,
so
can
you
guys
seem
scream
yeah,
I'm
good
under
then
ok
cool.
So
this
is
the
I'm
going
to
kind
of
walk
you
guys
through
making
this
this
kind
of
layout
here,
and
so
this
layout,
pretty
simple
but
very
common
on
the
web.
You
have
some
sort
of
a
header,
some
sort
of
main
section
here
and
then
some
sidebar
here
and
then
this
is
a
responsive
design.
So
you
will
see
that
as
it
shrinks.
So
here,
actually,
this
white
section
is
34
75%.
B
This
yellow
section
is
a
quarter
and
then,
as
it
shrinks,
it
actually
becomes
two
thirds
and
the
third
and
then,
as
a
chand
you'll
notice
that
this
went
down
from
33
images.
You
know
Rapinoe
in
a
row,
22
images
in
a
row
and
then
you
shrink
it
even
more.
It
becomes
one
and
a
little
bit
here
and
then
it
just
totally
becomes
like
a
something
like
this
on
a
phone
right.
B
So
it
has
quite
a
bit
of
responsiveness
in
this
and
I'm
just
going
to
walk
you
through
how
to
make
something
like
this
pretty
easily
with
the
new
here
so
that
we've
been
working
on.
Does
that
make
sense
to
everyone?
Yeah?
Okay,
so
I
have
something
save
in
case
I
screw
up,
but
but
I'm
just
gonna
I'm,
just
gonna
walk
you
through
to
the
beginning.
So
probably.
B
B
D
B
D
B
So
one
of
the
tools
we've
built
is
this
tool
of
that
Eric
primarily
worked
out
called
rework
pure
grids,
and
it's
a
it's
a
pre-work
tool.
We
have
a
grunt
plugin
for
this
too,
but
the
grunt
plugin
right
now
isn't
actually
on
NPM.
But
basically
what
this
allows
you
to
do
is
generate
responsive
grids.
So
here
that's
what
I'm
doing
with
this
little.
B
With
this
little
script
here,
I'm
saying
generate
a
new
pure
grid
for
me,
which,
with
the
with
these
media
queries,
am
in
width
to
add
35
games,
which
is
about
like
an
iPhone
with
one
at
forty
ATMs,
which
is
about
like
an
iPad
width
and
one
at
60.
Ms,
that's
about
a
black
laptop
desktop
with
and
named
them
small,
medium
and
large
respectively.
So
when
I
run
this,
so
I
go
no
I'm
just
gonna.
This
is
something
which
we
we
are
gonna
have
a
web
UI
for
as
well.
B
But
if
I
run
this
here,
what
I
get
is
a
grid
that
looks
like
this,
so
it
gives
me
a
grid
at
at
35
ems,
which
is
with
this
small
class
name,
and
if
I
keep
scrolling
down
it
gives
me
all
the
units
for
by
default
gives
me
the
fifths
and
24th
based
grid
units.
That
Pierre
has
then
I
get
the
same
one
at
48
EMS,
which
has
which
is
tagged
as
a
medium
and
then
I
get
one
at
large.
B
B
Right,
so
you
passing
six
here
and
right
so
here
you
can
see
that
now
purism
in
dozen
by
default
ship
with
the
sixth
of
six
column,
0
unit
grid
system.
So
by
default
you
got
the
default
class
names
and
then
you'll
see
right
now
it
does
the
same
things
with
the
men
with,
but
now
you
only
have
six
instead
of
the
24
turned
that
we
had
before.
So
it
basically
is
lets
you
very
easily
generate
whatever
you
need
for
your
project,
so
I'm
just
going
to
and.
D
In
the
focus
here,
too,
is
for
for
people
who
want
to
have
more
HTML
driven
styles,
where
they're
adding
more
class
names.
If
you,
if
you
didn't
want
this,
you
could
use
even
the
grid
core
that
ships
of
pure
that
only
defines
the
pure
G
and
pure
you
class
names,
and
you
can
specify
the
widths
in
your
application,
CSS
for
your
for
your
header
or
your
sidebar,
or
your
main
content
right.
But
so
we
wanted
to
to
support
both
styles
of
development.
D
Here,
a
lot
of
times
with,
like
bigger
teams
working
on
stuff,
it's
sometimes
desirable
to
have
this
HTML
driven
approach,
or
you
can
add
these
additional
class
names
and,
if
they're
defined
elsewhere,
that
everybody
knows
just
to
use
these
class
names
or,
if
you're,
just
somebody
who
is
writing
all
the
CSS
yourself
and
wanting
to
to
have
very
semantic
class
names
on
all
your
HTML
elements
and
be
able
to
control
all
that,
then
you
can.
You
can
specify
the
whips
in
your
app
CSS
manually,
yeah.
B
B
E
C
D
B
B
B
So
I
already
have
this
ab
dot
CSS
that
I
kind
of
wrote
it
has
about
60
770
lines
of
CSS
here.
Just
to
give
you
give
some
base.
Styles
I'll
walk
through
this
as
I
walk
as
I
go
along,
but
I
have
a
couple
of
classes
like
header
campaigns,
sidebar,
etc.
So
so
that's
what
I'll
be
referring
to
when
I
code
here
so
initially,
what
I
have
is
the
back.
B
The
body
is
blue,
and
then
I
have
this
derive
this
wrapper,
which
everything
is
inside
so
I've,
something
like
this
and
then
you'll
notice
that
the
header
is
always
hundred
percent.
This
rapper
has
a
max
with
Saturn,
which
is
why
it
stops
here,
but
this
header
is
always
hundred
percent,
so
we
don't
actually
need
to
put
that
inside
of
a
grinning
at
all,
because
we
know
it's
always
on
one
hundred
percent.
So
I
have
a
header
like
that,
and
then
I
have
this
disk.
B
B
Good
catch,
so
that's
I'm
completely
doing
this
from
memory.
So
something
like
myself
so
so.
The
next
thing
that
happens
here
is
again.
This
is
a
mobile
first
design,
so
it's
probably
best
to
think
about
it
from
like
this
screen
size
onwards,
because
we're
coding
for
the
phone
first.
So
you
have
a
campaign
section
and
you
have
a
review
section
and
they're,
both
one
hundred
percent
on
phones.
So
how
do
you
do
that?
Okay,
so
forth?
For
that?
What
you
do
is
you
go?
B
These
are
gonna
be
grid
units.
Now,
so
you
have
a
pure
G
and
then
I
have
a
something
called
campaigns
which
is
appear
it
with
this.
This
is
obviously
pure.
You
want
one
hundred
percent
width,
so
I'm
saying
this
is
gonna,
be
one
hundred
percent
width
on
a
mobile
first
on
a
phone,
and
then,
let's
see
what
happens
here
as
I
increase
this
at
this
point
here
it
becomes
a
to
two
thirds,
so
sixty-six
percent,
so
that's
actually
represented
by.
E
B
B
D
D
B
A
B
Backs
campaigns
and
I'm
gonna
work
on
the
sidebar
here,
which
is
again
starts
off
as
a
hundred
percent,
and
then
it
takes
up
I,
think
thirty,
three
percent
and
then
at
the
end
there
takes
up
twenty
five
percent.
So
that
would
be
one
hundred
percent.
Then
thirty,
three
percent
and
then
twenty
five
percent
and
I'm
just
gonna,
say
you're.
B
B
B
B
Medium
become
one-third
and
I
believe
they're
also
called
t-shirt,
Susan
and
then,
and
then
this
actually
repeated
four
times
our
sorry
that
repeated
six
times
Wow,
and
then
they
have
some
text
inside,
though
socially
large,
to
know
the
action
so
you'll
notice
that
it
actually
becomes
a
okay
g5.
You
might
try
to
this
might
be
at
large.
So.
B
B
So
that's
pretty
much,
that's
pretty
much
it.
The
one
thing
they
aren't,
if
you
guys
notice,
is
that
these
images
have
this
class
called
image.
Responsive,
we're,
probably
gonna,
put
this
into
pure.
All
this
image
responsive
class
is
doing
here
is
making
these
images
responsive
by
making
their
wits
fluid.
It's
just
adding
a
max
width
and
then
adding
the
height
auto
to
make
sure
they
don't
get
skewed,
oh
yeah,
that's
it
and
then
inside
the
reviews,
I
just
had
a
bunch
of
texts,
kind
of
cool
thing
for
EM
it.
B
If
you
guys
use
em
it
if
you
go
pee
and
then
you
go
lower,
so
if
you
olurum
it'll
like
automatically
so
you
can
get
a
lower
emission
test
release
you
like
that,
so
there
you
but
yeah,
that's
it!
So
the
other
thing
I
wanted
to
show.
You
is
another
tool
that
we've
been
working
on,
so
this
I
hope
showed
like
how
easy
it
is
to
make
these
sorts
of
you
guys
really
quickly.
The
problem
here
is,
if
I
took
this
now
and
I
put
it
into
google
things.
D
B
B
So
what
happens
by
default
is
I
ate,
doesn't
have,
doesn't
have
any
media
career
support
so
by
default.
It
sees
this
this,
this
phone
version
right,
which
looks
really
crappy,
so
we've
actually
wrote
a
tool
that
makes
it's
really
easy,
and
this
is
where
grunt
comes
in.
So
we've
heard
in
this
tool
will
actually
we've
worked
with
this
other
author
who's,
who
has
who
had
this
tool
but
be
kind
of
added
a
lot
of
robustness
to
it.
B
D
These
sorts
of
things
that
are
equivalent
to
media
create
features
that
you
can
write
expressions
for
like
min
with
max
with
a
min
DPI.
Our
min
resolution
have
a
dpi
set.
So
what
we
look,
what
we
did
is
yeah,
so
tilos
writing
them
out.
There
is
so
the
media,
the
strip
mq,
has
defaults
that
are
sane.
So
this
the
defaults
are
1024
x,
768
type
is
screen
and
the
DP
is
72.
B
File,
so
at
the
end
of
it,
you
gotta
flatten
CSS
file
right
so
I'm
going
to
run
this
now,
just
by
running
grunt
and
boom.
It's
done
if
you
look
at
so
to
give
you
an
example
of
like
hollister.
So
if
you
look
at
the
grid
old,
I
e
dot,
CSS
file
and
it's
a
little
small
der,
but
there's
no
media
crews
in
this
file
anymore,
all
the
media
crews
have
been
removed
and
by
default.
B
What
what
happened
is
that
the
large
media
query
here,
but
all
the
office,
all
these
large
sin
taxes
they
were
actually
within,
they
were
actually
originally
within
sixty
EMS.
Now
60
EMS
translates
to
about
980
pixels
or
960
pixels,
I
believe,
which
is
below
the
default
of
1024
pixels,
that
we
assume
an
i8
viewport
to
have
so
all
them.
B
The
media,
query
and
they're
within
a
media
query
here
of
90
MS,
but
then
I
just
ran
grunt,
and
you
will
notice
that
here
there
are
no
X
larges,
because
what
it
said
is
that
that
it
doesn't
fit
into
the
width
that
Bray
suming
here,
so
that
me
decree
got
discarded.
So
what
this
does
is,
if
you
notice
how
we're
coding
things
here,
we
were
specifying
the
larger,
the
medium
and
stuff
and
all
those
classes
I
ate,
is
now
going
to
pick
that
up
so
it'll
it'll
get.
B
It
will
now
show
you
the
the
desktop
version.
The
last
thing
that
you
have
remaining
to
do
is
kind
of
you
have
to
add
this
sort
of
if-else
thing
at
the
talk
to
make
sure
the
you
serve
the
right
file
to
the
right
browser.
So
I
have
something
like
this.
So
instead
of
just
always
giving
the
media
kriosian
for
IE
less
than
9,
which
doesn't
support
media
queries,
you
want
to
give
them
the
old
IE
version
that
was
generated
right.
D
A
D
B
Handle
all
that
so
I,
just
like
me
to
700,
which
can
I
gives
it.
Oh
so
yeah
I
made
it
seven
sixty
eight
now
and
that's
kind
of
the
tablet
ish
that
you
see
here
and
yeah
so
now.
This
is
like
kind
of
fluid
and
and
and
looks
a
lot
nicer
than
the
mobile
view
that
we
had
see.
Those
are
some
of
the
tools
that
we've
been
working
on
right
now.
We're
working
on.
Is
this
the
some
great
jazz
thing
that
you
saw
here?
B
We
were
making
it
possible
to
access
this
from
a
web
UI,
so
you
can,
from
the
website,
get
your
custom
grid
and
you're
good
to
go
from
there.
We
also
have
a
grunt
plugin
for
this
and
I
think
we
should
probably
expose
that
some
way
yeah
but
yeah.
That's
what
I'm
going
to
show
you
and
yeah!
That's
pretty
much
it
so.
The.
D
Me
the
they
do
serve
different,
somewhat
different
needs,
so
there
we
definitely
aren't
going
to
like
try
to
unify
them
in
any
way
besides
making
them
both
like
grunt
plugins,
all
right,
ready,
the
mainly
but
we've
been
writing
these
tools
to
have
multiple
different
levels
so
that
we're
not
trapping
our
code
like
only
inside
of
a
grunt
plugin,
or
only
inside,
of
even
a
rework
plugin
for
some
of
it.
We're
making
it
we're,
making
it
at
like
a
core
part
of
the
tool
and
then
adding
rappers
like
so.
D
D
So
our
plan
is
to
on
piers
website
to
have
more
interactive
documentation
and
help
people
get
started
with
with
grids
easier
and
be
able
to
configure
a
custom
grid
all
through
our
website,
and
it's
just
going
to
be
running
the
same
tools
but
in
your
browser,
instead
of
instead
of
like
through
the
command
line,
and
so
so
that
will
allow
us
to
do.
Do
some
nice
stuff
by
having
all
the
stuff
in
JavaScript
and.
D
The
the
piers
website
how
we
rewrote
it
over
the
last
couple
weeks
to
be
completely
mobile
first
and
actually
work
well
on
mobile
devices.
So
now,
like
the
code,
examples
are
much
easier
to
read
on
a
phone
and
the
layout
is
is
just
overall
better.
So
we
were
able
to
tweak
that
stuff
to
make
it
to
impede.
C
B
B
More
of
a
get,
that's
more
forget
started
guide
the
thing
we're
building
now
it's
it's
it's
an
easy
way
for
people
to
get
started
with
pure,
not
just
the
grid
system.
But
our
next
goal
is
to
make
your
work
well
with
people
who,
with
preprocessors,
I
primarily
to
be
able
to
extend
Pearce,
Pearce
styles
and
free
processor
land.
So
that's
going
to
go
to
this
get
started
section
too,
but
yeah,
it's
pretty
different
from
the
grid
builder,
but
it's
similar
in
the
sense
that
it'll
output
code
that
you
can
use
your
plans,
I'm.
D
D
A
So
one
thing
is
that
it
works
a
little
bit
knowledge
to
like
the
HTML,
so
I
think
to
know
like
do
they
did
for
the
grades
like
the
dash
you
and
stuff.
Is
there
any
any
tips
on
the
side
or
anything
of
that
to
help
people
on
that
side
of
that
you're
generating
the
cs?
Was
there
a
way
to
generate
like
a
musical
Utterson.
B
Yeah
we
well,
we
were
talking
about
earlier
about
the
weather,
channel
victims
were
layout
builder
or
not
I
kind
of
don't
like
layout
builders,
because
I
think
there
I
don't
I
I,
never
I,
never
used
them
and
I
never
feel
they're
very
easy
to
use.
So
our
think
primarily
what
this
get
started.
I
kind
of
helps
you
a
little
bit
with
that.
B
It
gives
you
a
live
dynamic
example
of
something
that's
changing,
shape
and
getting
class
names
added
and
removed
to,
as
you
modify
media
queries
so
hopefully
that
that
goes
a
little
bit
towards
it.
Then
look,
then
the
layouts
that
we
have
right
now
are
a
bit
more
advanced,
but
they're
kind
of
the
next
step
in
like
here's,
something
that
only
has
class
names
copy
paste
and
then
go
from
there
and
then,
apart
from
that,
if
people
expect,
if
you
see
people
are
explicitly
asking
that
this
is
hard
to
understand
anyway,
let's
see
what
to
do.
B
A
D
We
are
trying
to
make
sure
that
people
are
still
in
full
control
over
over
there
CSS.
So
like
even
using
the
tools
we
we're
not
trying
to
right
the
media
queries
for
you,
but
it
gives
you
an
ability
to
write
them,
because
somebody
may
want
to
use
these
tools
but
may
want
to
take
an
approach
where
they're
doing
desktop
first
in
pairing
things
down
for
mobile,
and
we
we
don't
want
to
prevent
that
like
I.
Just
wanted
to
be
you.
D
Still
do
that
yeah
and
it's
much
easier
to
write
a
media
query
as
a
string.
That's
an
actual
media
query
for
the
tools
configuration
than
it
would
be
to
like
write
the
they
like
data
structure
to
represent
it.
So
it
actually
makes
the
configuration
easier
and
and
everything
so
we
we
think
that
that's
that's
a
good
way
going
forward
and
we
were
looking
at
how
to
handle
the
ie8
thing.
D
Some
people
have
grunt
plugins
that
we're
doing
things
like
taking
all
your
media
queries
and
moving
them
to
the
end
of
your
CSS,
but
that
actually
can
lead
to
unintended
consequences
where
certain
rules
are
getting
overridden
by
other
rules.
So
we
wanted
to
leave
everything
in
place
as
it
was,
and
more
or
less
duty,
either
unwrapping
or
removal
in
place
to
maintain
that
and
and
have
as
much
robustness
around
being
able
to
have
other
tools,
understand,
media
queries
and
evaluate
whether
or
not
certain
things
match.
D
E
D
So
the
the
grid
generator
tool
now
supports
the
reduced
and
non
reduced
fraction.
So
by
default
it's
going
to
create
both
and
yeah.
So
there's
also
2424
as
well,
which
I
think
will
help
people
when
they're
trying
to
do
things
programmatically,
maybe
inside
of
templates
or
something
or
just
dynamically,
with
JavaScript.
If
they're
changing
class
names,
it's
much
easier
to
just
script,
that
or
use
a
template
for
that
when
you
can
use
24
24
s
instead
of
just
a
dash
one.
So
yeah.
E
D
Yeah,
so
that's
that's
now
now
alleviated
from
this.
We
actually
are
using
the
grid
unit
generator
in
part
in
pure
build
process
in
the
library
build
process
to
generate
the
grid
units
now
and
it's
it's
creating
all
of
the
reduced
and
non
reduced
fractions.
So
those
will
be
those
will
be
the
new
default
and
we
looked
at
when
we
did
the
G
zipping
of
those
minification
and
G
zipping
of
those
files.
A
D
B
He
doesn't
see
an
example
of
this
kind
of
thing
that
I
made
today's
like
all
the
layouts.
All
the
pure
layouts
are
exactly
like.
Basically,
this
this
is
I
just
kind
up
as
we're
still
gonna
they're
dumb,
be
the
other
that
I
made
so
yeah
check
out.
I
think
the
marketing
layout
is
a
good
place
to
start
cuz.
It's
pretty
simple
and
bad.
That's
kind
of
very
similar.
This
yeah.
D
And
the
gallery
layout
is
now
using
its
own
custom
grid,
where
it's
based
on
six
columns
instead
of
the
24
cuz.
It's
all
it
needed.
So
it's
kind
of
nice
to.
If
you
know
your
design,
there's
only
going
to
need
a
few
columns.
You
don't
have
to
have
all
this
extra
CSS
generated
and
not
and
not
need
it.
So
that's
a
good
example
showing
there
and
the
layouts
now
are
all
downloadable,
so
you
can
just
on
the
website.
D
Click
the
download
button,
it'll,
zip
them
up
and
download
a
zip,
so
they're
they're
a
little
easier
to
get
started
with.
If
you
wanted
to
open
it
in
your
editor
and
see
the
files
that
apply
and
not
have
to
try
to
use
the
inspector
just
to
look
at
what
HTTP
requests
the
things
using
and
pull
in
and
all
that
stuff.
D
So
once
so,
we
have
this
tooling
in
place
and
we
needed
that
so
that
we
can
create
alternative
ways.
So
both
the
command
line
and
through
build
processes
like
their
grunt,
plugins
and
rework
plugins,
and
then
also
a
web
UI
for
this
tooling.
So
that
then
we
can
move
to
removing
the
media,
queries
that
are
inside
of
pure
scorer
and
and
the
reason
being
like
we're
studying
earlier
that
there's
no
way
to
override
those.
So
we
really
want
people
to
be
able
to
customize
them.
One
example
is
like
the
menu.
D
The
menu
is
a
perfect
example
of
where
we
have
no
idea
how
many
menu
items
your
site
has.
So
if
you
only
have
two
menu
items,
then
we
the
menu,
never
needs
to
collapse
and
turn
into
a
toggleable
thing
on
a
small
screen,
because
you
have
space
to
fit
it
like
for
a
horizontal
menu
at
the
top.
But
we
have
no
idea
of
knowing
that
right
and
there's
no
way
for
the
library
to
do
that,
but
just
CSS.
You
need
to
have
JavaScript
doing
that
or
something.
So.
D
What
we
want
to
have
is
to
give
you
control
over
saying.
No
I
want
you
know
my
my
menu
to
turn
into
just
the
little
hamburger
icon
or
whatever
at
at
this
size,
because
I
have
10
menu
items
so
anything
smaller
than
a
desktop
screen,
I'm
going
to
need
to
go
to
the
hamburger
menu
mode,
and
so
things
like
that
are
we
can't
really
handle
inside
of
just
the
library
itself.
D
So
what
we're
looking
at
to
revamp
menus
grids
in
the
core
and
also
forms
to
remove
the
responsive
media,
to
basically
remove
all
the
media
queries
and
have
tooling
and
way
better
documentation?
That's
interactive
and
easy
to
use
and
easier
to
understand
and
better
support
for
CSS
preprocessors
and
these
sort
of
things
to
to
replace
that
so
we're
taking
some
stuff
away.
We
want
to
take
stuff
away,
but
then
provide
even
more
stuff
in
terms
of
tooling
and
UI
on
the
website
and
better
docs
and
guidance
to
make
it
better.
Overall,
there.
A
B
Our
Civic
things
like
I'm
for
more
specific
things
like
you
know,
componenti
stuff,
I,
feel
like
that's.
What
really
should
belong
in
Yui
like
it
meant
to
be
phase
of
like
some
Yui
module.
Why
it
already
kind
of
depends
up
here,
but
if
someone
wants
to
make
popovers
or
tools
I
mean
I
know,
I
have
a
pop
over
the
tooltip
to
the
library
that
I
have
on
the
gallery,
but
something
like
that
was
too
much.
D
And-
and
also
I
mean
we
try
to
use
this,
this
guiding
thing
that
if
we
don't
think
eighty
percent
of
web
projects
wouldn't
need
that
component
or
if
it's
not
like
very
basic
to
the
web,
so
it's
not
styling
elements
or
like
forms
or
creating
a
layout
system
like
grids
or
having
a
like
every
every
website
has
some
form
of
navigation
menu,
most
do
so
having
adding
on
that
like
additional,
slightly
higher
little
concept
of
a
menu
component,
but
yeah
beyond
beyond
that
stuff.
It's
it.
D
It
gets
too
much
too
specific
to
apps
specific
that
we
would
rather
provide
these
lower
level
building
blocks
and
and
let
and
let
people
build
what
they
need
for
their
app
on
top
of
that
or
or
use
like
the
tos,
a
Yui
form
or
widget
things,
or
if
they're
people
are
using
jQuery
and
jQuery
UI
or
just
whatever
framework.
Or
you
know
what.
C
B
Whatever,
like,
whenever
I,
go
to
hack
a
that
was
like,
oh
I,
why
should
I
like
moisture?
Has
all
this
other
stuff
and
I'm
like
yeah?
Well,
if
you
need
that
I
said
you
could
very
easily,
you
should
use
blue
circles,
they
do
a
good
job.
What
we're
worrying
worrying
about
is
the
foundation
layer
to
make
sure
that
eighty
percent
of
use
cases
of
it
really
well
and
then,
on
top
of
that,
if
you
need
tool,
tips,
popovers
and
you're
using
jQuery
go
ahead
and.
A
D
D
Months,
but
that's
totally
up
to
you
know
whoever
is
using
the
tool
can
can
set
those
to
be
whatever
they
want.
And
if
you
didn't,
if
you
didn't
want
the
pure
dash
you
in
front
of
it,
then
you
can
also
set
what
you
want
that
prefix
to
be
or
no
prefix
at
all,
so
you
could
just
have
like
a
small
dash,
one
half
or
whatever.
So
that's
that's
up
to
you
right
now.
We
only
support
prefix,
we
don't
support
like
a
suffix,
but
you
know:
that's
that's
something.
D
D
A
There's
a
question
on
the
channel:
that
said:
is
there
a
defined
component
set
to
find
for
the
10
version?
A
roadmap
for
functionality
also
saw
post
about
YY
three
integrating
pure
CSS.
Sometime
than
your
feature
like
to
know
all
the
core
function
like
pure
will
offer,
so
we
can
do
long
term
planning
well
so.
D
D
11
good
candidate
is
a
table
to
be
able
to
do
the
basic
table
styles
that
then
data
table
could
build
on,
but
there
just
may
not
be
enough
there
to
make
it
worth
it,
but
it's
something
we
can
look
into
and
then
in
terms
of
the
the
feature
set
like
I
was
saying.
We
want
to
replace
the
media
queries
inside
of
the
core
library
with
tools
documentation.
You
I,
better
preprocessor
support
to
allow
people
to
control
those
themselves.
D
So
there's
there's
that
and
I.
Don't
know
for
what
do
we
have?
We
have
a
revamp
of
of
menus
that
that
we
want
to
get
in
for
one
point:
oh
it
would.
We
would
also
want
to
figure
out
the
skinning
solution
that
can
that
can
aid
skinning
pure
in
a
more
programmatic
way,
instead
of
having
to
do
it
manually
like
right
now,
if
there's
changes
that
happen
appeared,
jeff
has
been
manually
tracking
those
changes
or
going
through
the
change
logs
and
seeing
what's
changed
and
making
those
changes
in
skin
builder.
D
One
point
oh
yeah
I
would
say
so
because
that
also
we're
looking
to
for
preprocessor
integration.
We
a
lot
of
the
preprocessors
use.
They
have.
This
extend
feature
where
you
can
do
addicts,
and
so
you
can
import
a
library,
separate
library
and
then
use
extend
with
it.
The
problem
is,
is
like
SAS
and
less
don't
don't
deal
with
descendant
selector
as
well,
so
usually
use
like
a
class
name
here.
So
you
could
say
like
in
your
app.
D
You
may
have
just
menu
as
a
class
name
in
your
HTML
and
then
in
your
application,
CSS,
which
say
you're
using
SAS.
You
can
say
at
the
top
import
peer
and
then
you
can
say
that
the
selector,
your
selector
menu,
extends
pure
dash
menu.
So
the
problem
with
that
is
that
doesn't
cascade
all
the
way
down
to
all
the
selectors
that
start
with
pure
menu.
So
you
have
to
go
through
and
do
each
one.
So
what
we?
What
we're
looking
at
is
maybe
flattening
the
namespace
here.
D
This
would
be
more
of
the
smacks,
a
style
and
naming
convention,
which
is
to
use
a
single
flat
class
names
for
everything.
So,
instead
of
having
like
a
selector
that
inside
of
pure
that's
dot,
P
R
dash
menu
space
UL,
we
would
just
have
like
dot
P
R
dash
menu,
dash
items,
for
instance,
and
and
have
class
name
for
that.
And
that
way
we
keep
a
nice
flat
level
class
names,
and
that
makes
it
much
easier
to
use
the
extend
feature
in
preprocessor.
So
that's
something
that
that
we're
looking
into.
D
So
so
things
like
that
so
really
customization
of
pure
through
skinning
and
tooling,
around
there
and
revamping
skin
builder
stuff,
so
that
I
can
be
more
integrated
by
having
more
tools
around
it
and
command
line,
build
time
and
also
the
web
UI
all
to
using
the
same
code
base
for
skin
builder,
that
that's
that's
a
good
one
and
then
trying
to
make
things
integrate
better
with
preprocessors
is
another
big
one
that
we
want
to
do,
but
I
don't
know.
Can
you
think
of
other
things?
B
Sorry,
sorry,
no
I
was
saying
that
that's
all
I
can
think
of
as
well.
The
thing
is
that
for
each
of
these
items
we
usually
do
a
lot
of
iterations
so,
which
is
why
it
takes
like.
We
usually
give
it
a
lot
of
pot
and
usually
try
something,
and
then
we
start
over
from
scratch,
because
it's
not
the
right
way
to
approach
it.
B
So,
even
for
something
like
this
preprocessor
stuff
that
we're
talking
about
stuff
I,
think
SAS
supports
the
extent
but,
for
example,
less
doesn't
support
extend
right,
so
we
always
have
to
figure
out
what
comedian?
With
that,
with
that
with
less
there
I
know
less
supports
include.
This
include
work
with
my
single
class
there's
a
lot
of
like
experimentation
to
figure
out.
What's
the
best
way
to
approach
these
problems,
which
is
why
they
take
it
over
the
time
to
finalize,
but
we're
pretty
I'm,
pretty
I'm
pretty
excited
about.
B
The
thanks,
like
two
three
months
here
seems
like
we're.
Gonna
have
a
really
nice
story
just
held
once
all
these
loose
ends
are
connected,
especially
not
with
the
tooling
stuff
done
like
if
everything
goes
according
to
plan
it'll
be
super
easy
to
customize
it'll
be
it'll,
be
very
easy
for
the
novice
developer,
but
it
also
be
very
powerful
for
experienced
developers
to
take
advantage
of
all
the
stuff
that
we're
providing
and
yeah.
So
I'm
really
excited
about
the
next
few
months.
If.
A
B
Were
like
we're
exclusively
on
github,
we
also
have
a
an
IRC
channel
here,
CSS,
but
we're
pretty
much
exclusively
on
github
and
there's
tons
of
like
bugs
better
assurance,
a
tons
of
bugs
that
makes
us
look
bad.
There
are
a
lot
of
issues,
a
lot
of
issues
that
are
people
have
filed
and
some
of
them
are
are
trivial
to
fix,
but
we've
just
like
been
bit
working
on
other
stuff
and
be
kind
of
like
they're,
not
as
high
priority,
but
that's
a
great
way
for
someone
to
start
and
a
lot
of
people.
C
D
For
people
to
ask
questions
and
a
lot
of
times,
people
do
most
of
the
time
it's
some
spam
thing
anyways.
So
when
I
go
through
and
delete
them,
but
then
the
ones
that
are
legit
that
we
we
try
to
answer
and
most
of
them
we
will
answer
they'll,
be
like
a
very
general
question
and
so
will
will
answer
it
and
then
post
the
answer
publicly
on
the
blog.
So
you
can
look
out
there
too,
and
that's
all
linked
to
from
the
website.
D
There's
also
a
question
about
like
for
this
one
point,
o
stuff
that
we're
talking
about
do
we
have
a
target
month.
The
only
the
only
thing
I
remember
too
and
I
talking
about
is
I
said
a
while
back
like
maybe
three
months
back
or
something
like
it
be
awesome.
If
we
could
get
the
one
point
O
out
at
the
one
year
mark,
which
would.
D
G
D
27,
so
so
yeah
may
june
time
around
there
would
be
we
be
doing
really
good.
I
think
if
we
could
get
the
one
point
out,
I
hope
by
then,
but
really
it's
going
to
be
dependent
on
just
making
sure
that
these
issues
are
handled
and-
and
so
that's
its
it's
stable,
now
stable
ish
now,
but
we
do
plan
to
make
breaking
changes.
D
D
Yeah
yeah
me,
we
haven't
started
any
code
for
yet,
but
we
we
plan
to
very
soon
here.
We've
just
been
trying
to
figure
out
the
architecture
very
well
what
we
want
it,
what
problems?
We
actually
want
us
all
like
what
are
what
are
the
questions?
People
are
asking
when
they're
coming
to
peer
in
and
trying
to
see
if
they
can
work
for
them,
and
we
want
to
try
to
answer
those
as
succinctly
as
possible,
right
up
front
and
and
then
from
there
show
people
how
to
easily
get
started
as
quickly
as
possible.
D
A
D
Yeah
real
expression,
a
try,
try
this
stuff
out
too,
and-
and
let
us
know
you
know
how
these
tools
work
out
for
them.
We,
we
definitely
are
planning
to
add
a
section
to
the
website
to
to
mention
the
tools
that
collect
this
stuff
a
little
better
right.
Now,
it's
kind
of
all
over
the
place
so
well.
Some
of
the
projects
for
the
tools
are
under
my
personal
github
account
and
will
probably
move
those
over
under
the
Yui
or
yahoo
orgs
on
github
and
just
have
a
more
central
place
for
this
stuff.
A
D
The
tooling
is
all
available
now
we
we
actually
linked
to
the
grids.
The
grid
generator
thing
that
tio
was
showing
off
a
lot
that
that
we
link
to
on
the
on
the
website
and
ended
under
the
good
stocks.
So
that's
that's
linked
to
their
and
like
the
best
way
to
see
how
to
use
it
really.
Now
is
probably
to
look
at
what
we're
doing
on
the
pier
peers
website
and
also
what
we're
doing
in
Pierre
itself,
both
of
which
use
that
tool
and
then
for
the
grunt
one.
D
You
can
just
search
the
the
grunt
website
for
media
query
or
strip.
Mq
is
the
name
of
the
plug-in
and
that
one
we
contributed
to,
but
we
didn't
actually
write.
It
already
existed.
So
we
we
just
helped
improve
the
underlying
media,
query
matching
engine
and-
and
then
tilo
worked
with
him
to
integrate
that
and
set
some
more
sane
default.
So
we
just
basically
made
it
more
robust,
but
that
one's
done
by
another
guy
yeah.
B
I
think
once
the
ones
our
store,
our
web
story
gets
like
once
we
figure
out
the
web
UI
and
all
that
stuff
world
will
improve
the
website
so
that
these
tools
are
very
easily
found
over.
There
yeah
that's
research,
but
you
don't
want
to
just
put
that
up
right
now,
because
we
could
put
up
a
tools
page
right
now,
but
people
won't
understand
how
it
connects
back
to
pure
land
and
all
that
sense
of
we're
waiting
to
tell
the
whole
story
together.