
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Impariamo a conoscere e usare questo framework per la costruzione di layout a griglia
Dopo l’hype e il buzz suscitati dall’entrata in scena di framework CSS celebri come Blueprint CSS e YUI Grids, attualmente il panorama è dominato da un nuovo protagonista: 960 Grid System, per gli amici 960gs.
960gs prende ispirazione dai suoi predecessori e focalizza i suoi obiettivi sulla semplicità e lo sviluppo rapido di prototipi e layout. Le sue qualità sono state ben accolte dalla comunità dei designer e moltissimi nomi famosi ricorrono a questo valido strumento per confezionare layout a griglia eccellenti in tempi brevi. Per citare qualche nome, vi basti sapere che 960gs è il framework di riferimento per lo staff di WooThemes.
Per prima cosa dirigiamoci sulla home ufficiale e scarichiamo il pacchetto di 180k (in alternativa potete prendere il necessario dal repository ufficiale su GitHub).
Create una cartella in cui sviluppare un layout di prova e scompattate dentro il pacchetto con il framework. Quello che otterrete sarà questo:
Lo sviluppo vero e proprio del layout dovrà essere fatto all’interno della cartella code, visto che contiene gli unici file indispensabili si trovano dentro le cartelle css e img.
Per cominciare creiamo una nuova pagina in XHTML 1.0 (va bene anche HTML 4):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
</head>
<body></body>
</html>
Per installare il framework basta incollare queste tre righe nell’head della pagina:
<link rel=”stylesheet” type=”text/css” media=”all” href=”css/reset.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”css/text.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”css/960.css” />
La prima richiama il foglio di reset (che è basato sul reset di Eric Meyer), la seconda si occupa della tipografia, la terza e più importante riguarda la griglia e il suo sviluppo.
Una delle qualità dei vari framework CSS è la semplicità: i fogli di stile non sono complicati, quindi per imparare ad usare un framework, in generale, non abbiamo bisogno che aprire il file che ci interessa e leggerlo. Niente di più. Andiamo quindi ad aprire 960.css
e diamo uno sguardo a quello che ci offre (vi consiglio la versione non compressa, dentro alla cartella uncompressed).
Il primo passo verso la costruzione di un layout, specialmente a griglia, è quello di disporre un div contenitore, ed è sopratutto a questo punto che 960gs mostra la sua flessibilità.
È possibile, infatti, marcare il div contenitore con due classi distinte:
.container_12
.container_16
Come si potrà intuire dal nome, a seconda di quale decideremo di scegliere, la griglia del nostro layout si estenderà o su 12 colonne o su 16. Che cosa significa questo? Significa che a parità di larghezza (cioè i canonici 960px) possiamo suddividere il nostro layout in al più 12 o 16 colonne.
Se vi sfugge il concetto di colonna forse vi conviene ripassare le basi dei layout a griglia; in generale vi basti comunque sapere che una griglia è suddivisa in un certo numero di colonne distanziate tra loro, e che la larghezza di una colonna rappresenta la larghezza minima che un elemento può assumere all’interno del layout. Per avere un idea ancora migliore di come 960gs sia strutturato, basta dare un’occhiata alla pagina di esempio.
Se decidiamo di dividere il nostro layout su 12 colonne:
<div id=”wrapper” class=”container_12″>…</div>
Dopodiché non dovremo fare altro che decidere come suddividere il nostro layout; possiamo ad esempio progettare il classico layout a due colonne con una sidebar laterale:
<div id=”wrapper” class=”container_12″>
<div id=”header” class=”grid_12″>…</div>
<div class=”clear”></div>
<div id=”main” class=”grid_8 alpha”>…</div>
<div id=”sidebar” class=”grid_4 omega”>…</div>
<div class=”clear”></div>
<div id=”footer” class=”grid_12″>…</div>
<div class=”clear”></div>
</div>
Il markup è molto semplice, e si ricorre a poche classi chiave:
.grid_X
indica la larghezza in colonne di una data div. Nel caso dell’header .grid_12
significa che dovrà essere largo 12 colonne (cioè la larghezza massima in accordo al contenitore scelto);.alpha
serve per indicare nel caso di div adiacenti, quale sia la prima della fila;.omega
come sopra indica l’ultima div sulla stessa riga.Il layout ce lo possiamo immaginare su tre righe orizzontali larghe quanto il contenitore suddivise da un div vuoto marcato con .clear
: la prima e l’ultima comprendono un unico div largo quanto tutta la griglia, la seconda invece contiene due div.
Quando si inseriscono div adiacenti, come in quest’ultimo caso, dobbiamo fare attenzione che la larghezza in colonne complessiva sia uguale alla larghezza in colonne del contenitore: in questo caso per calcolarla basta guardare il nome delle classi, infatti .grid_8 e .grid_4 = .grid_12
.
Si possono mettere tanti div sulla stessa riga quante sono le colonne del contenitore, l’importante è marcare la prima e l’ultima con le classi .alpha
e .omega
.
Il div vuoto marcato con .clear
serve a prevenire distorsioni dovute ad elementi flottanti. In realtà per layout semplici è un accorgimento ridondante e spesso potrete ometterla, ma in caso di layout complessi contenenti elementi extra-griglia a loro volta flottanti (testo e immagini posizionati in modo particolare) diventa un compromesso necessario.
Anche 960gs, come altri framework, permette di progettare layout con “spazi vuoti”. Riprendendo l’esempio di prima, se avessimo voluto che il #main
rimanesse largo 8 colonne sulla sinistra, ma senza nessuna sidebar da 4 sulla destra, avremmo dovuto semplicemente modificare il codice in questo modo:
<div id=”wrapper” class=”container_12″>
<div id=”header” class=”grid_12″>…</div>
<div class=”clear”></div>
<div id=”main” class=”grid_8 suffix_4 alpha omega”>…</div>
<div class=”clear”></div>
<div id=”footer” class=”grid_12″>…</div>
<div class=”clear”></div>
</div>
Esistono due classi per la creazione di spazi bianchi:
.suffix_X
aggiunge un padding di X colonne a destra;.prefix_X
aggiunge un padding di X colonne a sinistra.Si noti che abbiamo dovuto comunque aggiungere .alpha
e .omega
, perché anche utilizzando prefix e suffix su un unico elemento, 960gs considera lo spazio bianco come un elemento a parte (leggendo il codice del framework è chiaro come i margini tra le colonne siano di default per tutte le griglie tranne per quelle larghe quanto il contenitore).
Come abbiamo appena visto gli elementi che il framework ci mette a disposizione per sviluppare un layout a griglia sono davvero pochi e molto semplici da usare, ma permettono di sviluppare rapidamenti risultati davvero complessi.
Grazie a questa sua immediatezza 960gs ha avuto un grande impatto sulla comunità degli sviluppatori, e in rete si possono trovare molte risorse per approfondire e anche dei comodi tool da usare per velocizzare ancora di più lo sviluppo di un layout.
Tra le più interessanti vi segnalo:
Se vuoi aggiornamenti su Introduzione a 960gs inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
In soli 45 minuti, fortemente interattivi e leggeri, Pasquale Diaferia mostra come costruire le basi del proprio cosciente personal branding. […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Mettere delle “taglie” per bug di sicurezza è una tendenza sempre più diffusa tra le grandi società del software. Ecco i numeri di un business in crescita.
Come progettare un Disaster Recovery Plan per ripristinare i propri dati utilizzando la funzione replication di MySQL
Una chat semplice composta da tre frame, con pagine scritte in html/php
La guida alle opzioni di base di HitFilm Express, il software per l’editing video con molte funzioni di stampo professionale.