Transcendent Design with Javascript & CSS

433acaea1012b25d97ae66da9b998dad?s=47 Andy Clarke
February 07, 2007

Transcendent Design with Javascript & CSS

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

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

February 07, 2007
Tweet

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
  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
  3. Transcendent Design with CSS & JavaScript CSS + DOM =

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

    Magic
  5. Transcendent Design with CSS & JavaScript Art
is
design
 without
 compromise Jeffrey
Veen

    “ “
  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
  7. Transcendent Design with CSS & JavaScript

  8. Transcendent Design with CSS & JavaScript

  9. Transcendent Design with CSS & JavaScript

  10. Transcendent Design with CSS & JavaScript

  11. Transcendent Design with CSS & JavaScript

  12. Transcendent Design with CSS & JavaScript

  13. Transcendent Design with CSS & JavaScript

  14. Transcendent Design with CSS & JavaScript

  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 “ “
  16. Transcendent Design with CSS & JavaScript

  17. Transcendent Design with CSS & JavaScript

  18. Transcendent Design with CSS & JavaScript

  19. Transcendent Design with CSS & JavaScript

  20. Transcendent Design with CSS & JavaScript

  21. Transcendent Design with CSS & JavaScript

  22. Transcendent Design with CSS & JavaScript

  23. Transcendent Design with CSS & JavaScript

  24. Transcendent Design with CSS & JavaScript

  25. Transcendent Design with CSS & JavaScript

  26. Transcendent Design with CSS & JavaScript

  27. Transcendent Design with CSS & JavaScript

  28. Transcendent Design with CSS & JavaScript

  29. Transcendent Design with CSS & JavaScript

  30. Transcendent Design with CSS & JavaScript

  31. Transcendent Design with CSS & JavaScript

  32. Transcendent Design with CSS & JavaScript

  33. Transcendent Design with CSS & JavaScript

  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
  35. Transcendent Design with CSS & JavaScript <div> <h1> <p> <q>

    <em> <dl> <dt> <dd> <img> <p> <body> <html> <ul> <li> <h4> <p> DOM
visualision
  36. Transcendent Design with CSS & JavaScript DOM
visualision <div#branding> <h4> <img>

    <body> <html> <div#content> <div#siteinfo> <div#content_main> <h4> <h5#tagline> <p> <p> <p> <ul> <p> <li>
  37. Transcendent Design with CSS & JavaScript <a> href title DOM
visualision

    anchor <p> <p>This
is
a
paragraph
that
contains
an
<a
href=
"#"
title="">anchor</a>.</p> This
is
a
paragraph
 that
contains
an

 .(period)
  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. “ “
  39. Transcendent Design with CSS & JavaScript

  40. Transcendent Design with CSS & JavaScript

  41. Transcendent Design with CSS & JavaScript

  42. Transcendent Design with CSS & JavaScript

  43. Transcendent Design with CSS & JavaScript

  44. Transcendent Design with CSS & JavaScript

  45. Transcendent Design with CSS & JavaScript </li> Green <li> <li>

    <li> <li> <li> <ul> </ul> </li> Purple </li> Red </li> Blue </li> Black
  46. Transcendent Design with CSS & JavaScript

  47. Transcendent Design with CSS & JavaScript </li> 2784 <li> <a>

    </a> </li> 3243 <li> <a> </a> </li> 1992 <li> <a> </a> </li> 2011 <li> <a> </a> </li> 2205 <li> <a> </a> <ol> </ol>
  48. Transcendent Design with CSS & JavaScript

  49. Transcendent Design with CSS & JavaScript <table> </table> <tr> </th>

    Taxi number <th> </th> Driver name <th> </th> License plate <th> </th> Rank order <th> </tr> <tr> </td> 8K33 <td> </td> Aaron <td> </td> 1 <td> </tr> </td> 666 DOM <td>
  50. Transcendent Design with CSS & JavaScript

  51. Transcendent Design with CSS & JavaScript

  52. Transcendent Design with CSS & JavaScript <h1> <p> <h2> <ul>

    <li> <h3> <p> <a> <img> <li
id="p89"> <li
id="p65">
  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
  54. Transcendent Design with CSS & JavaScript

  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');
  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
  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
  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
  59. Transcendent Design with CSS & JavaScript

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

  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
  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;
}
  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
  64. Transcendent Design with CSS & JavaScript

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

  66. Transcendent Design with CSS & JavaScript Zebra
striping

  67. Transcendent Design with CSS & JavaScript <tbody> <tr> <td>bicarbonate
of
soda</td> </tr>

    <tr> <td>cream
of
tartar</td> </tr> </tbody> Zebra
striping
  68. Transcendent Design with CSS & JavaScript <tbody> <tr
class="odd"> <td>bicarbonate
of
soda</td> </tr>

    <tr
class="even"> <td>cream
of
tartar</td> </tr> </tbody> Zebra
striping
  69. Transcendent Design with CSS & JavaScript tr:nth‐child(odd)
{
 background‐color
:
#fff;
} tr:nth‐child(even)
{
 background‐color
:
#ebebeb;
}

    Zebra
striping
  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
  71. Transcendent Design with CSS & JavaScript

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

  73. Transcendent Design with CSS & JavaScript

  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.
  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;
}
  76. Transcendent Design with CSS & JavaScript

  77. Transcendent Design with CSS & JavaScript <div
id="waffles"> <div
id="biscotti"> <div
id="muffins"> <div
id="bread">

    <div
id="jelly"> <div
id="icecream">
  78. Transcendent Design with CSS & JavaScript <div
id="waffles"> <div
id="biscotti"> <div
id="muffins"> <div
id="bread">

    <div
id="jelly"> <div
id="icecream"> position
:
a; position
:
b; position
:
c; position
:
d; position
:
e; position
:
f;
  79. Transcendent Design with CSS & JavaScript

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

    1 1 2 1 2 3 1 2 3
  81. Transcendent Design with CSS & JavaScript

  82. Transcendent Design with CSS & JavaScript CSS3
Advanced
Layout
 Module
demo

  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)
  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
  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?
  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
  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

  88. Transcendent Design with CSS & JavaScript Dean
Edwards’
IE7
Scripts <!‐‐[if
lte
IE
6]> <script
src="ie7‐standard‐p.js"
 type="text/javascript">

    </script> <![endif]‐‐>

  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
  90. Transcendent Design with CSS & JavaScript One
more
thing

  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