Scarica l'articolo in formato PDF

Oggi per la sezione Css Tricks ti voglio segnalare Less Framework 4.

Si tratta di un utilissimo framework css con cui potrai relizzare, in modo estremamente semplice, layout efficaci per i vari dispositivi, partendo da versioni per Desktop, versioni per iPad e versioni Mobile.

Less Framework 4 CSS - Come sviluppare in modo efficace layout (Desktop, iPad e Mobile) con un semplice framework css

Less Framework 4 è sistema css basatu su griglia per la progettazione di siti adattabili ai vari device. Contiene 4 layout e 3 set tipografici di default. Analizziamolo insieme.

Premessa:
Come ben sai di questi tempi è di fondamentale importanza la visibilità sul web, se fino a qualche anno fa ci si poteva accontentare di un sito visualizzabile solo su pc, oggi diventa sempre più necessario essere visibili anche in mobilità (iPad, smartphone, tablet in genere).

Arrivati a questo punto, (per noi sviluppatori) si aprono fondamentalmente tre strade possibili:

  • 1. Realizzare siti responsive (ovvero dove il contenuto si adatta automaticamente alla risoluzione in uso del device). A tal proposito se già non l’hai fatto ti consiglio la lettura di questo articolo scritto qualche tempo fa, in cui potrai apprendere la tecnica per realizzare siti responsive.
  • 2. Realizzare siti auto-adattabili ai device tramite l’uso delle Media Queries.
  • 3. Realizzare siti utilizzando un misto delle due tecniche.

A mio parere non esiste un approccio migliore dell’altro, il tutto sta alle abitudini/preferenze dello sviluppatore.

In questo articolo ti propongo uno strumento adatto alla realizzazione di siti auto-adattabili alle diverse risoluzioni (e quindi ai vari device) tramite l’uso delle Media Queries.

Less Framework 4 – Come è composto?

Less Framework 4 CSS - Come sviluppare in modo efficace layout (Desktop, iPad e Mobile) con un semplice framework css

Abbiamo a disposizione 4 layout css di base, nel dettaglio:

  • Layout di default: 10 colonne a 992 px di larghezza. Ideale per Desktop, portatili, e Tablet in modalità landscape.
  • Layout per tablet: 8 colonne a 768 px di larghezza. Ideale per iPad e altri tablet.
  • Layout per mobile: 3 colonne a 320 px di larghezza. Ideale per iPhone, iPod Touch, e molti altri device di queste dimensioni.
  • Wide Mobile Layout: 5 colonne a 480 px di larghezza. Ideale per device “a schermo grande” in modalità landscape.

Il funzionamento è veramente semplice grazie all’utilizzo delle Media Queries!

Less Framework 4 – Come funziona?

L’idea è quella di partire con il layout di default a 992 px di larghezza, successivamente con l’utilizzo delle media queries di CSS3 intercettare la risoluzine del device e quindi proporre la struttura css più adatta (768 px, 480 px, o 320 px).

Nel caso alcuni browser (vedi alcune versioni vecchie di IE) non avessero il supporto alle media queries, verrà mostrato il layout di default.

Less Framework 4 – Di cosa ho bisogno?

Tutto quello di cui hai bisogno sono una pagina html di base:

<!doctype html>
<html>
 
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" media="all" href=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
	</head>
 
	<body lang="en">
 
	</body>
 
</html>

e il less framework css di base:

/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/
 
 
/*	Resets
	------	*/
 
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}
 
article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}
 
a img {border: 0;}
 
 
 
/*	Typography presets
	------------------	*/
 
.gigantic {
	font-size: 110px;
	line-height: 120px;
	letter-spacing: -2px;
}
 
.huge, h1 {
	font-size: 68px;
	line-height: 72px;
	letter-spacing: -1px;
}
 
.large, h2 {
	font-size: 42px;
	line-height: 48px;
}
 
.bigger, h3 {
	font-size: 26px;
	line-height: 36px;
}
 
.big, h4 {
	font-size: 22px;
	line-height: 30px;
}
 
body {
	font: 16px/24px Georgia, serif;
}
 
.small, small {
	font-size: 13px;
	line-height: 18px;
}
 
/* Selection colours (easy to forget) */
 
::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}
 
 
 
/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */
 
body {
	width: 896px;
	padding: 72px 48px 84px;
	background: rgb(232,232,232);
	color: rgb(60,60,60);
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}
 
 
 
/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */
 
@media only screen and (min-width: 768px) and (max-width: 991px) {
 
	body {
		width: 712px;
		padding: 48px 28px 60px;
	}
}
 
 
 
/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */
 
@media only screen and (max-width: 767px) {
 
	body {
		width: 252px;
		padding: 48px 34px 60px;
	}
 
}
 
 
 
/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */
 
@media only screen and (min-width: 480px) and (max-width: 767px) {
 
	body {
		width: 436px;
		padding: 36px 22px 48px;
	}
 
}

Ulteriori configurazioni sono disponibili direttamente sul sito del progetto.

Da qui in avanti dovrai semplicemente sviluppare il tuo sito come hai sempre fatto! Le media queries ti aiuteranno ad individuare i blocchi per le varie risoluzioni, non ti resta che inserire le opportune proprietà css per il tuo layout.

Conoscevi questo framework? Vuoi segnalarne uno? Lasciami un commento!

Nella speranza che questo articolo ti sia utile, ti auguro una splendida giornata.
Non dimenticare di condividerlo su Facebook, Twitter, Google+

[adsense]