Modular css e html5: organize the chaos

ModularCSS / HTML5

Organize the chaos

Thursday, September 27, 12

Module


is something predetermined,

standard, intended to be repeated several times.

module definition


A module is a stand-alone software

component, well identified and easily

reusable

programming


stereotype(!)

too complex

woody

too extended

twisted


stereotype(!)

too complex

woody

too extended

twisted

good points

essentials

mantianence

readable

reusable


when to usemodular CSS?


always!


choose how to usemodular CSS!


A web page is a collection of modules

remind


A web page is a collection of modules

remind


who I am


who I ammatteo papadopoulos

@spleenteofront end muddle-headed

ruby on rails / django

www.cantierecreativo.net


http://www.cantierecreativo.net








be precise is anextremely hard work


save yourself the trouble

be DRYdon’t repeat yourself


Modular HTML5

the age of the hope


HTML 4 to 5


HTML 4 to 5


Roy Tomeij / @roy


Roy Tomeij / @roy

All sections can start with <h1>

Screw SEO “experts”


choose a side.

In all cases googlewill choose for us!


use JS libs as HTML5 SHIV and Modernizer


DIVs are not evil


Sketching: draw it raw






define your objects


define your objects


define your objects


“NO Style”markup


“NO Style”markup


finally: a module


finally: a module


thinkobject oriented

“OO”


OO is made in ourimage and likeness

don’t be scareddiscover it

http://processing.org/learning/objects/




God was the nerd of all nerds because he made the

universe in justsix days using OO!


Spaghetti Code

vs

MVC


<?php

?>

query.sql + functions(){$variables + <tables> +} + <div style=””> + $_GLOBALS + <<<EOF + js

(early 2000’s style)


Rails MVCmodel, view, controller

separating db, logic & presentation

an eye opener in 2007


CSS good practices


CSS good practices

Oh, no! AGAIN?!?


find a strong RESET


I do prefer classesinstead of IDs


be verbose naming classes and assets


selectorsthe greats unknown

learn how to use’em


if you need!IMPORTANT

there’s something wrong


SASS / Scss

can’t live without you


•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


SCSSexamplecompiled


SCSSexamplecompiled


Modular CSSone module = one class = one file


•base•layout•modules•sections•themes

Structure



Structure



Structure



Structure



Structure



Structure



Structure


the bridging technique @import every single scss

to your application.css


bridging: before / after


bridging: before / after


application.scss


application.scss


application.scss


5 reasons to bridge


5 reasons to bridge

•clean file•manteinance•readable•performance•caching


Responsivedesign


Responsiveain’t so easy!


media queries

belong to a module, so keep them within the

same scope


media queries

belong to a module, so keep them within the

same scope


Happy ending“After having built a few hundreds

of sites I would have discovered the “one true way” of doing it.

I don’t think there is one true way”

(Scalable and Modular Architecture for CSS - Jonathan Snook)


Better Software 2012

firenze


Better Software 2012

firenze

www.cantierecreativo.net




Technology

Modular css e html5: organize the chaos