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

too extended

twisted

stereotype(!)

too complex

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

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

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

“NO Style”markup

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

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

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

Modular CSSone module = one class = one file

•base•layout•modules•sections•themes

Structure

the bridging technique @import every single scss

to your application.css

bridging: before / after

application.scss

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

Modular css e html5: organize the chaos

Technology

HTML5 소개 및 배우기- HTML5 Open Conference

HTML5 Tema4 Atributos en HTML5

Organize perakendecilik

Organize seu tempo

Organize Olalım

Organize to Minimize

HTML5? HTML5!

Magickme Chaos

Deterministický CHAOS

CEE6430. LECTURE#18: Chaos and Fractals A Very Brief and Shallow Introduction to: Chaos Theory and Fractals Possible Titles: Chaos for Dummies Learn Chaos

Chaos: 1/26 Dynamik komplexer Systeme Deterministisches Chaos

DETERMINISTISCHES CHAOS Niko Jelken Physik. Deterministisches Chaos Was ist Chaos ?

Chaos złozonosc

Organize Pre Production

ORGANİZE ECZANELER YARATABİLMEK

Was ist Chaos? - uni-bremen.de€¦ · Was Chaos nicht ist Chaos tritt auf, wenn Systeme groß und kompliziert sind. Chaos tritt auf, wenn sich Systeme zufällig verändern. Chaos

Catalogue 2012 Demeure du Chaos / Abode of Chaos

Concentrated HTML5 & Attractive HTML5

KITAKA GAYA CHAOS 2017 - コンテンツ準備中 CHAOS 2017 KITAKA GAYA CHAOS 2017 CHAOS 2017 KITAKAGAYA 2017 KITAKAGAYA CHAOS MAP & EVENT 北加賀屋カオス CHAOS SPOT of KITAKAGAYA

Chaos 2013