HTML5 & CSS3 in Drupal (on the Bayou)

Beginner & Intermediate Guide to HTML5/CSS3 In Drupal By Kendall Totten @starryeyez024 #HTML5CSS3 http://t.co/VssZle71 Thursday, December 8, 2011 1

BROUGHT TO YOU BY THE GOOD FOLKS AT DO DRUPAL RIGHT Thursday, December 8, 2011 2

About Me • Bachelors in Communication Technology & Graphic Design from Eastern Michigan University • Drupal Designer & Theme Specialist at Mediacurrent • Working in the Drupal space for about 3 years • Working with Drupal since version 5 Kendall Totten Thursday, December 8, 2011 3

What will you learn? Thursday, December 8, 2011 4

What will you learn? HTML5 CSS3 • Semantic Web • Text in Columns • Microformats • Transitions • Real Life applications • CSS3Pie • Tactics to enhance • Using SVG compatibility • The future of CSS • Enhance UX • How CSS3 can help you • Semantic image captions design for mobile • The Omega Theme • HTML5 Themes and Modules • How to start using HTML5 Today! Thursday, December 8, 2011 4

What is HTML5? Thursday, December 8, 2011 5

Web Thursday, December 8, 2011 6

Web HTML 4.01 Flash Help Browser Support Plugins Thursday, December 8, 2011 6

Web HTML5 HTML 4.01 Flash Help Browser Support Plugins Thursday, December 8, 2011 6

Next generation of HTML The latest version of HTML known as HTML5, a set of capabilities that gives web designers and developers the ability to create the next generation of great online applications. “Upgrading” to HTML5 can be as simple as changing your doctype. <!DOCTYPE html> and resetting your stylesheet: http://html5doctor.com html-5-reset-stylesheet Thursday, December 8, 2011 7

A Better Blend Thursday, December 8, 2011 8

A Better Blend HTML5 CSS3 JS Thursday, December 8, 2011 8

Who Cares? Thursday, December 8, 2011 9

From Dries "I believe in HTML5 enough that I wanted to make it one of the top 5 initiatives for Drupal 8; and switch Drupal's default doctype from XHTML to HTML5. This is the fifth official Drupal 8 initiative after the Configuration Management, Design,Web Services and Multilingual initiatives." — Dries Buytaert Thursday, December 8, 2011 10

HTML5 Fallout • Change Doctype • Start using Outliner • Use Header, Section, Footer, and Nav Tags • Start thinking about Semantics Markup Thursday, December 8, 2011 11

HTML5 Elements Thursday, December 8, 2011 12

HTML5 Elements Head Sections Grouping Tables doctype body p table html article hr caption head nav pre thead title blockquote tbody aside base ol tfoot section ul tr link meta header li th style footer dl, dt, dd td script h1-h6 ﬁgure col noscript hgroup ﬁgcaption colgroup address div Thursday, December 8, 2011 12

http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-ﬂowchart.pdf Thursday, December 8, 2011 13

HTML5 Elements Thursday, December 8, 2011 14

HTML5 Elements Forms Embedded Text-level form img a var ﬁeldset iframe em legend embed strong mark label object i, b bdi input param u bdo button video s ruby, rt, rp select audio small span datalist abbr br source optgroup q canvas cite Interactive option track dfn details textarea map sub, sup summary keygen area time command output code menu progress meter kbd Edits samp del, ins wbr Thursday, December 8, 2011 14

HTML5 Semantics Thursday, December 8, 2011 15

Getting information off the Internet is like taking a drink from a ﬁre hydrant. —Mitchell Kapor Thursday, December 8, 2011 16

The Missing Link Thursday, December 8, 2011 17

What is Semantic Web? "The Semantic Web is a web that is able to describe things in a way that computers can understand." Source: http://www.w3schools.com/semweb/default.asp Thursday, December 8, 2011 18

Semantic Beneﬁts By making the web understandable to machines: • Programs and web sites can exchange information • Search engines can return more relevant information in results • Data compilers can combine data from different datasets to ﬁnd new and astounding things, like weather data or stock market info. Thursday, December 8, 2011 19

Semantic Beneﬁts By making the web understandable to machines: • Programs and web sites can exchange information • Search engines can return more relevant information in results • Data compilers can combine data from different datasets to ﬁnd new and astounding things, like weather data or stock market info. I love Drupal. Thursday, December 8, 2011 19

HTML5 Structure Thursday, December 8, 2011 20

HTML5 Structure Thursday, December 8, 2011 21

HTML5 Structure <header> <nav> <section> <article> <aside> <article> <footer> Thursday, December 8, 2011 21

<header> </hgroup> <article> <header> Wrong Way <h1>My best blog post</h1> </header> </article> OR <header> <hgroup> <h1>My best blog post</h1> </hgroup> <p>by Rich Clark</p> </header> Thursday, December 8, 2011 22

<header></hgroup> <header> <hgroup> <h1>The reality dysfunction</h1> <h2>Space is not the only void</h2> Right Way </hgroup> <p>By Richard Clark</p> <p><time datetime="2011-03-20"> March 20th, 2011</time></p> </header> <article> <header> <h1>Title of this article</h1> <p>By Richard Clark</p> </header> <p>...Lorem Ipsum dolor set amet...</p> </article> Thursday, December 8, 2011 23

<section> <section id="wrapper"> <header> <h1>My super duper page</h1> </header> Wrong Way <section id="main"> Section Content </section> <section id="secondary"> Secondary Content </section> <section id="footer"> <footer> Footer Content </footer> </section> Thursday, December 8, 2011 24

<section> <div id="wrapper"> <article> <header> <h1>Document Outlines</h1> Right Way Header Content </header> <section id="what-are-outlines"> <h2>What are document outlines?</h2> ...content </section> <section id="outlines-in-html4"> <h2>Outlines in HTML4</h2> ...content </section> </article> <footer> Footer Content </footer> </div> Thursday, December 8, 2011 25

Use An Outliner Tool • Use to group content into logical category or sections • With very few exceptions, section should not be used if there is no natural heading for it. • Section should not be used like aside or nav containers just to position content • Check your work in a HTML5 Outliner Tool Thursday, December 8, 2011 26

Outliner Output http://gsnedders.html5.org/outliner Thursday, December 8, 2011 27

Quick Tip • “<body>” is already a wrapper and can be hacked to achieve some pretty remarkable layout and clean code! It can have a height, width, border, drop-shadow; you name it. • HTML5 Does not require you to actually include the “<body>” tag. Thursday, December 8, 2011 28

<nav> The following shouldnʼt be enclosed by <nav> • Pagination controls Wrong Way • Social links • Tags on a blog post • Categories on a blog post • Tertiary navigation • Fat footers Thursday, December 8, 2011 29

Semantic Captions A caption is the definition of an image Use Figure to enclose the image and the Figure Caption, and use some CSS3 to add a nice slide in effect. http://css-tricks.com/examples/SlideinCaptions/ <figure> <img src="yay.jpg" alt=""> <figcaption class="from-left"> yay!!! </figcaption> </figure> Thursday, December 8, 2011 30

Code Sample <figure> <img src="/kookaburra.jpg" alt="Kooaburra"> <img src="/pelican.jpg" alt="Pelican stood on the beach"> <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet"> <figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a> </figcaption> </figure> Thursday, December 8, 2011 31

Microdata vs. Microformats Thursday, December 8, 2011 32

Microdata & Microformats • Your web pages have an underlying meaning that people understand when they read the web pages. • But search engines have a limited understanding of what is being discussed on those pages. • Microdata is a set of tags, introduced with HTML5, that allows you to do this. http://schema.org Thursday, December 8, 2011 34

HTML5 & Microdata Thursday, December 8, 2011 35

Microdata Global Attributes: • itemscope – Creates the Item and indicates that descendants of this element contain information about it. • itemprop – Indicates that its containing tag holds the value of the speciﬁed item property. The properties name and value context are described by the items vocabulary. • itemtype – A valid URL of a vocabulary that describes the item and its properties context. • itemid – Indicates a unique identiﬁer of the item. • itemref – Properties that are not descendants of the element with the itemscope attribute can be associated with the item using this attribute. Provides a list of id's of elements with additional properties elsewhere in the document. Thursday, December 8, 2011 36

Microdata <div itemscope itemtype="http://data-vocabulary.org/Event"> <a itemprop="url" href="http://www.example.com/events/spinaltap" > <span itemprop="summary" >Spinal Tap</span> </a> <img itemprop="photo" src="spinal_tap.jpg" /> <span itemprop="description" > After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour. </span> When: <time itemprop="startDate" datetime="2015-10-15T19:00-08:00"> Oct 15, 7:00PM </time>— <time itemprop="endDate" datetime="2015-10-15T19:00-08:00"> Oct 15, 9:00PM </time> Where: <span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization"> <span itemprop="name" >Warﬁeld Theatre</span> <span itemprop="ocality" >San Francisco</span> </div> http://schema.org/Event Thursday, December 8, 2011 37

Microdata Module Rich Snippets Testing Tool http://www.google.com/webmasters/tools/richsnippets Thursday, December 8, 2011 38

HTML5 & Microformats Thursday, December 8, 2011 39

Microformats • Used on web pages to describe a speciﬁc type of information —for example, a review, an event, a product, a business, or a person. • In general, microformats use the class attribute in HTML tags (often <span> or <div>) to assign brief and descriptive names to entities and their properties. Thursday, December 8, 2011 40

Code Sample <div> <a href="http://www.example.com/events/spinaltap" class="url summary">Spinal Tap</a> <img src="spinal_tap.jpg" class="photo" /> <span class="description"> After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour with a San Francisco show. </span> When: <span class="dtstart"> Oct 15, 7:00PM<span class="value-title" title="2015-10-15T19:00-08:00"></span> <span class="dtend"> 9:00PM<span class="value-title" title="2015-10-15T21:00-08:00"></span> </span> Where: <div class="location vcard"> <span class="fn org">Warﬁeld Theatre</span>, <span class="adr"> <span class="street-address">982 Market St</span>, <span class="locality">San Francisco</span>, <span class="region">CA</span> </span> <span class="geo"> <span class="latitude"> <span class="value-title" title="37.774929" ></span> </span> </span> </div> </div> Thursday, December 8, 2011 41

hCard • hCard uses a class of fn (meaning Full Name) to identify a name. As is this case there’s no element surrounding my name, we can just use a span. • <div class="bio vcard"> <h3>About the author</h3> <p><span class="fn">Kendall Totten</span> is a web developer... • At <a class="org" href="http://www.mediacurrent.com/"> Mediacurrent</a> she works on Drupal Theming and Front-End Development. Kendall keeps a <a class="url" href="http:// www.kendallsdesign.com/">personal weblog</a> covering web development issues and themes.</p> </div> Thursday, December 8, 2011 42

Microformat Tools • Microformat biz card creator: http://microformats.org/code/hcard/creator • hReview Creator http://microformats.org/code/hreview/creator • hCalendar Creator http://microformats.org/code/hcalendar/creator Thursday, December 8, 2011 44

HTML5 Themes Thursday, December 8, 2011 45

Drupal Themes • AdaptiveTheme • Genesis • Omega • Gamma (Omega sub theme) • HTML5 Base • Beta (Omega sub theme) • Boron • Zentropy • Plink http://www.qemist.us/content/acquiacom-and-omega-theme-getting-down-brass-tacks Thursday, December 8, 2011 46

The Winners Table http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7 Thursday, December 8, 2011 47

Delta Module • Delta allows you, via the Context module to make duplicates of your theme settings (templates) for any context on your site. • This gives you the ability to use these templates as a reaction in Context. </awesomesauce> Thursday, December 8, 2011 48

JS for your Theme • Modernizr - modernizr-1.6.min.js • Download from: http://www.modernizr.com/ • IE6 ping ﬁx - dd_belatedpng.js • Download from: http://www.dillerdesign.com/experiment/ DD_belatedPNG/ • HTML5 Shim -html5.js (comes included with Omega!) • Download from: http://code.google.com/p/html5shim/ • Media-size responsive images - respond.js • Download from: https://github.com/scottjehl/Respond#readme Thursday, December 8, 2011 49

HTML5 Modules Thursday, December 8, 2011 50

Drupal Modules There are 26 HTML5 based modules for Drupal 6 and 22 for Drupal 7. Some of them are still in development. • HTML5 Tools (your secret weapon!) • Elements • Video - most popular HTML5 based module for both Drupal 6 and 7 • VideoJS • Media: Vimeo • Media: Archive • Aloha HTML5 Editor • Plupload Integration • MediaFront • JPlayer Thursday, December 8, 2011 51

Video Module Video module allows you to upload video in any format, play video in any format, transcode video to h246, Theora, VP8 using FFMPEG , automatically creates video thumbnails, use video thumbnails in video node teaser, Very reliable API for converting videos and auto thumbnailing, can be used as an all-in-one video solution for Drupal. http://drupal.org/project/video Thursday, December 8, 2011 52

More HTML5 Tools Features you can ﬁnd in the Drupal 7 version: • Support for the html5shiv plugin (for older browsers) • Support for the innershiv plugin • Support for Google Chrome Frame • Adds new elements for use in the Views module • Support for the html5 doctype with or without RDF. • Make new Elements available in the Views UI • Tons of other forms and markup changes. Thursday, December 8, 2011 53

HTML5 Tools Module Override Drupal's Forms with HTML5 markup • Site information • Search block • Search form • User registration: url, email, telephone • Contact forms • Table select widget yoursite.com/admin/conﬁg/markup/html5-tools Thursday, December 8, 2011 54

HTML5 Tools Module Simplify <HEAD> Markup • Simplify doctype and add html5shiv • Simplify style tags • Simplify javascript tags • Simplify meta tags • Add Google Chrome Frame headers • Adds the X-UA-Compatible: IE=Edge,chrome=1 headers for IE browsers. This will not prompt the user to install Google Chrome Frame, it will just use it if available. yoursite.com/admin/conﬁg/markup/html5-tools Thursday, December 8, 2011 55

HTML5 Tools Module HTML5 Tools: Convert other variables • Alter publication date markup • If one of these is not working, it might be because your theme is overriding what is specified here. Themes always get the last say in how something is outputted. Check your theme's template.php file. yoursite.com/admin/config/markup/html5-tools Thursday, December 8, 2011 56

Code Sample <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <IfModule mod_setenvif.c> <IfModule mod_headers.c> BrowserMatch chromeframe gcf Header append X-UA-Compatible "chrome=1" env=gcf </IfModule> </IfModule> Thursday, December 8, 2011 58

Seamless Integration Thursday, December 8, 2011 59

HTML5 & SVG Thursday, December 8, 2011 60

SVG Scalable Vector Graphics (SVG) is a new graphics ﬁle format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high- quality graphics from real-time data with precise structural and visual control. http://svg-wow.org/camera/camera.xhtml Thursday, December 8, 2011 61

SVG Beneﬁts • Compatibility SVG is text based and works seamlessly with current Web technologies like HTML, GIF, JPEG, PNG, SMIL, ASP, JSP, and JavaScript. • Quality Graphics created in SVG can be scaled without loss of quality across various platforms and devices. SVG can be used on the Web, in print and even on portable devices while retaining full quality. http://www.w3schools.com/svg/tryit.asp?ﬁlename=trysvg_animatemotion2 Thursday, December 8, 2011 62

SVG Links • Change stylesheets: http://svg-wow.org/alternate-stylesheet/ alternate-stylesheet.xhtml • Punchout: http://webtypographyforthelonely.com/punchout • Colinate: http://webtypographyforthelonely.com/coolinate • SVG JS helper: http://raphaeljs.com/ • http://svg-wow.org/ • http://svg-wow.org/camera/camera.xhtml Thursday, December 8, 2011 63

HTML5 Links • http://diveintohtml5.org/ • http://html5doctor.com • http://code.google.com/p/html5shiv/ • http://www.google.com/chromeframe?prefersystemlevel=true • HTML5 Quick Reference Guide PDF: http://bit.ly/1WaBME • http://groups.drupal.org/html5 • http://html5gallery.com/ • http://code.google.com/chrome/chromeframe/ • http://html5test.com/ • http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/ • http://html5demos.com • http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by- woork.html • http://www.threestyles.com/tutorials/html5-rocks-my-socks-off/ Thursday, December 8, 2011 64

Theme With CSS3 Thursday, December 8, 2011 65

The Compatibility Battle Thursday, December 8, 2011 66

CSS Warrior PIE (progressive internet explorer) makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features: • border-radius • box-shadow • border-image • multiple background images • linear-gradient as background image http://drupal.org/project/css3pie Thursday, December 8, 2011 67

Are We There Yet? http://caniuse.com Thursday, December 8, 2011 68

Do Websites Look need to Exactlythe Same in Every Browser Thursday, December 8, 2011 69

http://dowebsitesneedtolookexactlythesameineverybrowser.com/ Thursday, December 8, 2011 70

NO http://dowebsitesneedtolookexactlythesameineverybrowser.com/ Thursday, December 8, 2011 70

Modernizr • Better yet, use Irish's modernizr, “an open source, MIT- licensed JavaScript library that detects (browser) support for many HTML5 & CSS3 features” (http://diveintohtml5.org/detect.html) • If you prefer, you can build your own modernizr script,choosing just the elements you want to use to keep your script small, download your customized library, and add it to the head of your theme's page template ﬁles with:<script src="(path-to)modernizr.min.js"></script> • In Drupal 6, this would be page.tpl.php and in Drupal 7, html.tpl.php. Read the full instructions here. Thursday, December 8, 2011 71

Modernizr Features What does Modernizr do? • It will replace that class with the class “js” which allows you to know, in your CSS, whether or not JavaScript is enabled. <html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreﬂections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage no-webworkers no-applicationcache fontface"> http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr Thursday, December 8, 2011 72

Modernizr Features • applicationCache • @font-face • border-image: • Geolocation API • border-radius: • hsla() • box-shadow: • HTML5 Audio • Canvas • HTML5 Video • Canvas Text • Input Attributes • CSS 2D Transforms • Input Types • CSS 3D Transforms • localStorage • CSS Animations • Multiple backgrounds • CSS Columns • opacity: • CSS Gradients • rgba() • CSS Reﬂections • sessionStorage • CSS Transitions • Web Workers Thursday, December 8, 2011 73

Modernizr Example .borderradius #content { border: 1px solid #141414; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .boxshadow #content { border: none; -webkit-box-shadow: #141414 3px 3px 6px; -moz-box-shadow: #141414 3px 3px 6px; box-shadow: #141414 3px 3px 6px; } http://css-tricks.com/6731-css-media-queries Thursday, December 8, 2011 74

CSS3 Media Queries Thursday, December 8, 2011 75

CSS Media Queries Thursday, December 8, 2011 77

CSS Media Queries http://css-tricks.com/6731-css-media-queries Thursday, December 8, 2011 78

Code Sample <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Resolution Dependent Layout</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"> <link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css"> <link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css"> </head> <body> <div id="page-wrap"> <div id="header">Header</div> <div id="main-content">Content</div> <div id="secondary-one">Secondary</div> <div id="secondary-two">Extra</div> </div> </body> </html> http://css-tricks.com/6206-resolution-speciﬁc-stylesheets http://css-tricks.com/6731-css-media-queries Thursday, December 8, 2011 79

Code Sample @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } } http://css-tricks.com/6206-resolution-speciﬁc-stylesheets http://css-tricks.com/6731-css-media-queries Thursday, December 8, 2011 80

CSS3 Fonts Thursday, December 8, 2011 81

CSS3 @Fonts • Import directly from the Google Webfonts API: @import url(http://fonts.googleapis.com/css?family=Alike+Angular); http://css-tricks.com/6731-css-media-queries Thursday, December 8, 2011 82

CSS3 @Fonts • Hinting (for IE) • Font hinting is the use of instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At small screen sizes, hinting is critical for producing clear, legible text for human readers. http://readableweb.com/font-hinting-explained-by-a-font-design-master/ Thursday, December 8, 2011 83

CSS3 Backgrounds Thursday, December 8, 2011 84

http://leaverou.me/css3patterns/#tartan Thursday, December 8, 2011 85

Tablecloth http://leaverou.me/css3patterns/#tartan Thursday, December 8, 2011 85

http://leaverou.me/css3patterns/#carbon-ﬁbre Thursday, December 8, 2011 86

Carbon Fiber http://leaverou.me/css3patterns/#carbon-ﬁbre Thursday, December 8, 2011 86

http://leaverou.me/css3patterns/#tartan Thursday, December 8, 2011 87

Tartan http://leaverou.me/css3patterns/#tartan Thursday, December 8, 2011 87

Code Sample #tablecloth { background-color:white; background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-size:50px 50px; } #carbon-ﬁber { radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#282828; background-size:16px 16px; } #tartan { background-color: hsl(2, 57%, 40%); background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba (0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(180deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),repeating-linear-gradient(-35deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba (0,0,0,.2) 5px); } http://css-tricks.com/6731-css-media-queries http://leaverou.me/css3patterns Thursday, December 8, 2011 88

CSS Columns Lorem ipsum dolor sit Duis autem vel eum luptatum zzril delenit Investigationes amet, consectetuer iriure dolor in augue duis dolore te demonstraverunt adipiscing elit, sed hendrerit in vulputate feugait nulla facilisi. lectores legere me diam nonummy nibh velit esse molestie Nam liber tempor cum lius quod ii legunt euismod tincidunt ut consequat, vel illum soluta nobis eleifend saepius. laoreet dolore magna dolore eu feugiat nulla option congue nihil aliquam erat volutpat. facilisis at vero eros et imperdiet doming id Ut wisi enim ad minim accumsan et iusto quod mazim placerat veniam, quis nostrud odio dignissim qui facer possim assum. exerci tation blandit praesent ullamcorper suscipit Typi non habent lobortis nisl ut aliquip Accumsan et iusto claritatem insitam; est ex ea commodo odio dignissim qui usus legentis in iis qui consequat. blandit praesent facit eorum claritatem. http://www.netmagazine.com/features/future-css-layouts http://www.makeuseof.com/dir/csstextwrap Thursday, December 8, 2011 89

Code Sample .newspaper { -webkit-columns: 100px 2; /* Safari and Chrome */ -moz-column-gap: 40px; /* Firefox */ -webkit-column-gap: 40px; /* Safari and Chrome */ columns: 200px 4; column-gap: 40px; } http://css-tricks.com/6731-css-media-queries Thursday, December 8, 2011 90

CSS Layouts http://www.netmagazine.com/features/future-css-layouts http://www.makeuseof.com/dir/csstextwrap Thursday, December 8, 2011 91

CSS3 Links • http://adaptive-images.com/ • http://htmlref.labs.oreilly.com/beta/#elements • http://css3pie.com • http://www.modernizr.com • http://html5readiness.com/ • http://caniuse.com/ • http://html5doctor.com/how-to-get-html5-working-in-ie-and-ﬁrefox-2/ • http://css-tricks.com/ Thursday, December 8, 2011 92

Thank You! Thursday, December 8, 2011 93

HTML5 & CSS3 in Drupal (on the Bayou)

More Related Content

What's hot

Viewers also liked

Similar to HTML5 & CSS3 in Drupal (on the Bayou)

More from Mediacurrent

Recently uploaded

HTML5 & CSS3 in Drupal (on the Bayou)