Beginner & Intermediate Guide to HTML5/CSS3 In Drupal

Beginner & Intermediate Guide
to HTML5/CSS3 In Drupal
By Kendall Totten (@starryeyez024)
& Danté Taylor (@thememaster)

Mediacurrent Consultants

#drupalcampATL

1

BROUGHT TO YOU BY
THE GOOD FOLKS AT

DO DRUPAL RIGHT

2

About Me
• Bachelor of Fine Arts in
Graphic Design from
Savannah College of Art &
Design (SCAD)
• Creative Director at
Mediacurrent
• Working in the web space for
about 12 years
• Working with Drupal since
version 4.7
• Favorite Drupal Install is
WatchGMC.com Danté Taylor

3

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

4

What will you learn?
HTML5
• Semantic Web • What to look for in Drupal 8
• Microformats • Enhancing Adaptive Theme
• Form API • HTML5 Themes and
• Real Life applications Modules
• Tactics to enhance
compatibility CSS3
• Enhance UX • Text in Columns
• How HTML5 can help • Transitions
you design for mobile • CSS3Pie
• Semantic captions for • Using SVG
images • The future of CSS

5

Web HTML5

HTML
4.01

Flash
Help
Browser
Support
Plugins

7

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

8

A Better Blend

HTML5 CSS3 JS

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

11

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

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

13

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 details
textarea
track dfn
map sub, sup summary
keygen
area time command
output
code menu
progress
meter kbd
Edits
samp del, ins
wbr
14

http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-ﬂowchart.pdf

15

Getting information off the Internet is
like taking a drink from a ﬁre hydrant.
—Mitchell Kapor

17

The Missing Link

18

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

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.

20

HTML5 Structure
<header>
<nav>

<section>
<article> <aside>
<article>

<footer>

22

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

23

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

24

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

25

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

26

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

27

Outliner Output
http://gsnedders.html5.org/outliner

28

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.

29

<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

30

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>

31

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>

32

Microdata vs.
Microformats

33

Microdata & Microformats
• Microdata is similar to microformats, in that both extend
markup to include machine-readable metadata that
describes web content.
• As such, microdata has become the third contender in the
"my semantic technology is better than yours" argument that
has been waging among microformats and RDFa
proponents.

35

HTML5 &
Microdata

36

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.

37

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

38

Microdata Module

Rich Snippets Testing Tool
http://www.google.com/webmasters/tools/richsnippets

39

Microdata & Microdata
• 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

http://schema.org

40

HTML5 &
Microformats

41

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.

42

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>

43

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>

44

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

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

47

The Winners Table

http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7

48

Delta Module
• Delta allows you, via the Context module to make
duplicates of your theme settings for any context on
your site. This gives you the ability for alternative
layouts as a reaction in Context... </
awesomesauce>

49

JS for your Theme
• modernizr-1.6.min.js
• Download from: http://www.modernizr.com/
• dd_belatedpng.js (IE6 ping ﬁx)
• Download from: http://www.dillerdesign.com/experiment/
DD_belatedPNG/
• html5.js (HTML5Shim)
• Download from: http://code.google.com/p/html5shim/
• respond.js (media-size responsive images)
• Download from: https://github.com/scottjehl/Respond#readme

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

52

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

53

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.
• Tons of other forms and markup changes.

54

HTML5 Tools Module
HTML5 Tools: Override Drupal's
Forms with their HTML5 Counterparts
• Site information
• Search block
• Search form
• User registration
• Contact forms

yoursite.com/admin/conﬁg/markup/html5-tools

55

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.


56

HTML5 Tools Module
HTML5 Tools: Convert other variables
• Alter publication date markup
• Make new Elements available in the Views UI
• If one of these is not working, it might be because your theme is
overriding what is speciﬁed here. Themes always get the last say in
how something is outputted. Check your theme's template.php ﬁle.


57

Google Chrome Frame

http://www.youtube.com/watch?v=sjW0Bchdj-w

58

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>

60

Seamless Integration

61

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

63

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

64

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

65

HTML5 Links
• http://diveintohtml5.org/
• 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://molly.com/html5/html5-0709.html
• 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/

66

The Compatibility Battle

68

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

69

Are We There Yet?

http://caniuse.com

70

Do Websites
need to
Look
Exactlythe Same
in Every
Browser
71

NO
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
72

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.

73

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

74

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

75

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

76

CSS3
Media Queries

77

CSS Media Queries

79

CSS Media Queries


80

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

81

@Keyframe

http://www.w3.org/TR/css3-animations/

84

Code Sample
div.noc { @keyframes bounce {
width:100px; height:100px; background:red; from {
position:relative; top: 100px;
animation:mymove 5s infinite; animation-timing-function: ease-out;
-moz-animation:mymove 5s infinite; /* Firefox */ }
-webkit-animation:mymove 5s infinite; 25% {
/* Safari and Chrome */ top: 50px;
text-indent: -99999px; animation-timing-function: ease-in;
} }
@keyframes mymove { 50% {
from { top:0px; } top: 100px;
to {left:200px;} animation-timing-function: ease-out;
} }
@-moz-keyframes mymove /* Firefox */ 75% {
{ top: 75px;
from { top:0px; } animation-timing-function: ease-in;
to { left:200px; } }
} to {
@-webkit-keyframes mymove /* Safari and Chrome */ top: 100px;
{ }
from { top:0px; } }
to { left:200px; }
}

http://www.w3.org/TR/css3-animations

85

CSS3 @Fonts
• Import directly from the Google Webfonts API:
@import url(http://fonts.googleapis.com/css?family=Alike+Angular);


87

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/

88

CSS3
Backgrounds

89

Tablecloth

http://leaverou.me/css3patterns/#tartan

90

Carbon Fiber

http://leaverou.me/css3patterns/#carbon-ﬁbre

91

Tartan

http://leaverou.me/css3patterns/#tartan

92

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://leaverou.me/css3patterns

93

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

94

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


95

CSS Layouts

http://www.netmagazine.com/features/future-css-layouts
http://www.makeuseof.com/dir/csstextwrap

96

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/

97

Beginner & Intermediate Guide to HTML5/CSS3 In Drupal

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Beginner & Intermediate Guide to HTML5/CSS3 In Drupal (20)

More from Mediacurrent (20)

Recently uploaded (20)

Beginner & Intermediate Guide to HTML5/CSS3 In Drupal