<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d16734928\x26blogName\x3dSid05+weblog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dSILVER\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://sid05.blogspot.com/search\x26blogLocale\x3dit_IT\x26v\x3d2\x26homepageUrl\x3dhttp://sid05.blogspot.com/\x26vt\x3d2587781031737933902', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

BluePrint CSS framework 12/09/07

BluePrint CSS Framework

Con un pò di ritardo vi segnalo BluePrint, un framework CSS che consente la creazione di complessi layout utilizzando una semplice griglia; la prima cosa da fare e scaricare il framework, decomprimerlo (è un file .zip) e caricarlo nella nostra pagina...

» continua

Il pacchetto contiene 7 file CSS, vediamo di cosa si tratta:

  1. screen.css è il file principale del framework che importa gli altri CSS e deve essere incluso in tutte le pagine
  2. print.css il file che si occupa della versione per la stampa
  3. lib/grid.css è il file con i valori della griglia, colonne, classi e gestione del layout in genere
  4. lib/reset.css resetta eventuali valori di default del browser
  5. lib/buttons.css per creare e personalizzare pulsanti HTML/CSS
  6. lib/typography.css si occupa della gestione del testo inserendo anche regole tipografica (come l' altezza di riga)
  7. lib/compressed.css contiene tutto il framework in versione compressa

Ora vediamo come utilizzare la libreria per un nostro progetto (fate riferimento anche al tutorial ufficiale); carichiamo il framework nella nostra pagina HTML (nella <head> come un normale CSS), in questo modo:

<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">

Fatto, è tutto... in pratica il framework è perfettamente funzionante, dovete semplicemente richiamare le varie classi; in realtà il funzionamento è piuttosto semplice, basta ricordare alcune semplici regole, vediamo le principali.

La griglia di default misura 950 px ed è suddivisa in 24 colonne di 30 px con un margine destro di 10 px. Basterà applicare la classe container ad un contenitore (div) e richiamare poi le singole colonne nello stesso modo, ecco un esempio:

<div class="container">
<div class="column span-24">
<p>Esempio numero 1</p>
</div>
</div>

In questo esempio abbiamo inserito un contenitore di dimensione massima, il numero di span, in pratica, indica il numero di colonne presenti e 24 rappresenta l' intera dimensione della classe container. Se vogliamo inserire più colonne basta ricordarsi questo dato; poniamo il caso di voler inserire 3 colonne, una principale e due dedicate alla sidebar (un layout di un blog ad esempio), questo è l' esempio:

<div class="container">
<div class="column span-12">
<p>Prima colonna</p>
</div>
<div class="column span-6">
<p>Seconda colonna</p>
</div>
<div class="column span-6 last">
<p>Terza colonna</p>
</div>
</div>

Come vedete basterà ricordarsi che 24 è il numero massimo di colonne (potete rigirare i valori a vostro piacimento); in questo caso faccio notare anche il caricamento della classe last nell' ultima colonna, la classe applica un margine destro pari a 0px (invece dei 10px delle classi "normali" che avrebbero fatto scivolare sotto la colonna). È possibile nidificare all' interno di una colonna altre colonne (rispettando le stesse regole) e la licenza permette la totale personalizzazione dei file.

Un ultima cosa, dimenticavo di segnalare che il foglio di stile dedicato alla tipografia inserisce un' altezza di riga di 18 px e dovete ricordarlo; se vorrete inserire un' immagine nella pagina dovrà avere altezza pari o multipla di 18... io lo scaricherei

Etichette: , ,

[Sid]
del.icio.us Digg technorati Design Float http://www.wikio.it oknotizie | Permalink | |

Ultimi commenti