Librerie (X)HTML+CSS:YUI
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">
<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 