posted on
Friday, June 06, 2008 5:10 PM
Un paio di settimane fa ho parlato delle librerie di Dreamweaver CS3.
Nel frattempo ho avuto l'occasione di buttare un occhio anche a quelle messe a disposizione nella sezione developer di Yahoo
Non essendo inserite in nessun template legato ad uno specifico programma, è necessario trovare quelle di (X)HTML+CSS all'interno di un più ampio panorama, che comprende librerie javascript, moduli tipo calendari, etc.
Quella che contiene i template per le pagine è grid css.
All'interno della home page della sezione troviamo la presentazione dei servizi principali e a destra l'elenco dei template disponibili e la relativa documentazione.
C'è anche un simpatico tool Grid builder con cui è possibile costruire con una interfaccia WYSIWYG un template base, ad esempio una tipica pagina con header, navigazione laterale, contenuto centrale e footer.
Il codice che viene scritto è il seguente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Base Page</title>
<link rel="stylesheet" href="..../reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc" class="yui-t3">
<div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b"><div class="yui-g">
<!-- YOUR DATA GOES HERE -->
</div>
</div>
</div>
<div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
</div>
<div id="ft">Footer is here.</div>
</div>
</body>
</html>
Il CSS relativo è omnicomprensivo di tutte le tipologie di elementi messe a disposizione da questo tool, quindi è molto lungo. Riporto alcune delle classi coinvolte in questa grid:
#doc,.yui-t3{margin:auto;
text-align:left;width:57.69em;
*width:56.25em;min-width:750px;}
#yui-main .yui-b{position:static;}
#yui-main .yui-b{position:static;}
.yui-gb .yui-u,.yui-g{float:right;}
Ovviamente come per i template messi a disposizione da Dreamweaver la nostra struttura deve essere poi personalizzata e costruita partendo da questa base.
C'è anche una interessante sezione Standard Nesting Grid che dovrebbe permettere una ulteriore suddivisione delle aree costruite con il template base.
Prossima mission: testarla :)