Slide 1
Slide 1 text
Originally presented by Andy Clarke
at Web Directions North, Vancouver, Canada, 2007
Transcendent Design
with Javascript & CSS
Andy Clarke is a digital designer, speaker,
and writer whose designs have helped
companies around the world to increase
their sales pipeline and revenue, and
charities to increase donations.
He founded Stuff & Nonsense and has
consulted and designed for clients including
Disney Store UK, Fairfax Media, Home Office
(UK), Greenpeace, ISO, SAP, STV, SunLife,
WIPO, and WWF.
He works on creative website and digital
product designs and provides ongoing
creative direction. He coaches agencies and
mentors designers on dealing with clients,
and delivering creative projects.
If you’re looking to design better digital
products and websites, develop a design
system or style guide, or want to understand
how design can help your business, you
should talk to him.
Stuff & Nonsense Ltd. Eversleigh, Lon Capel, Gwaenysgor, Flintshire, LL18 6EJ, UK
For work enquiries go to
stuffandnonsense.co.uk
or call +44 (0)1745 851848
Slide 2
Slide 2 text
Transcendent Design with CSS & JavaScript
CSS + DOM
= Magic
Transcendent Design
with CSS & JavaScript
ANDY CLARKE AARON GUSTAFSON
WEB DIRECTIONS NORTH 2007, VANCOUVER, CANADA
Copyright. All Rights Reserved. All works are copyright of their original owners and all copyrights,
trademarks and ownerships recognized. This presentation is for educational purposes only
Slide 3
Slide 3 text
Transcendent Design with CSS & JavaScript
CSS + DOM
= Magic
Clarke Gustafson
Photo
by
Patrick
Lauke Photo
by
Cindy
Li
Slide 4
Slide 4 text
Transcendent Design with CSS & JavaScript
CSS + DOM
= Magic
Slide 5
Slide 5 text
Transcendent Design with CSS & JavaScript
Art
is
design
without
compromise
Jeffrey
Veen
“
“
Slide 6
Slide 6 text
Transcendent Design with CSS & JavaScript
Environment;
The
inflexibility
of
the
2d
screen,
Materials;
The
limitations
of
markup
and
CSS,
Medium;
Poorer
CSS
support
in
older
browsers
Ourselves;
Unlearning
that
we
have
learned
from
past
experience
Slide 7
Slide 7 text
Transcendent Design with CSS & JavaScript
Slide 8
Slide 8 text
Transcendent Design with CSS & JavaScript
Slide 9
Slide 9 text
Transcendent Design with CSS & JavaScript
Slide 10
Slide 10 text
Transcendent Design with CSS & JavaScript
Slide 11
Slide 11 text
Transcendent Design with CSS & JavaScript
Slide 12
Slide 12 text
Transcendent Design with CSS & JavaScript
Slide 13
Slide 13 text
Transcendent Design with CSS & JavaScript
Slide 14
Slide 14 text
Transcendent Design with CSS & JavaScript
Slide 15
Slide 15 text
Transcendent Design with CSS & JavaScript
We've
arrived
at
a
situation
where
beautiful
sites
with
beautiful
code
are
being
produced
by
the
hundreds;
every
month,
every
week,
every
day.
It's
no
longer
a
myth
that
you
can
produce
a
stunning
site
with
Web
Standards.
Cameron
Adams
“
“
Slide 16
Slide 16 text
Transcendent Design with CSS & JavaScript
Slide 17
Slide 17 text
Transcendent Design with CSS & JavaScript
Slide 18
Slide 18 text
Transcendent Design with CSS & JavaScript
Slide 19
Slide 19 text
Transcendent Design with CSS & JavaScript
Slide 20
Slide 20 text
Transcendent Design with CSS & JavaScript
Slide 21
Slide 21 text
Transcendent Design with CSS & JavaScript
Slide 22
Slide 22 text
Transcendent Design with CSS & JavaScript
Slide 23
Slide 23 text
Transcendent Design with CSS & JavaScript
Slide 24
Slide 24 text
Transcendent Design with CSS & JavaScript
Slide 25
Slide 25 text
Transcendent Design with CSS & JavaScript
Slide 26
Slide 26 text
Transcendent Design with CSS & JavaScript
Slide 27
Slide 27 text
Transcendent Design with CSS & JavaScript
Slide 28
Slide 28 text
Transcendent Design with CSS & JavaScript
Slide 29
Slide 29 text
Transcendent Design with CSS & JavaScript
Slide 30
Slide 30 text
Transcendent Design with CSS & JavaScript
Slide 31
Slide 31 text
Transcendent Design with CSS & JavaScript
Slide 32
Slide 32 text
Transcendent Design with CSS & JavaScript
Slide 33
Slide 33 text
Transcendent Design with CSS & JavaScript
Slide 34
Slide 34 text
Transcendent Design with CSS & JavaScript
Semantics
means
“meaning”
Markup
as
meaningful
to
content
The
content‐out
approach
Aids
accessibility
&
SEO
Valid
is
not
always
meaningful
Meaningful
markup
Slide 35
Slide 35 text
Transcendent Design with CSS & JavaScript
DOM
visualision
Slide 36
Slide 36 text
Transcendent Design with CSS & JavaScript
DOM
visualision
Slide 37
Slide 37 text
Transcendent Design with CSS & JavaScript
href title
DOM
visualision
anchor
This is a paragraph that contains an anchor.
This is a paragraph that contains an .(period)Slide 38
Slide 38 text
Transcendent Design with CSS & JavaScript
Simply
replacing
table
cells
with
div
elements
will
not
help
you
gain
the
full
benefits
of
using
web
standards
or
CSS.
Unless
you
have
carefully
considered
the
meaning
of
each
division,
div
elements
are
little
better
than
using
tables.
“
“
Slide 39
Slide 39 text
Transcendent Design with CSS & JavaScript
Slide 40
Slide 40 text
Transcendent Design with CSS & JavaScript
Slide 41
Slide 41 text
Transcendent Design with CSS & JavaScript
Slide 42
Slide 42 text
Transcendent Design with CSS & JavaScript
Slide 43
Slide 43 text
Transcendent Design with CSS & JavaScript
Slide 44
Slide 44 text
Transcendent Design with CSS & JavaScript
Slide 45
Slide 45 text
Transcendent Design with CSS & JavaScript
Green
Purple
Red
Blue
Black
Slide 46
Slide 46 text
Transcendent Design with CSS & JavaScript
Slide 48
Slide 48 text
Transcendent Design with CSS & JavaScript
Slide 49
Slide 49 text
Transcendent Design with CSS & JavaScript
Taxi number
Driver name
License plate
Rank order
8K33
Aaron
1
666 DOM
Slide 50
Slide 50 text
Transcendent Design with CSS & JavaScript
Slide 51
Slide 51 text
Transcendent Design with CSS & JavaScript
Slide 52
Slide 52 text
Transcendent Design with CSS & JavaScript
Slide 53
Slide 53 text
Transcendent Design with CSS & JavaScript
“Mastering
positioning
with
its
enormous
potential
for
layout
flexibility
and
robust
behavior
will
be
one
of
the
most
rewarding
challenges
you
can
take
on
when
learning
CSS.”
CSS
positioning
Slide 54
Slide 54 text
Transcendent Design with CSS & JavaScript
Slide 55
Slide 55 text
Transcendent Design with CSS & JavaScript
CSS
and
JavaScript
CSS JavaScript
a var
a
=
document.getElementsByTagName('a');
#content var
container
=
document.getElementById
('content');
#extras
p var
paras
=
document.getElementById
('extras').getElementsByTagName('p');
Slide 56
Slide 56 text
Transcendent Design with CSS & JavaScript
“Style
an
element
either
based
on
whether
an
element
has
an
attribute
name
such
as
href
or
based
on
the
attribute
value.”
Attribute
selectors
Slide 57
Slide 57 text
Transcendent Design with CSS & JavaScript
var
a
=
document.getElementById
(
'content'
).getElementsByTagName(
'a'
)[0]
var
href
=
a.getAttribute(
'href'
);
or
set
them
a.setAttribute(
'title',
'I
added
this
with
the
DOM'
);
Accessing
attributes
You
can
get
attribute
values
Slide 58
Slide 58 text
Transcendent Design with CSS & JavaScript
var
ul
=
document.createElement(
'ul'
);
var
li
=
document.createElement(
'li'
);
var
i
=
1;
while(
i
<
4
){
var
temp
=
li.cloneNode(
true
);
temp.appendChild(
document.createTextNode(
'this
is
LI
number
'+i
)
);
ul.appendChild(
temp
);
i++;
}
document.getElementsByTagName(
'body'
)[0].appendChild(
ul
);
Creating
content
Slide 59
Slide 59 text
Transcendent Design with CSS & JavaScript
Slide 60
Slide 60 text
Transcendent Design with CSS & JavaScript
CSS3
Multi‐column
Module
Slide 61
Slide 61 text
Transcendent Design with CSS & JavaScript
CSS3
Multi‐column
Module
column‐count
column‐width
column‐gap
column‐rule
‐moz‐column‐count
‐moz‐column‐width
‐moz‐column‐gap
‐moz‐column‐rule
Slide 62
Slide 62 text
Transcendent Design with CSS & JavaScript
CSS3
Multi‐column
Module
#content_main
ul
{
column‐width
:
18em;
column‐gap
:
25px;
column‐rule
:
thin
solid
black;
‐moz‐column‐width
:
18em;
‐moz‐column‐gap
:
25px;
‐moz‐column‐rule
:
thin
solid
black;
}
Slide 63
Slide 63 text
Transcendent Design with CSS & JavaScript
“As
proposed
by
Andy
Clarke
in
his
blog
[1],
the
'column‐
rule‐image'
property
has
been
added
to
the
spec.
In
the
blog,
the
examples
are:
body
{
column‐rule‐image
:
url(rule.png);
}
body
{
column‐rule‐image
:
url(rule.png)
repeat‐x
0
0;
}”
Håkon
Wium
Lie.
CTO
Opera
Software
CSS3
Multi‐column
Module
Slide 64
Slide 64 text
Transcendent Design with CSS & JavaScript
Slide 65
Slide 65 text
Transcendent Design with CSS & JavaScript
CSS3
Multi‐column
Module
demo
Slide 66
Slide 66 text
Transcendent Design with CSS & JavaScript
Zebra
striping
Slide 67
Slide 67 text
Transcendent Design with CSS & JavaScript
bicarbonate
of
soda
cream
of
tartar
Zebra
striping
Slide 68
Slide 68 text
Transcendent Design with CSS & JavaScript
bicarbonate
of
soda
cream
of
tartar
Zebra
striping
Slide 69
Slide 69 text
Transcendent Design with CSS & JavaScript
tr:nth‐child(odd)
{
background‐color
:
#fff;
}
tr:nth‐child(even)
{
background‐color
:
#ebebeb;
}
Zebra
striping
Slide 70
Slide 70 text
Transcendent Design with CSS & JavaScript
tr:nth‐child(10n‐1)
{
background‐color
:
#ebebeb;
}
Count
up
the
number
of
rows
in
increments
of
10
(10,
20,
30
etc.)
and
target
the
rows
that
come
immediately
before
(‐1),
so
enabling
you
to
style
the
9th,
19th,
29th,
etc.
rows.
Zebra
striping
Slide 71
Slide 71 text
Transcendent Design with CSS & JavaScript
Slide 72
Slide 72 text
Transcendent Design with CSS & JavaScript
CSS3
Advanced
Layout
Module
Slide 73
Slide 73 text
Transcendent Design with CSS & JavaScript
Slide 74
Slide 74 text
Transcendent Design with CSS & JavaScript
CSS3
Advanced
Layout
Module
Slot
letter identifies
the
slot
within
the
grid
for
any
content
that
will
be
positioned
within
it
@
(at
symbol) A
default
slot
into
which
content
that
has
not
been
situated
can
flow.
.
(period) A
white‐space
slot
that
can
have
no
content
inserted
into
it.
Slide 75
Slide 75 text
Transcendent Design with CSS & JavaScript
CSS3
Advanced
Layout
Module
div#biscotti
{
position
:
a;
}
div#wafles
{
position
:
b;
}
div#muffins
{
position
:
c;
}
div#jelly
{
position
:
d;
}
div#bread
{
position
:
e;
}
div#icecream
{
position
:
f;
}
Slide 76
Slide 76 text
Transcendent Design with CSS & JavaScript
Slide 77
Slide 77 text
Transcendent Design with CSS & JavaScript
Slide 78
Slide 78 text
Transcendent Design with CSS & JavaScript
position
:
a; position
:
b; position
:
c;
position
:
d; position
:
e; position
:
f;
Slide 79
Slide 79 text
Transcendent Design with CSS & JavaScript
Slide 80
Slide 80 text
Transcendent Design with CSS & JavaScript
1 2 3 4
1 1 2
1 2 3
1 2 3
Slide 81
Slide 81 text
Transcendent Design with CSS & JavaScript
Slide 82
Slide 82 text
Transcendent Design with CSS & JavaScript
CSS3
Advanced
Layout
Module
demo
Slide 83
Slide 83 text
Transcendent Design with CSS & JavaScript
Prototype
(prototypejs.org)
Moo.fx
(moofx.mad4milk.net)
Dojo
(dojotoolkit.org)
jQuery
(jquery.com)
Lowpro
(ujs4rails.com)
Working
with
libraries
YUI
(developer.yahoo.com/yui
)
Mochikit
(mochikit.com)
Scriptaculous
(script.aculo.us)
Rico
(openrico.org)
Slide 84
Slide 84 text
Transcendent Design with CSS & JavaScript
Working
with
libraries
Some
give
JS
the
feel
of
another
language
Prototype,
Scriptaculous
&
Lowpro
‐
Ruby
Mochikit
–
Python
YUI
–
Java
Slide 85
Slide 85 text
Transcendent Design with CSS & JavaScript
Working
with
libraries
Why
do
we
use
them?
They
make
our
lives
easier.
The
key
there
is
easier.
Which
one
is
best?
How
do
I
get
started?
Slide 86
Slide 86 text
Transcendent Design with CSS & JavaScript
Dean
Edwards’
IE7
Scripts
allow
you
to
use
CSS2
and
even
some
CSS3
selectors
in
your
stylesheets
and
transforms
legacy
versions
of
Internet
Explorer
into
a
shiny
new
browser.
“
“
Dean
Edwards’
IE7
Scripts
Slide 87
Slide 87 text
Transcendent Design with CSS & JavaScript
Child
selectors
Adjacent
sibling
selectors
Attribute
value
selectors
:first‐child
:last‐child
:only‐child
Dean
Edwards’
IE7
Scripts
:nth‐child
pseudo‐classes
:before
:after
:hover,
:active,
:focus
all
elements
PNG
alpha‐transparency
Slide 88
Slide 88 text
Transcendent Design with CSS & JavaScript
Dean
Edwards’
IE7
Scripts
Slide 89
Slide 89 text
Transcendent Design with CSS & JavaScript
CSS + DOM
= Magic
Transcendent Design
with CSS & JavaScript
ANDY CLARKE AARON GUSTAFSON
WEB DIRECTIONS NORTH 2007, VANCOUVER, CANADA
Copyright. All Rights Reserved. All works are copyright of their original owners and all copyrights,
trademarks and ownerships recognized. This presentation is for educational purposes only
Slide 90
Slide 90 text
Transcendent Design with CSS & JavaScript
One
more
thing
Slide 91
Slide 91 text
Transcendent Design with CSS & JavaScript
CSS + DOM
= Magic
Transcendent Design
with CSS & JavaScript
ANDY CLARKE AARON GUSTAFSON
WEB DIRECTIONS NORTH 2007, VANCOUVER, CANADA
Copyright. All Rights Reserved. All works are copyright of their original owners and all copyrights,
trademarks and ownerships recognized. This presentation is for educational purposes only