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
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 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 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 “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 “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 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 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 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 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
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
malarkey
kazukikanda
uxevents
hik0107
goodpatch
hinofu
uxaustralia
ykkntn
nextbeat
shoty_k2
ajstarks
mza
revolveconf
jonyablonski
chrislema
bkeepers
3n
tenderlove
productmarketing
lauravandoore
gr2m
addyosmani
philnash