Slide 1

Slide 1 text

Modular CSS / HTML5 Organize the chaos Thursday, September 27, 12

Slide 2

Slide 2 text

Module Thursday, September 27, 12

Slide 3

Slide 3 text

is something predetermined, standard, intended to be repeated several times. module deﬁnition Thursday, September 27, 12

Slide 4

Slide 4 text

A module is a stand- alone software component, well identiﬁed and easily reusable programming Thursday, September 27, 12

Slide 5

Slide 5 text

stereotype(!) too complex woody too extended twisted Thursday, September 27, 12

Slide 6

Slide 6 text

stereotype(!) too complex woody too extended twisted good points essentials mantianence readable reusable Thursday, September 27, 12

Slide 7

Slide 7 text

when to use modular CSS? Thursday, September 27, 12

Slide 8

Slide 8 text

always! Thursday, September 27, 12

Slide 9

Slide 9 text

choose how to use modular CSS! Thursday, September 27, 12

Slide 10

Slide 10 text

A web page is a collection of modules remind Thursday, September 27, 12

Slide 11

Slide 11 text

A web page is a collection of modules remind Thursday, September 27, 12

Slide 12

Slide 12 text

who I am Thursday, September 27, 12

Slide 13

Slide 13 text

who I am matteo papadopoulos @spleenteo front end muddle-headed ruby on rails / django www.cantierecreativo.net Thursday, September 27, 12

Slide 14

Slide 14 text

be precise is an extremely hard work Thursday, September 27, 12

Slide 15

Slide 15 text

save yourself the trouble be DRY don’t repeat yourself Thursday, September 27, 12

Slide 16

Slide 16 text

Modular HTML5 the age of the hope Thursday, September 27, 12

Slide 17

Slide 17 text

HTML 4 to 5 Thursday, September 27, 12

Slide 18

Slide 18 text

HTML 4 to 5 Thursday, September 27, 12

Slide 19

Slide 19 text

Roy Tomeij / @roy Thursday, September 27, 12

Slide 20

Slide 20 text

Roy Tomeij / @roy All sections can start with

Screw SEO “experts” Thursday, September 27, 12

Slide 21

Slide 21 text

choose a side. In all cases google will choose for us! Thursday, September 27, 12

Slide 22

Slide 22 text

use JS libs as HTML5 SHIV and Modernizer Thursday, September 27, 12

Slide 23

Slide 23 text

DIVs are not evil Thursday, September 27, 12

Slide 24

Slide 24 text

Sketching: draw it raw Thursday, September 27, 12

Slide 25

Slide 25 text

Sketching: draw it raw Thursday, September 27, 12

Slide 26

Slide 26 text

Sketching: draw it raw Thursday, September 27, 12

Slide 27

Slide 27 text

deﬁne your objects Thursday, September 27, 12

Slide 28

Slide 28 text

deﬁne your objects Thursday, September 27, 12

Slide 29

Slide 29 text

deﬁne your objects Thursday, September 27, 12

Slide 30

Slide 30 text

“NO Style” markup Thursday, September 27, 12

Slide 31

Slide 31 text

“NO Style” markup Thursday, September 27, 12

Slide 32

Slide 32 text

ﬁnally: a module Thursday, September 27, 12

Slide 33

Slide 33 text

ﬁnally: a module Thursday, September 27, 12

Slide 34

Slide 34 text

think object oriented “OO” Thursday, September 27, 12

Slide 35

Slide 35 text

OO is made in our image and likeness don’t be scared discover it http://processing.org/learning/objects/ Thursday, September 27, 12

Slide 36

Slide 36 text

God was the nerd of all nerds because he made the universe in just six days using OO! Thursday, September 27, 12

Slide 37

Slide 37 text

Spaghetti Code vs MVC Thursday, September 27, 12

Slide 38

Slide 38 text

query.sql + functions(){ $variables + + } +

+ $_GLOBALS + <<

Slide 39

Slide 39 text

Rails MVC model, view, controller separating db, logic & presentation an eye opener in 2007 Thursday, September 27, 12

Slide 40

Slide 40 text

CSS good practices Thursday, September 27, 12

Slide 41

Slide 41 text

CSS good practices Oh, no! AGAIN?!? Thursday, September 27, 12

Slide 42

Slide 42 text

ﬁnd a strong RESET Thursday, September 27, 12

Slide 43

Slide 43 text

I do prefer classes instead of IDs Thursday, September 27, 12

Slide 44

Slide 44 text

be verbose naming classes and assets Thursday, September 27, 12

Slide 45

Slide 45 text

selectors the greats unknown learn how to use’em Thursday, September 27, 12

Slide 46

Slide 46 text

if you need !IMPORTANT there’s something wrong Thursday, September 27, 12

Slide 47

Slide 47 text

SASS / Scss can’t live without you Thursday, September 27, 12

Slide 48

Slide 48 text

•variables like $white: #FFF •math like 10px + 10px = 20px •@mixins as functions ($with_params) •logic like IF/ELSE FOR •nested classes •compiled css extended or compact SASS features Thursday, September 27, 12

Slide 49

Slide 49 text

SCSS example compiled Thursday, September 27, 12

Slide 50

Slide 50 text

SCSS example compiled Thursday, September 27, 12

Slide 51