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

    Transcendent Design with CSS & JavaScript CSS + DOM =

    Magic Clarke Gustafson Photo
by
Patrick
Lauke Photo
by
Cindy
Li
  4. 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
  5. 35.

    Transcendent Design with CSS & JavaScript <div> <h1> <p> <q>

    <em> <dl> <dt> <dd> <img> <p> <body> <html> <ul> <li> <h4> <p> DOM
visualision
  6. 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>
  7. 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)
  8. 45.

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

    <li> <li> <li> <ul> </ul> </li> Purple </li> Red </li> Blue </li> Black
  9. 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>
  10. 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>
  11. 52.

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

    <li> <h3> <p> <a> <img> <li
id="p89"> <li
id="p65">
  12. 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');
  13. 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
  14. 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
  15. 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
  16. 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;
}
  17. 67.

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

    <tr> <td>cream
of
tartar</td> </tr> </tbody> Zebra
striping
  18. 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
  19. 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.
  20. 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;
  21. 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)
  22. 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

  23. 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
  24. 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