CSS  »  Articoli  »  CSS Template e layout 

Se cercate una solida base di partenza per la realizzazione di layout a griglia fluidi, Fluid Baseline Grid potrebbe essere lo strumento che fa per voi. Si tratta di un framework leggero e flessibile basato su questi elementi chiave:

• un sistema semplice e intuitivo per la creazione di colonne fluide;
• una base tipografica pensata per implementare un armonico ritmo verticale;
• la capacità, tramite le media queries CSS3, di adattarsi ad una gran varietà di dispositivi e risoluzioni in base ai principi del responsive design.

Vediamo come possiamo usarlo.

Installare il framework e preparare il progetto di base

Per prima cosa scarichiamo dalla pagina ufficiale del progetto il pacchetto zip che contiene tutti i file del framework.

Cosa troviamo nello zip?

• un documento 'index.html' che fa da demo e starting point;
• un foglio di stile 'style.css' commentato che rappresenta il cuore stesso del progetto;
• lo script 'respond.js' con cui allarghiamo il supporto delle media queries CSS3 alle versioni di IE precedenti alla 9;
• documentazione e una serie di icone per il mobile, oltre a un paio di immagini di sfondo.

Il file HTML della demo presenta una struttura molto semplice che analizzeremo nei dettagli tra breve. Per completezza va comunque evidenziato che il file incorpora nella parte finale altri tre script caricandoli da server esterni:

<!-- Minimized jQuery from Google CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

  <!-- HTML5 IE Enabling Script -->
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
  <!-- CSS3 Media Queries -->
  <script src="js/respond.min.js"></script>

  <!-- Optimized Google Analytics. Change UA-XXXXX-X to your site ID -->
  <script>var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>

Nell'ordine abbiamo:

• il link alla versione di jQuery servita attraverso i CDN di Google;
• il richiamo ad HTML5 shiv, lo script con cui possiamo applicare stili agli elementi HTML5 sulle versioni meno recenti di IE;
• il codice per le statistiche di Google Analytics.

Il file 'style.css'

Il foglio di stile 'style.css', come accennavamo, è ampiamente commentato. Una versione con commenti in italiano è disponibile nello zip allegato a questo articolo.

La sua struttura si può suddividere in tre parti.

La prima contiene una serie di regole per la normalizzazione e per la definizione della formattazione di base. Particolarmente importante, come vedremo, è la sezione relativa alle impostazioni tipografiche.

La seconda parte del CSS definisce le impostazioni di default per il layout. FBG segue il principio cosiddetto mobile first, che può essere considerato un'evoluzione del progressive enhancement.

In pratica, il layout di base è pensato per adattarsi al meglio anche ai dispositivi meno capaci (a partire da quelli mobili), mentre con le media queries possiamo fornire versioni ad hoc e 'migliorate' per i dispositivi più capaci e per le risoluzioni di schermo superiori. In termini concreti, ciò si traduce, per fare solo un esempio, in un layout di base linearizzato, senza float, con una sola colonna, con i vari elementi disposti in senso verticale l'uno sull'altro.

Nella terza sezione del foglio di stile troviamo, infine, una serie di media queries. È la parte in cui impostiamo regole e proprietà specifiche per dispositivi e risoluzioni diverse, a partire dagli schermi da 320px degli smartphone con orientamento portrait fino ai monitor ad altissima risoluzione per il desktop. Nello specifico, FBG definisce i seguenti breakpoint attraverso le media queries:

Bene,fatte queste premesse, possiamo entrare nel vivo.

Altri articoli

Altre guide

Altre newsletter