$30 off During Our Annual Pro Sale. View Details »

Transcendent Design with Javascript & CSS

Andy Clarke
February 07, 2007

Transcendent Design with Javascript & CSS

Originally presented by Andy Clarke
at Web Directions North, Vancouver, Canada, 2007

Andy Clarke

February 07, 2007
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

  1. 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

    View Slide

  2. 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

    View Slide

  3. Transcendent Design with CSS & JavaScript
    CSS + DOM
    = Magic
    Clarke Gustafson
    Photo
by
Patrick
Lauke Photo
by
Cindy
Li

    View Slide

  4. Transcendent Design with CSS & JavaScript
    CSS + DOM
    = Magic

    View Slide

  5. Transcendent Design with CSS & JavaScript
    Art
is
design

    without

    compromise
    Jeffrey
Veen


    View Slide

  6. 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

    View Slide

  7. Transcendent Design with CSS & JavaScript

    View Slide

  8. Transcendent Design with CSS & JavaScript

    View Slide

  9. Transcendent Design with CSS & JavaScript

    View Slide

  10. Transcendent Design with CSS & JavaScript

    View Slide

  11. Transcendent Design with CSS & JavaScript

    View Slide

  12. Transcendent Design with CSS & JavaScript

    View Slide

  13. Transcendent Design with CSS & JavaScript

    View Slide

  14. Transcendent Design with CSS & JavaScript

    View Slide

  15. 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


    View Slide

  16. Transcendent Design with CSS & JavaScript

    View Slide

  17. Transcendent Design with CSS & JavaScript

    View Slide

  18. Transcendent Design with CSS & JavaScript

    View Slide

  19. Transcendent Design with CSS & JavaScript

    View Slide

  20. Transcendent Design with CSS & JavaScript

    View Slide

  21. Transcendent Design with CSS & JavaScript

    View Slide

  22. Transcendent Design with CSS & JavaScript

    View Slide

  23. Transcendent Design with CSS & JavaScript

    View Slide

  24. Transcendent Design with CSS & JavaScript

    View Slide

  25. Transcendent Design with CSS & JavaScript

    View Slide

  26. Transcendent Design with CSS & JavaScript

    View Slide

  27. Transcendent Design with CSS & JavaScript

    View Slide

  28. Transcendent Design with CSS & JavaScript

    View Slide

  29. Transcendent Design with CSS & JavaScript

    View Slide

  30. Transcendent Design with CSS & JavaScript

    View Slide

  31. Transcendent Design with CSS & JavaScript

    View Slide

  32. Transcendent Design with CSS & JavaScript

    View Slide

  33. Transcendent Design with CSS & JavaScript

    View Slide

  34. 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

    View Slide

  35. Transcendent Design with CSS & JavaScript












    DOM
visualision

    View Slide

  36. Transcendent Design with CSS & JavaScript
    DOM
visualision












    View Slide

  37. 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)

    View Slide

  38. 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.


    View Slide

  39. Transcendent Design with CSS & JavaScript

    View Slide

  40. Transcendent Design with CSS & JavaScript

    View Slide

  41. Transcendent Design with CSS & JavaScript

    View Slide

  42. Transcendent Design with CSS & JavaScript

    View Slide

  43. Transcendent Design with CSS & JavaScript

    View Slide

  44. Transcendent Design with CSS & JavaScript

    View Slide

  45. Transcendent Design with CSS & JavaScript

    Green








    Purple

    Red

    Blue

    Black

    View Slide

  46. Transcendent Design with CSS & JavaScript

    View Slide

  47. Transcendent Design with CSS & JavaScript

    2784


    3243


    1992


    2011


    2205



    View Slide

  48. Transcendent Design with CSS & JavaScript

    View Slide

  49. Transcendent Design with CSS & JavaScript



    Taxi number


    Driver name


    License plate


    Rank order


    8K33


    Aaron


    1


    666 DOM

    View Slide

  50. Transcendent Design with CSS & JavaScript

    View Slide

  51. Transcendent Design with CSS & JavaScript

    View Slide

  52. Transcendent Design with CSS & JavaScript










    View Slide

  53. 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

    View Slide

  54. Transcendent Design with CSS & JavaScript

    View Slide

  55. 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');

    View Slide

  56. 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

    View Slide

  57. 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

    View Slide

  58. 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

    View Slide

  59. Transcendent Design with CSS & JavaScript

    View Slide

  60. Transcendent Design with CSS & JavaScript
    CSS3
Multi‐column
Module

    View Slide

  61. 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

    View Slide

  62. 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;
}

    View Slide

  63. 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

    View Slide

  64. Transcendent Design with CSS & JavaScript

    View Slide

  65. Transcendent Design with CSS & JavaScript
    CSS3
Multi‐column

    Module
demo

    View Slide

  66. Transcendent Design with CSS & JavaScript
    Zebra
striping

    View Slide

  67. Transcendent Design with CSS & JavaScript


    bicarbonate
of
soda


    cream
of
tartar


    Zebra
striping

    View Slide

  68. Transcendent Design with CSS & JavaScript


    bicarbonate
of
soda


    cream
of
tartar


    Zebra
striping

    View Slide

  69. Transcendent Design with CSS & JavaScript
    tr:nth‐child(odd)
{

    background‐color
:
#fff;
}
    tr:nth‐child(even)
{

    background‐color
:
#ebebeb;
}
    Zebra
striping

    View Slide

  70. 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

    View Slide

  71. Transcendent Design with CSS & JavaScript

    View Slide

  72. Transcendent Design with CSS & JavaScript
    CSS3
Advanced
Layout
Module

    View Slide

  73. Transcendent Design with CSS & JavaScript

    View Slide

  74. 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.

    View Slide

  75. 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;
}

    View Slide

  76. Transcendent Design with CSS & JavaScript

    View Slide

  77. Transcendent Design with CSS & JavaScript




    View Slide

  78. Transcendent Design with CSS & JavaScript




    position
:
a; position
:
b; position
:
c;
    position
:
d; position
:
e; position
:
f;

    View Slide

  79. Transcendent Design with CSS & JavaScript

    View Slide

  80. Transcendent Design with CSS & JavaScript
    1 2 3 4
    1 1 2
    1 2 3
    1 2 3

    View Slide

  81. Transcendent Design with CSS & JavaScript

    View Slide

  82. Transcendent Design with CSS & JavaScript
    CSS3
Advanced
Layout

    Module
demo

    View Slide

  83. 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)

    View Slide

  84. Transcendent Design with CSS & JavaScript
    Working
with
libraries
    Some
give
JS
the
feel
of
another
language
    Prototype,
Scriptaculous
&
Lowpro
‐
Ruby
    Mochikit
–
Python
    YUI
–
Java

    View Slide

  85. 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?

    View Slide

  86. 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

    View Slide

  87. 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


    View Slide

  88. Transcendent Design with CSS & JavaScript
    Dean
Edwards’
IE7
Scripts

    type="text/javascript">


    View Slide

  89. 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

    View Slide

  90. Transcendent Design with CSS & JavaScript
    One
more
thing

    View Slide

  91. 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

    View Slide