Tutorial Creare Un Sito Responsive

Creare il tuo primo Sito/Layout con Foundation

By Andrea Marchetti
@marchetti_design

Come abbiamo detto nel precedente articolo Foundation è un Framework “avanzato” che consente di sviluppare layout Responsive di qualità. Al suo interno il sistema ha una serie di componenti javascript già testati e funzionanti.

In questo articolo creeremo un layout per il nostro sito utilizzando le seguenti funzioni del Framework: la Topbar, lo Slider “Orbit”, la Griglia Responsive, i Button e i Dropdown.

Questo articolo vuole essere un punto di partenza inziale per sviluppare layout con Foundation, per questo motivo non utilizzeremo Sass (il preprocessore Css che Foundation utilizza per modificare lo stile di elementi complessi). Per queste funzionalità realizzeremo un articolo a parte.

L’utilizzo di Sass non è indispensabile, aumenta però le potenzialità del Framework. Per esempio per cambiare il colore della sidebar con Sass basta utilizzare

$topbar-bg: #MioColore !default;

Utilizzando solo i Css dovremo sovrascrivere più stili

/* top bar */

	.top-bar, .top-bar-section li a:not(.button), .top-bar.expanded .title-area {background: #fd4c5b;}

	.top-bar-section li:hover.has-dropdown a{background: #e44453}

	.top-bar-section li a:not(.button):hover {background: #fd707c;}

Download del Framework

Come prima cosa scarichiamo la versione Css di Foundation dal sito ufficiale, una volta scaricato apriamo il file e troviamo già impostato il nostro progetto con le varie cartelle.

Il file index.html contiene elementi di esempio, utilizzeremo questo come base di partenza. Apriamo index.html e dopo foundation.css andiamo a includere il file style.css. In questo file sovrascriveremo le regole css di foundation e inseriremo il nostro stile.

La Topbar

Il primo elemento che andiamo a inserire nella nostra pagina è la topbar. E’ uno degli elementi più sofisticati di Fonudation e contiene già il Logo del sito, il menu di sinistra con le tendine fino a due livelli e il menu di destra.

Codice Html

<nav class="top-bar">
	<!– logo –>

	<ul class="title-area">

		<li class="name"><h1 id="logo" class="hide-text"><a href="#">My Site</a></h1></li>

		<!– Icona menu mobile –>

		<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

	</ul>
	<section class="top-bar-section">
		<!– Menu Sinistra –>

		<ul class="left main-menu">
			<li><a href="#">Home</a></li>

			<li><a href="#">About</a></li>

			<li><a href="#">Contact</a></li>
			<!– dropdown –>

			<li class="has-dropdown"><a href="#">News</a>

				<ul class="dropdown">

					<li><a href="#">Tecnology</a></li>

					<li><a href="#">World</a></li>

					<li><a href="#">Businness</a></li>

				</ul>

			</li>
			<!– dropdown –>

			<li class="has-dropdown"><a href="#">Entertainment</a>

				<ul class="dropdown">

					<li><a href="#">Film</a></li>

					<li><a href="#">Gaming</a></li>

					<li><a href="#">Music</a></li>
					<!– sub dropdown –>

					<li class="has-dropdown"><a href="#" class="">Sport</a>

						<ul class="dropdown">

							<li><a href="#">Basket</a></li>

							<li><a href="#">Baseball</a></li>

							<li><a href="#">Supercross</a></li>

						</ul>

					</li>
				</ul>

			</li>
		</ul>
	  <!– Menu Destra –>

	  <ul class="right sub-menu">

		  <li><a href="#">Login</a></li>

		  <li><a href="#">Search</a></li>
	  </ul> 
  </section>
</nav>

Codice Css
Sovrascriviamo il css di foundation impostando nel file style.css il colore della topbar e degli stati hover

	.top-bar, .top-bar-section li a:not(.button), .top-bar.expanded .title-area {background: #fd4c5b;}

	.top-bar-section li:hover.has-dropdown a{background: #e44453}

	.top-bar-section li a:not(.button):hover {background: #fd707c;}

Ecco il risultato su desktop

Essendo il Framework Mobile First il tutto è già Responsive, su mobile la topbar visualizza i contenuti delle tendine con una accattivante animazione in stile App.

Non avendo posizionato la topbar all’interno della griglia, la barra occupa tutta la larghezza disponibile, stessa cosa vale per lo Slider.

Lo Slider

Orbit è lo slider che Foundation ci mette a disposizione, ha già al suo interno effetti e opzioni. La sintassi html è molto semplice, noi per mantenere una struttura semantica in HTML5 inseriremo lo slider in una section con id “slider”

Codice Html

<section id="slider">

	<ul data-orbit id="slideshow" data-options="timer_speed:4500; animation: ‘fade’; bullets:true; pause_on_hover: false; resume_on_mouseout: true;">
		<li><img src="img/1.png"></li>

		<li><img src="img/2.png"></li>
	</ul>	
</section>

Codice Css
Il codice css che andiamo a scrivere serve a impostare che le immagini siamo larghe come tutto lo schermo e che i bullets siamo centrati al posto che allineati a sinistra.

N.B. Per trovare le giuste classi da modificare inspezioniamo il codice con Firebug, e confrontiamo il codice di orbit in foundation.css

/* slider */

	#slider ul li img{width:100%; height:auto}

	#slider .orbit-bullets 		{text-align: center;width:100%;z-index: 100;margin-bottom: 20px}

	#slider .orbit-bullets li	{float:none;display: inline-block;}

Il risultato è uno Slider Fullwidth Responsive

Successivamente andiamo a posizionare i contenuti grazie alla griglia

La Griglia

E’ uno degli strumenti più utili e comodi di Foundation, permette di gestire il posizionamento degli elementi tramite 12 colonne, sia su mobile che su desktop. Nel nostro caso volgiamo inserire un testo di benvenuto che occupi tutta la larghezza della griglia (12 colonne) e sotto 3 box di uguale larghezza (4 colonne l’uno) con delle news.

Codice Html

<div class="row">

		<div class="large-12 columns">

			<h2>Welcome to My Site</h2>

			<p>This site use Foundation 4.3.2.</p>

			</div>

			<hr />

		</div>

	</div>
	<div class="row">

		<div class="large-4 columns">

			<div class="panel">
				<h3 class="subheader">Title news</h3>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. </p>

			</div>

		</div>

		<div class="large-4 columns">

			<div class="panel">

				<h3 class="subheader">Title news</h3>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. </p>

			</div>

		</div>

		<div class="large-4 columns">

			<div class="panel">

				<h3 class="subheader">Title news</h3>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. </p>

			</div>

		</div>

	</div>

Notiamo che per creare un elemento nella griglia dobbiamo definire prima un div row e al suo interno dei div columns con classe large-n°colonne-occupate. Possiamo definire quanti elementi vogliamo attribuendo a ciascuno una larghezza in colonne, l’importante è che il numero di colonne di una riga sommate sia sempre 12.

N.B. Con il div panel creiamo il box di colore grigio all’interno dell’elemento, volendo possiamo eliminarlo e utilizzare l’elemento della griglia senza sfondo.

La Griglia: Colonne Annidate

Sotto il nostro blocco introduttivo vogliamo dividere la pagina in due blocchi uno per il contenuto degli articoli a sinistra e uno per la sidebar a destra. All’interno del blocco content ogni articolo sarà contenuto in una riga row suddivisa in due columns una per l’immagine e l’altra per il contenuto dell’articolo.

Codice Html

<div class="row">

		<div class="large-8 columns">

			<p>Content</p>
			<article>

				<div class="row">

					<div class="large-3 columns">

						<img src="img/quad.png"/>

					</div>
					<div class="large-9 columns">

						<div class="panel">

							<h3 class="subheader">Title news</h3>

							<p>Lorem ipsum dolor sit.. </p>

						</div>

					</div>

				</div>

			</article>
			<article>

				<div class="row">

					<div class="large-3 columns">

						<img src="img/quad.png"/>

					</div>
					<div class="large-9 columns">

						<div class="panel">

							<h3 class="subheader">Title news</h3>

							<p>Lorem ipsum dolor sit.. </p>

						</div>

					</div>

				</div>

			</article>

                […]
		</div>
		<div class="large-4 columns">
			<p>Sidebar</p>
			<div class="panel">

				<p><a href="#">Link</a></p>

			</div>
			[…]
		</div>

	</div>

Ecco il risultato nel Browser

La Griglia Mobile

Foundation dispone di due griglie una desktop (che abbiamo utilizzato fin ora) e una mobile. Di default la griglia mobile linearizza tutte le colonne che abbiamo creato in configurazione desktop facendole occupare tutta la larghezza del nostro device.

La griglia mobile permette di gestire i posizionamenti suddividendo lo spazio sotto i 768px in 12 colonne. Nel nostro caso vogliamo che l’immagine degli articoli e gli articoli rimangano su due colonne anche su mobile. Aggiungeremo quindi alle nostre colonne la classe small-n°colonne-occupate-su-mobile

Codice html

[…]

<p>Content</p>

			<article>

				<div class="row">

					<div class="small-2 large-3 columns">

						<img src="img/quad.png"/>

					</div>

					<div class="small-10 large-9 columns">

						<div class="panel">

							<h3 class="subheader">Title news</h3>

							<p>Lorem ipsum dolor sit …</p>

						</div>

					</div>

				</div>

			</article>
[…]			

Aggiungendo small-2 prima della definizione large-3 indichiamo al elemento di occupare due colonne nella griglia mobile e tre colonne nella griglia desktop. Se non indicassimo small-2, l’elemento su mobile occuperebbe l’intera larghezza della griglia (12 colonne) linearizzando il contenuto.

Dropdown

Per finire la nostra struttura andiamo a inserire il footer e aggiungiamo un elemento compreso nel pacchetto Foundation un dropdown con del contenuto. L’implementazione è veramente semplice basta aggiungere il seguente html e il dropdown è già funzionate.

Codice Html

<a href="#" class="button right" data-dropdown="drop1">Dropdown Button</a>

			<div id="drop1" class="f-dropdown small content" data-dropdown-content>

			  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p><a href="#" class="button small">Link</a>

			</div>

Il link ha classe button che applica il nostro stile per i pulsanti, il div sottostante contiene il contenuto del dropdown, ha classe f-dropdown ed è collegato al pulsante con l’attributo data-dropdown. Cliccando appare il dropdown ottimizzato per mobile.

Questo innovativo Framework ci permette di creare griglie desktop e mobile, aggiungere elementi funzionali come dropdown, modalbox, slider in maniera strutturata e veloce (senza toccare una linea di Css).

Il codice Css che si va a scrivere è per personalizzare quello del Framework e definire elementi custom, si scrive meno Css, la qualità e il risparmio di tempo aumentano, Fantastico.

Qui di seguito trovate i file per il download e la demo dell’esempio.

Satay Tuned!

Creare Un Sito, Responsive

Potrebbero interessarti:

Slider Responsive Full Screen con testi animati utilizzando Flex Slider

Come costruire un sito Web: da Photoshop al codice Html5 e Css3

Come costruire un Sito Web Responsive

Nivo Slider Responsive con testi HTML animati