««« | »»»

Layout: un approccio modulare

Mi è rica­pi­tato fra le mani que­sto arti­colo di Jason Santa Maria e volevo segna­larlo per­ché anche a distanza di qual­che tempo (è del 2008) rimane validissimo.

In poche parole

L’idea è molto sem­plice e con­si­ste nell’estrarre gli ele­menti di varia­bi­lità del nostro lay­out e asso­ciarvi delle classi nel foglio di stile. Così, ad esem­pio, le dimen­sioni che pos­siamo attri­buire a un’immagine diven­tano delle classi:

.one {width: 100px;}
.two {width: 210px;}

così come la loro posi­zione:

.left {float: left; margin-right: 20px;}
.right {float: right; margin-left: 20px;}

e così via.

A que­sto punto, sfrut­tando la pos­si­bi­lità di spe­ci­fi­care più classi per un dato ele­mento pos­siamo com­bi­nare quelle che ci servono.

Analogie

Questo approc­cio mi ricorda quello pre­sen­tato in Design Fast Websites; la com­po­si­zione delle classi sem­bra molto simile. A chi inte­ressa, l’autrice della pre­sen­ta­zione ha anche creato un fra­mework CSS basato sugli stessi prin­cipi, Object Oriented CSS, sca­ri­ca­bile da GitHub.

Altre appli­ca­zioni

Possiamo usare lo stesso sistema anche per le dimen­sioni delle font. Oltre a spe­ci­fi­care diret­ta­mente la dimen­sione del testo per un ele­mento, creiamo le classi cor­ri­spon­denti:

._24, h1 { font-size: 182%; }
._21, h2 { font-size: 161.6%; }
._18, h3 { font-size: 138.5%; }
._16, h4 { font-size: 123.1%; }

Per proseguire

Commenti e trackback sono disabilitati.

• Tweets, 2012-05-20
• Tweets, 2012-05-13
• Tweets, 2012-05-06
• Tweets, 2012-04-29
• Tweets, 2012-04-22