CSS3 and jQuery for Designers

60
CSS3 & jQuery for Designers Tuesday, 3 April 12

description

Code: http://cl.ly/FYus Handout: http://f.cl.ly/items/420d0j2c0f022J0v3V1X/handout.pdf

Transcript of CSS3 and jQuery for Designers

Page 1: CSS3 and jQuery for Designers

CSS3 & jQuery for Designers

Tuesday, 3 April 12

Page 2: CSS3 and jQuery for Designers

Hello!

Tuesday, 3 April 12

Page 3: CSS3 and jQuery for Designers

What I’ll be teaching today

Tuesday, 3 April 12

Page 4: CSS3 and jQuery for Designers

Why this is important to learn

...and why you are awesomer than other web designers

Tuesday, 3 April 12

Page 5: CSS3 and jQuery for Designers

How I’ll be teachingthis class

Tuesday, 3 April 12

Page 6: CSS3 and jQuery for Designers

First of all...HTML5?

Tuesday, 3 April 12

Page 7: CSS3 and jQuery for Designers

How to create a HTML5 site in one line of code...

Tuesday, 3 April 12

Page 8: CSS3 and jQuery for Designers

<!DOCTYPE html>

Tuesday, 3 April 12

Page 9: CSS3 and jQuery for Designers

A collection of new features for HTML

Tuesday, 3 April 12

Page 10: CSS3 and jQuery for Designers

HTML5’s new features• New semantic tags, e.g. <nav>, <article>, <footer>

• Audio and video capacity

• Canvas

• Geolocation

• Drag and drop

• History APIs

• Offline mode

• Data storage and File APIs

Tuesday, 3 April 12

Page 11: CSS3 and jQuery for Designers

Do I reeeeally need to know this stuff though?

Tuesday, 3 April 12

Page 12: CSS3 and jQuery for Designers

So, this CSS3 business.

Tuesday, 3 April 12

Page 13: CSS3 and jQuery for Designers

What you’ll learn about CSS3

• Colours

• Text shadow

• Border radius

• Gradients

• Box shadow

• Fonts

• Transforms

• Transitions

• Animation

Tuesday, 3 April 12

Page 14: CSS3 and jQuery for Designers

What you won’t learn

• Generated content

• Multi-backgrounds

• Image borders

• Background sizing

• Re#ections

• Masking

• New measurement units

• Improved text #ows

• Multi column layouts

• Responsive design

Tuesday, 3 April 12

Page 15: CSS3 and jQuery for Designers

Beware:Experimental Stuff

Tuesday, 3 April 12

Page 16: CSS3 and jQuery for Designers

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;

Tuesday, 3 April 12

Page 17: CSS3 and jQuery for Designers

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;

Tuesday, 3 April 12

Page 18: CSS3 and jQuery for Designers

-webkit-box-sizing: border-box;

Tuesday, 3 April 12

Page 19: CSS3 and jQuery for Designers

But don’t do this on live sites, okay???

Or someone may kill ki$ens.

Tuesday, 3 April 12

Page 20: CSS3 and jQuery for Designers

Let’s begin!

Tuesday, 3 April 12

Page 21: CSS3 and jQuery for Designers

Colours

Tuesday, 3 April 12

Page 22: CSS3 and jQuery for Designers

Text shadow

Tuesday, 3 April 12

Page 23: CSS3 and jQuery for Designers

Box shadow

Tuesday, 3 April 12

Page 24: CSS3 and jQuery for Designers

Border radius

Tuesday, 3 April 12

Page 25: CSS3 and jQuery for Designers

Gradients

Tuesday, 3 April 12

Page 26: CSS3 and jQuery for Designers

Fonts

Tuesday, 3 April 12

Page 27: CSS3 and jQuery for Designers

Transitions

Tuesday, 3 April 12

Page 28: CSS3 and jQuery for Designers

Transforms

Tuesday, 3 April 12

Page 29: CSS3 and jQuery for Designers

Animations

Tuesday, 3 April 12

Page 30: CSS3 and jQuery for Designers

Pu$ing it together

Tuesday, 3 April 12

Page 31: CSS3 and jQuery for Designers

A commerical break

Tuesday, 3 April 12

Page 32: CSS3 and jQuery for Designers

jQuery?

Tuesday, 3 April 12

Page 33: CSS3 and jQuery for Designers

jQuery stops you writing a lot of code for simple things

all the time

Tuesday, 3 April 12

Page 34: CSS3 and jQuery for Designers

How to add a class in pure Javascript

Tuesday, 3 April 12

Page 35: CSS3 and jQuery for Designers

$(“a”).addClass(“hello”);

Tuesday, 3 April 12

Page 36: CSS3 and jQuery for Designers

What’s in jQuery?

• Selecting

• A$ributes

• Traversing

• Manipulation

• Events

• Animation

• Ajax

• JS Utilities

Tuesday, 3 April 12

Page 37: CSS3 and jQuery for Designers

Bo Selector.

Tuesday, 3 April 12

Page 38: CSS3 and jQuery for Designers

$Tuesday, 3 April 12

Page 39: CSS3 and jQuery for Designers

Just a function.%e $ doesn’t mean anything special.

Tuesday, 3 April 12

Page 40: CSS3 and jQuery for Designers

What does it mean?Double rainbow?

Tuesday, 3 April 12

Page 41: CSS3 and jQuery for Designers

Uses CSS engine to pick elements from the HTML

Tuesday, 3 April 12

Page 42: CSS3 and jQuery for Designers

#header ul li { background: #eee;}

$(“#header ul li”)

Tuesday, 3 April 12

Page 43: CSS3 and jQuery for Designers

#header ul li { background: #eee;}

$(“#header ul li”)

Tuesday, 3 April 12

Page 44: CSS3 and jQuery for Designers

#header ul > li a:nth-child(2n) { background: #eee;}

$(“#header ul > li a:nth-child(2n)”)

Tuesday, 3 April 12

Page 45: CSS3 and jQuery for Designers

$(“#header ul li”).addClass(“selected”);

$(“h1”).css(“color”, “black”);

$(“img”).attr(“src”, “cat.jpg”);

Tuesday, 3 April 12

Page 46: CSS3 and jQuery for Designers

$(“h1”).css(“color”, “black”) .addClass(“selected”) .fadeIn(500);

Tuesday, 3 April 12

Page 47: CSS3 and jQuery for Designers

$(“h1”).parent() .next() .find(“li”) .addClass(“selected”);

Tuesday, 3 April 12

Page 48: CSS3 and jQuery for Designers

$(“h1”).on(“click”, function () { // Do something when clicked});

Tuesday, 3 April 12

Page 49: CSS3 and jQuery for Designers

Examples

Tuesday, 3 April 12

Page 50: CSS3 and jQuery for Designers

Tools worth using

Tuesday, 3 April 12

Page 51: CSS3 and jQuery for Designers

Modernizrh$p://modernizr.com/

Tuesday, 3 April 12

Page 52: CSS3 and jQuery for Designers

body.rgba h1 { color: rgba(...);}

body.no-rgba h1 { color: #000;}

if (Modernizr.rgba) { // has rgba} else { // no rgba}

Tuesday, 3 April 12

Page 53: CSS3 and jQuery for Designers

SASSh$p://sass-lang.com/

Tuesday, 3 April 12

Page 54: CSS3 and jQuery for Designers

h1 { color: #f00;}

h1 a { color: #000;}

h1 { color: #f00; a { color: #000; }}

Tuesday, 3 April 12

Page 55: CSS3 and jQuery for Designers

Coffeescripth$p://coffeescript.org/

Tuesday, 3 April 12

Page 56: CSS3 and jQuery for Designers

$(“h1”).on(“click”, function () { $(this).addClass(“selected”);})

$(“h1”).on “click”, -> $(@).addClass “selected”

Tuesday, 3 April 12

Page 57: CSS3 and jQuery for Designers

Codekith$p://incident57.com/codekit/

Tuesday, 3 April 12

Page 58: CSS3 and jQuery for Designers

In closing

Tuesday, 3 April 12

Page 59: CSS3 and jQuery for Designers

%anks!

Tuesday, 3 April 12

Page 60: CSS3 and jQuery for Designers

Email: [email protected]: @riklomas

Tuesday, 3 April 12