modular css e html5: organize the chaos
TRANSCRIPT
ModularCSS / HTML5
Organize the chaos
Thursday, September 27, 12
Module
Thursday, September 27, 12
is something predetermined,
standard, intended to be repeated several times.
module definition
Thursday, September 27, 12
A module is a stand-alone software
component, well identified and easily
reusable
programming
Thursday, September 27, 12
stereotype(!)
too complex
woody
too extended
twisted
Thursday, September 27, 12
stereotype(!)
too complex
woody
too extended
twisted
good points
essentials
mantianence
readable
reusable
Thursday, September 27, 12
when to usemodular CSS?
Thursday, September 27, 12
always!
Thursday, September 27, 12
choose how to usemodular CSS!
Thursday, September 27, 12
A web page is a collection of modules
remind
Thursday, September 27, 12
A web page is a collection of modules
remind
Thursday, September 27, 12
who I am
Thursday, September 27, 12
who I ammatteo papadopoulos
@spleenteofront end muddle-headed
ruby on rails / django
www.cantierecreativo.net
Thursday, September 27, 12
be precise is anextremely hard work
Thursday, September 27, 12
save yourself the trouble
be DRYdon’t repeat yourself
Thursday, September 27, 12
Modular HTML5
the age of the hope
Thursday, September 27, 12
HTML 4 to 5
Thursday, September 27, 12
HTML 4 to 5
Thursday, September 27, 12
Roy Tomeij / @roy
Thursday, September 27, 12
Roy Tomeij / @roy
All sections can start with <h1>
Screw SEO “experts”
Thursday, September 27, 12
choose a side.
In all cases googlewill choose for us!
Thursday, September 27, 12
use JS libs as HTML5 SHIV and Modernizer
Thursday, September 27, 12
DIVs are not evil
Thursday, September 27, 12
Sketching: draw it raw
Thursday, September 27, 12
Sketching: draw it raw
Thursday, September 27, 12
Sketching: draw it raw
Thursday, September 27, 12
define your objects
Thursday, September 27, 12
define your objects
Thursday, September 27, 12
define your objects
Thursday, September 27, 12
“NO Style”markup
Thursday, September 27, 12
“NO Style”markup
Thursday, September 27, 12
finally: a module
Thursday, September 27, 12
finally: a module
Thursday, September 27, 12
thinkobject oriented
“OO”
Thursday, September 27, 12
OO is made in ourimage and likeness
don’t be scareddiscover it
http://processing.org/learning/objects/
Thursday, September 27, 12
God was the nerd of all nerds because he made the
universe in justsix days using OO!
Thursday, September 27, 12
Spaghetti Code
vs
MVC
Thursday, September 27, 12
<?php
?>
query.sql + functions(){$variables + <tables> +} + <div style=””> + $_GLOBALS + <<<EOF + js
(early 2000’s style)
Thursday, September 27, 12
Rails MVCmodel, view, controller
separating db, logic & presentation
an eye opener in 2007
Thursday, September 27, 12
CSS good practices
Thursday, September 27, 12
CSS good practices
Oh, no! AGAIN?!?
Thursday, September 27, 12
find a strong RESET
Thursday, September 27, 12
I do prefer classesinstead of IDs
Thursday, September 27, 12
be verbose naming classes and assets
Thursday, September 27, 12
selectorsthe greats unknown
learn how to use’em
Thursday, September 27, 12
if you need!IMPORTANT
there’s something wrong
Thursday, September 27, 12
SASS / Scss
can’t live without you
Thursday, September 27, 12
•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
SCSSexamplecompiled
Thursday, September 27, 12
SCSSexamplecompiled
Thursday, September 27, 12
Modular CSSone module = one class = one file
Thursday, September 27, 12
•base•layout•modules•sections•themes
Structure
Thursday, September 27, 12
•base•layout•modules•sections•themes
Structure
Thursday, September 27, 12
•base•layout•modules•sections•themes
Structure
Thursday, September 27, 12
•base•layout•modules•sections•themes
Structure
Thursday, September 27, 12
•base•layout•modules•sections•themes
Structure
Thursday, September 27, 12
•base•layout•modules•sections•themes
Structure
Thursday, September 27, 12
•base•layout•modules•sections•themes
Structure
Thursday, September 27, 12
the bridging technique @import every single scss
to your application.css
Thursday, September 27, 12
bridging: before / after
Thursday, September 27, 12
bridging: before / after
Thursday, September 27, 12
application.scss
Thursday, September 27, 12
application.scss
Thursday, September 27, 12
application.scss
Thursday, September 27, 12
5 reasons to bridge
Thursday, September 27, 12
5 reasons to bridge
•clean file•manteinance•readable•performance•caching
Thursday, September 27, 12
Responsivedesign
Thursday, September 27, 12
Responsiveain’t so easy!
Thursday, September 27, 12
media queries
belong to a module, so keep them within the
same scope
Thursday, September 27, 12
media queries
belong to a module, so keep them within the
same scope
Thursday, September 27, 12
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)
Thursday, September 27, 12
Better Software 2012
firenze
Thursday, September 27, 12
Better Software 2012
firenze
www.cantierecreativo.net
Thursday, September 27, 12