Transcendent Design with Javascript & CSS

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

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

Magic Clarke Gustafson Photo by Patrick Lauke Photo by Cindy Li

Magic

Transcendent Design with CSS & JavaScript Art is design  without  compromise Jeffrey Veen
“ “

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

Transcendent Design with CSS & JavaScript

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 “ “

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

Transcendent Design with CSS & JavaScript <div> <h1> <p> <q>
<em> <dl> <dt> <dd> <img> <p> <body> <html> <ul> <li> <h4> <p> DOM visualision

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>

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)

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

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

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>

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>

Transcendent Design with CSS & JavaScript <h1> <p> <h2> <ul>
<li> <h3> <p> <a> <img> <li id="p89"> <li id="p65">

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

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

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

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

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

Transcendent Design with CSS & JavaScript CSS3 Multi‐column Module

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

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

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

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

Transcendent Design with CSS & JavaScript Zebra striping

Transcendent Design with CSS & JavaScript <tbody> <tr> <td>bicarbonate of soda</td> </tr>
<tr> <td>cream of tartar</td> </tr> </tbody> Zebra striping

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

Transcendent Design with CSS & JavaScript tr:nth‐child(odd) {  background‐color : #fff; } tr:nth‐child(even) {  background‐color : #ebebeb; }
Zebra striping

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

Transcendent Design with CSS & JavaScript CSS3 Advanced Layout Module

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.

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

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

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;

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

Transcendent Design with CSS & JavaScript CSS3 Advanced Layout  Module demo

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)

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

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?

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

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 

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

Transcendent Design with CSS & JavaScript One more thing

Transcendent Design with Javascript & CSS

Transcendent Design with Javascript & CSS

More Decks by Andy Clarke

Other Decks in Design

Featured

Transcript