upCreative » bootstrap

Come realizzare un Mobile Action Sheet con Bootstrap 3 e Animazioni CSS3

upcreative — Tue, 14 Jan 2014 09:23:44 +0000

Nella realizzazione di HTML5 Mobile App in CSS3 e Javascript numerosi sono i controlli che possono essere ricreati in modo da sviluppare prodotti che si avvicinano più possibile alle applicazioni native.

Negli articoli precedenti mi sono soffermato più volte sull’importanza delle performance di animazioni CSS3 per quanto riguarda le interfacce web, soprattuto per quelle destinate a girare su dispositivi mobile.

Utilizzando questo tipo di animazioni, che forzano la creazione di livelli grafici da essere poi inviati alla GPU velocizzando il processo di rendering, è possibile riprodurre la maggior parte dei componenti presenti in app native in modo fluido e performante.

A questo proposito ti consiglio di leggere:

Performance CSS3 – Consigli per ottimizzare le prestazioni di rendering con i livelli grafici

Con i CSS3 è possibile riprodurre per esempio elementi come slide menu (ecco un tutorial su come crearne uno), tab bar, modal alert, popover ecc..

Demo

Download

Mobile Action Sheet con Animazioni CSS3

In questo articolo voglio mostrarti come realizzare un modal action-sheet sfruttando animazioni CSS3 performanti, che agiscono su determinati attributi in modo da sfruttare la tecnica della composizione dei livelli grafici.

In altre parole ricreeremo una modal dialog con dei pulsanti al suo interno che compare dal fondo dello schermo.

Per quanto riguarda gli stili dei pulsanti ci serviremo di quelli forniti dal framework Twitter Bootstrap 3, che con i suoi gruppi di pulsanti verticali si avvicina molto ai pulsanti che si trovano nel mobile action sheet del sistema operativo iOS7.

Qui a fianco uno screenshot che mostra il classico esempio di un mobile action sheet nativo durante l’utilizzo dall’applicazione “Mail” di iOS7

Il markup HTML

Dopo aver incluso nel documento le risorse di cui ci serviremo, come appunto il framework Twitter Bootstrap, Modernizr ed il solito jQuery, andiamo a definire il markup HTML:

 

  

	Action Sheet con animazioni CSS3

Oltre ai tag

, che rappresentano rispettivamente la tabbar ed il corpo del documento, inseriamo il codice HTML per definire gli elementi DOM che rappresentano l’intero action sheet. Abbiamo un contenitore principale (con classe .action-sheet) all’interno del quale si trovano una

ed un elemento

, il primo per l’overlay trasparente di sfondo, mentre il secondo per il contenitore dei pulsanti.

Vediamo ora come scrivere il markup dei pulsanti, utilizzando gli stili di Bootstrap:

risultato del markup in uno smartphone

risultato del markup in un tablet

Abbiamo organizzato il gruppo di pulsanti in una prima

con classe .row, in modo da rendere poi responsive gli elementi interni utilizzando le classi del sistema a griglia di Bootstrap (piena larghezza nel caso di smartphone, 6 colonne centrate nel caso di tablet e dispositivi desktop).

Per riprodurre poi i pulsanti abbiamo utilizzato le solite classi .btn e .btn-[tipo-di-stile] al fine di definire quale tipo di pulsante utilizzare. Nel caso del gruppo di pulsanti superiore ci siamo serviti della classe .btn-group-vertical che come accennato in precedenza raggruppa verticalmente i pulsanti in modo molto analogo a quello di iOS7.

Il foglio di stile CSS3

Vediamo ora come servirci di animazioni CSS3 performanti per realizzare gli effetti desiderati.

Il primo effetto sarà applicato alla

che rappresenta l’overlay di sfondo, il quale dovrà apparire in dissolvenza, mentre il secondo sarà applicato al contenitore dei pulsanti (ovvero l’elemento

), che dovrà fare la sua comparsa dal fondo dello schermo.

Come prima cosa posizioniamo i due elementi utilizzando l’istruzione position:absolute e le relative coordinate:

.action-sheet {
	/*
		finchè non viene avviata l'animazione lasciamo la proprietà "display: none"		
		in modo che l'elemento non vada ad interferire con il resto del DOM del documento
		(omettendo questa istruzione, questo elemento non sarebbe comunque visibile,
		ma allo stesso la sua presenza tempo non permetterebbe di interagire con gli altri elementi)
	*/
    display: none;	  
}

/*overlay di sfondo */

.action-sheet > div{
	/*
		impostiamo le dimensioni e ed il posizionamento 
		assoluto dell'overlay in modo da coprire tutto il documento
	*/
    position:absolute;
    top:0;right:0;
    left:0;bottom:0;
    /*
	    per dare la trsparenza all'overlay utilizziamo l'attributo 'rgba' 
	    che ci permette appunto di impostare un valore di trasparenza
    */
    background: rgba(0,0,0, 0.5);    
}

/* contenitore pulsanti */
.action-sheet > section{

	/*
		anche qui impostiamo il posizionamento assoluto in modo 
		da poter facilmente posizionare il contenitore in fondo allo schermo	
	*/		

    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background: none;
    padding: 0 10px;
}

Poi passiamo ad impostare il punto focale dell’esperimento, ovvero il funzionamento dell’effetto:

.action-sheet > div{    
    /* trasparenza iniziale pari a 0, in modo da visualizzare l'overlay in dissolvenza */
    opacity:0;
    /* 
    	impostiamo l'effetto tramite la proprietà transition 
    	utilizzando l'opacity, attributo performante, per 
    	creare un effetto a comparsa sulla trasparenza
    */
    -webkit-transition: opacity .15s;
    -moz-transition: opacity .15s;
    transition: opacity .15s;
}

/* contenitore pulsanti */
.action-sheet > section{    
    /* 
    	impostiamo la proprietà transitio per l'attributo "transform",
    	che forza la creazine dei livelli grafici da inviare alla GPU 
    	e rende più fluida l'animazione	    
    */	
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    transition: transform .3s;

    /*
	    inzialmente impostiamo il la transform del contenitore in modo che 
	    prima dell'avvio dell'effetto si trovi al di fuori dello schermo,
	    mediante il parametro "Y" della proprietà translate3d
    */
    -webkit-transform: translate3d(0, 110%, 0);
    -moz-transform: translate3d(0, 110%, 0);
    transform: translate3d(0, 110%, 0);
}

Riassumento il discorso, per ricreare gli effetti abbiamo attribuito alla proprietà transition i parametri opacità (per l’overlay) e tranform (per il contenitore dei pulsanti) facendo in modo che quando essi vengono modificati, di conseguenza viene avviata anche l’animazione di comparsa. In particolare, andiamo a modificare quei parametri nel caso in cui alla div con classe .action-sheet presenti anche la classe di stile “open”.

(La div .action-sheet serve quindi solamente ad attivare in un colpo solo le animazioni applicate agli elementi che si trovano al suo interno.)

Il codice Javascript

Abbiamo detto che per attivare l’effetto dobbiamo solamente aggiungere la classe “open” alla div .action-sheet. Come al solito per farlo ci serviamo del Javascript e procediamo in questo modo:

/* Grazie a modernizr riprendo il nome dell'evento di fine animazione, che cambia a seconda del browser */

    	var endTransitionName = {
			'WebkitTransition' : 'webkitTransitionEnd',
			'OTransition' : 'oTransitionEnd',
			'msTransition' : 'MSTransitionEnd',
			'transition' : 'transitionend'
		};
		var transitionEventName = endTransitionName[ Modernizr.prefixed( 'transition' ) ];

	    $(function(){

	    	var actionSheet = $(".action-sheet");

	    	$("#start").on("click", function(){		    	
		    	actionSheet.show(); //equivalente ad impostare la proprietà "display" = "block" 
		        setTimeout(function () {
		            actionSheet.addClass("open"); //aggiungiamo la classe 'open' per avviare l'aniamzione
		        }, 10);		    	
	    	});	 

	    	$(".cancel").on("click", function(){	    
	    		//rimuoviamo la classe che scatena l'effetto, in modo da ritornare allo stato di partenza
	    		//all'evento di fine della transition reipostiamo tramite jQuery la propretà "display" = "none", 
	    		//che era quella dello stato iniziale        
		        actionSheet.removeClass("open").one(transitionEventName, function () {
		            actionSheet.hide();
		        });		    	
	    	});	

	    });

Al click del pulsante con id “start” rendiamo visibile tutto il markup del nostro componente tramite il metodo .show() di jQuery (che equivale ad impostare la proprietà CSS “display: block” ), poi con un ritardo di 10 millisecondi (piccolo hack per “far passare qualche istante di il tempo” dopo il rendering del markup), aggiungiamo la classe “open“, avviando l’effetto a comparsa.

Al contrario, nel momento in cui l’utente effettua il click (o tap, se si tratta di mobile) sul pulsante di chiusura .cancel, rimuoviamo la classe “open” e, nel momento in cui l’animazione giunge al termine, reimpostiamo la proprietà “display: none” per la div .action-sheet, in modo da nasconderla di nuovo.

Come è possibile vedere dal codice, per riprendere il nome giusto dell’evento di fine animazione in base al browser utilizzato dall’utente, ci siamo serviti di Modernizr, ed in particolare del metodo .prefixed(”transition’).

Eccoci quindi al risultato finale: come puoi vedere il movimento risulta fluido e piacevole, anche se lo si visualizza da un dispositivo mobile.

Demo

Download

Conclusioni

Con questo ennesimo esempio ti ho voluto dimostrare come sia possibile servirsi della composizione dei livelli grafici e dell’accelerazione hardware per sfruttare la GPU al fine di realizzare interfacce mobile, dove è possibile avere animazioni più lente e caratterizzate da numerosi sfarfalli, se non vengono utilizzate le giuste proprietà.

Per vedere la differenza tra un’animazione fluida ed una con sfarfallii, ti consiglio di provare la demo di questo tutorial in cui ho messo a confronto l’effetto di riempimento di due progressbar:

Come realizzare una progress bar CSS3 per una HTML Mobile App

Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando questa tecnica insieme a molte altre, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript (tra cui Tint e Dieta SI o NO?).

Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

The post Come realizzare un Mobile Action Sheet con Bootstrap 3 e Animazioni CSS3 appeared first on upCreative.

Tutorial: Backbone web app responsive con Bootstrap 3

upcreative — Wed, 13 Nov 2013 11:19:29 +0000

In un precedente articolo ho sottolineato il ruolo fondamentale che può rappresentare Backbone per la realizzazione di una MVC javascript web application, elencando anche i vari componenti che la libreria mette a disposizione, oltre ad alcune applicazioni con essa realizzate.

Su lobaedesign.com invece, ho introdotto l’indipendenza della view dagli altri componenti con un tutorial su come realizzare un orologio analogico CSS3 e JavaScript con animazione, e su come la stessa view aggiorna gli elementi dell’interfaccia “osservando” il cambiamento di un model.

In questo post voglio introdurre invece altri due componenti per la creazione di una backbone web app:

la collection, ovvero la lista secondo la quale organizzare i model
il sistema di templating della libreria underscore.js, per la generazione del markup HTML

Lo farò attraverso un semplice tutorial che implementa il framework bootstrap 3 nel documento e usa due view diverse legate allo stesso model ed una alla lista.

Demo

Download

Il nostro intento sarà quindi quello di creare una backbone web app responsive che mostra una lista di persone, ciascuna con informazioni proprie come nome, sesso, occupazione, e descrizione, e con possibilità da parte dell’utente di creare, modificare, eliminare una persona, oltre che poter visualizzare una modal con delle informazioni aggiuntive cliccando nel nome della lista.

Impostazione del documento

Come prima operazione, aggiungiamo al nostro documento, prima della chiusura del tag body, le librerie di cui abbiamo bisogno:

Backbone.js e Undersore.js sono scaricabili dai rispettivi link:

Il markup HTML

Andiamo a vedere il markup HTML della view principale dell’applicazione, ovvero quello che comprende il form di inserimento e la lista:

   

 
     Aggiungi individuo
    
        
            
                
            
                                
                
            
        
        

        Note

I template di Underscore.js

Impostiamo ora il markup HTML dei template delle view secondo il sistema di templating di underscore.js; i metodi per comunicare alla view backbone quale template utilizzare per il rendering del markup da inserire poi nel documento sono principalmente tre:

Specificare il template sottoforma di variabile string nello script
Specificare il rifermento al template il cui markup è stato “posizionato” nel documento
Utilizzare librerie come require.js per “leggere” in modo asincrono il contenuto del template da un file esterno (solitamente di usa un file con estensione .html)

Personalmente preferisco utilizzare l’ultima opzione, soprattutto nel caso di web app ad architettura molto complessa, per due motivi principali:

lasciare il nostro documento più pulito possibile
migliore organizzazione del progetto per quanto riguarda la struttura dei file

In questo tutorial tuttavia prenderemo in considerazione il secondo metodo.

Per saperne di più sui sistemi di javascript templating leggi:

I sistemi di javascript templating e le migliori librerie

Per l’esperimento definiremo 3 view, quella dell’applicazione principale (che comprende il form di inserimento e l’ul della lista), quella di ogni singolo elemento del lista, e quella della modal delle informazioni aggiuntive.

Poiché per la prima delle tre imposteremo come elemento di riferimento il body stesso del documento, andiamo a definire il markup dei template delle altre due view:

Dal codice puoi notare che ogni template è stato definito all’interno dell tag script in cui è stato impostato un attributo type con valore text/template. Così facendo il browser ignorerà questa porzione di codice che invece sarà raggiungibile da Javascript tramite l’attribuito id.

Il file JavaScript

Passiamo ora alla definizione dei vari componenti backbone della nostra applicazione, in primis occupiamoci dell’astrazione dei dati, il model della persona:

//definiamo il modello dell'individuo
var PersonModel = Backbone.Model.extend({

	// Attributi predefiniti per il modello, che vengono usati 
	//se non passati al momento dell'inizializzazione	
	defaults: {
		gender: "M",
		createdat: new Date()
	},

	initialize: function() {  

	},

	//elimina l'istanza del model
	clear: function() {
		this.destroy();
	}

});

Definiamo ora la collection in cui tutte le istanze del model appena definito verranno organizzate:

//definiamo la collection degli individui
var PersonList = Backbone.Collection.extend({

	// Impostiamo la referenza al model per questa collection.
	model: PersonModel,

	url: "#",

	// Filtra tutti gli individui Maschi o Femmina (in base al parametro passato).
	getGender: function(gender) {
		return this.where({gender: gender});
	}

});

Ora che abbiamo definito la nostra (semplicissima) struttura dei dati, vediamo l’impostazione delle view.

La view dell’elemento della lista

//impostiamo la view della persona per come elemento nella lista

var PersonView = Backbone.View.extend({

	// diciamo a backbone che il tag deve essere una li
	tagName:  "li",

	//settiamo la classe da impostare al tag li per usare gli stili bootstrap e l'animazione in entrata
	className: "list-group-item animated",

	// Coumunichiamo alla view a quale template far riferimento.
	template: '#person-template',

	// Bindiamo gli eventi agli elementi di questa view (i selettori funzionano come jQuery).
	events: {
		"click .person-delete"        : "deletePerson",
		"click .edit-view"   		  : "toggleView",
		"click .cancel"				  : "toggleView",
		"submit form"			  	  : "savePerson",
		"click .open-modal"			  : "openModal"	
	},

	//questa funzione viene eseguita ogni volta che viene creata 
	//una nuova istanza per questa view
	initialize: function() {

		//compiliamo il template in una variabile
		this.template = _.template($(this.template).html());

		//osserviamo l'evento change del model dell'individuo per fare in modo che 
		//quando ciò accade anche il markup della relativa view venga aggiornato
		this.listenTo(this.model, 'change', this.toggleView);

		//osserviamo l'evento destroy del model dell'individuo per fare in modo che 
		//quando ciò accade anche la relativa view venga rimossa
		this.listenTo(this.model, 'destroy', this.removeFromDOM);
	},

	// Effettua il render dei contenuti del markup della view nella lista.
	render: function() {
		$(this.el).html(this.template(this.model.toJSON()));
		return this;
	},

	//visualizza il modal per le informazioni dell'individuo
	openModal: function(){
		var model = this.model;
		var view = new ModalView({model: model});
		$("body").append(view.render().el);
		///richiamiamo la funzione open della view appena creata
		view.open();
	},

	// Visualizza o nasconde i campi di editing per questa view. 
	toggleView: function() {	
		//riaggiorniamo la vista e cambiamo la classe per la visualizzazione con jQuery
		this.render();
		this.$el.toggleClass("edit");
	},

	//salva i dati modificati dell'indivuduo
	savePerson: function(e){
		e.preventDefault();

		//riprendiamo i dati del nuovo individuo
		var name = $.trim(this.$("[name='name']").val()),
			gender = this.$("[name='gender']").val(),
			occupation = $.trim(this.$("[name='occupation']").val()),
			notes = $.trim(this.$("[name='notes']").val());

	    //se non tutti i campi sono stati compilati, interrompiamo l'operazione
		if(!name.length  || ! occupation.length || !notes.length)
			return;

		//impostiamo i nuovi dati per il model
		this.model.set({
			name: name,
			gender: gender,
			occupation: occupation,
			notes: notes
		});
		//salviamo il model
		this.model.save();
	},

	removeFromDOM: function(){
		//aggiungiamo la classe per l'animazione di uscita, 
		//e alla fine dell'animazione (sappiamo che dura 1 secondo)
		//rimuoviamo l'elemento DOM dal documento
		var that = this;
		that.$el.addClass("hinge");
		setTimeout(function(){
			that.remove();
		}, 1010);		
	},

	// Rimuove la persona distruggendo il relativo model.
	deletePerson: function() {
		this.model.clear();
	}

});

La view del modal delle informazioni aggiuntive

var ModalView = Backbone.View.extend({

	// diciamo a backbone che il tag deve essere una div
	tagName:  "div",

	//settiamo la classe da impostare al tag li per usare gli stili bootstrap e l'animazione in entrata
	className: "modal fade",

	template: "#modal-template",

	initialize: function() {
		//compiliamo il template in una variabile
		this.template = _.template($(this.template).html());

		//rimuoviamo il modal dal DOM quando esso viene nascosto
		this.$el.on("hidden.bs.modal", function(){
			this.remove();
		});
	},

	// Effettua il render dei contenuti del markup della view nella lista.
	render: function() {
		$(this.el).html(this.template(this.model.toJSON()));		
		return this;
	},

	open: function(){
		this.$el.modal("show");
	}

});

La view dell’applicazione

//definiamo la view dell'app intera
var AppView = Backbone.View.extend({

		//a differenza della view dell'individuo, dove impostavamo 
		//quale elemento generare al'inizializzazione, qui comunichiamo 
		//quale oggetto già aesistente utilizzare come markup
		el: "body",

		// Deleghiamo gli eventi per la creazione di un nuovo 
		//individuo (il funzionamento ed i selettori sono come quelli di jQuery).
		events: {
			"submit #add-form":  "create"
		},

		// Nella funzione di inizializzazione osserviamo l'evento add 
		//della collection legata a questa view, per richiamare la funzione che 
		// inserisce un nuovo elemento nella lista DOM
		initialize: function() {

			var todos = this.collection;

			//deleghiamo gli eventi della collection alle relative funzioni 

			//evento che si verifica quando un nuovo model viene aggiunto alla collection
			// l'ultimo parametro è una funzione alla quale viene passata l'istanza del model appena aggiunto
			// alla collection
			this.listenTo(this.collection, 'add', this.addPerson);

			//richiamiamo la funzione che aggiunge gli elementi all alla lista
			this.addElements();
		},

		// funzione che ogni crea una nuova view ed agigunge 
		// l'elemento generato dal render alla lista
		addPerson: function(personModel) {			
			//creaiamo una nuova istanza della view della persona passando come model quello appena creato
			var view = new PersonView({model: personModel});
			this.$(".list-group").append(view.render().el);
			//aggiungiamo la classe per l'animazione
			view.$el.addClass("fadeInLeftBig");		
		},

		// Aggiunge nella lista tutti gli elementi della collection di individui.
		addElements: function() {
			this.collection.each(this.addPerson);
		},

		// funzione che aggiunge un nuovo model con i dati del form alla collection
		create: function(e) {
			e.preventDefault();
			//riprendiamo i dati del nuovo individuo
			var name = $.trim(this.$("[name='name']").val()),
				gender = this.$("[name='gender']").val(),
				occupation = $.trim(this.$("[name='occupation']").val()),
				notes = $.trim(this.$("[name='notes']").val());

		    //se non tutti i campi sono stati compilati, interrompiamo l'operazione
			if(!name.length  || ! occupation.length || !notes.length)
				return;

			//aggiungiamo il model alla collection
			this.collection.create({
				name: name,
				gender: gender,
				occupation: occupation,
				notes: notes
			});

			//resettiamo il form dopo la creazione
			this.$("input, textarea").val('');
			this.$("[name='gender']").val('M');
		}
	});

Avviamo la nostra javascript web application!

Infine, per instanziare i nostri componenti ed avviare l’applicazione, ci serviremo del seguente codice javascript:

// nel momento in cui jQuery è pronto, inizializiamo i nostri componenti 
jQuery(function ($) {
	//creiamo una nuova istanza per la collection degli individui con due models
	var persons = new PersonList([
		{
			name: "Mark Zuckerberg",
			gender: "M",
			occupation: "Sviluppatore",
			notes: "Il creatore di Facebook"
		},
		{
			name: "Giacomo Freddi",
			gender: "M",
			occupation: "Sviluppatore",
			notes: "Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni "+
					"web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi,"+
					" ma la sua passione principale è quella della creazione di interfacce front-end e back-end"+
					" utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript."
		}
	]);
	//creiamo una nuova istanza per la vire dell'applicazione 
	//principale associandogli la collection
	var app = new AppView({
			collection : persons
	});
});

Stili e CSS

Come è possible notare scaricando i sorgenti, al fine di rendere il tutto un po più piacevole all’utente, abbiamo inserito degli effetti CSS3 per animare l’inserimento e l’eliminazione di ogni record dalla lista; il codice utilizzato proviene dalla libreria animate.css, e prevede un effetto di entrata con fade da sinistra nel momento dell’inserimento, mentre un elemento di “caduta” nel momento della eliminazione.

Abbiamo inoltre reso il tutto responsive grazie al sistema di griglie di Boostrap 3.

Divertiti con i sorgenti!

Demo

Download

The post Tutorial: Backbone web app responsive con Bootstrap 3 appeared first on upCreative.

10 nuovi temi wordpress gratuiti di qualità da scaricare

upcreative — Sat, 26 Oct 2013 12:36:23 +0000

WordPress è il CMS più famoso ed utilizzato dalla rete. Questo grazie a molteplici fattori, come il fatto di rappresentare un sistema molto robusto ed allo stesso tempo facile da usare e mantenere. WordPress permette infatti di creare siti web con contenuti eleganti e creativi pur avendo a disposizione un badget ridotto.

Tutto ciò è reso possibile dalla vastissima quantità di temi sviluppati per questa piattaforma, il cui numero cresce ogni giorno in modo sempre più veloce. Tuttavia non è sempre facile trovare temi wordpress gratuiti di qualità, a meno che non ci si affidi a servizi come ThemeForest o dove poterli acquistare in versione premium.

Setacciando la rete alla ricerca di una soluzione gratuita è facile incappare in temi che non sono all’altezza delle nostre aspettative. E’ per questo che voglio proporti questa lista di 10 nuovi temi wordpress gratuiti da scaricare liberamente (per alcuni è presente anche una versione premium con delle funzionalità aggiuntive).

Prima di iniziare

Siccome anche per quanto riguarda i temi premium molte volte è difficile trovarne alcuni facilmente usabili e di alta qualità, prima di iniziare con la lista di quelli gratuiti, ti voglio proporre alcuni temi wordpress premium che secondo me sono di altissimo livello e offrono un incredibile numero di personalizzazioni e funzionalità:

Avada

U-Design WordPress Theme

Enfold – Responsive Multi-Purpose Theme

Karma – Responsive WordPress Theme

Striking MultiFlex & Ecommerce Responsive WP Theme

King Size – Fullscreen Background WordPress Theme

Lista temi wordpress gratuiti

Celestino

Celestino è un tema completamente responsive e multipurpose, altamente configurabile. Offre moltissime funzionalità, come lo shortcode manager, la personalizzazione di elementi grafici com il layout i colori o il font dei contenuti, e molto altro. Non ha nulla che invidiare dai temi di Themeforest.

Typesense

Typesense è un tema responsive semplice, minimalista e focalizzato sui contenuti, molto indicato per blog.

Vantage

Vantage è un tema versatile e multiuso, che offre un’alta integrazione con plugin molto utili.

Socially Awkward

Socially Awkward è un tema responsive scritto in CSS3 ed HTML5, che si integra molto bene con i tuoi social networks.

Doke Doke

Creato per agenzie creative doke doke è un tema professionale utile per lo showcase del proprio portfolio.

DW Minion

DW Minion è un tema responsive molto semplice, pulito e minimalista. Molto indicato per blog, offre più tipi di formati per i post.

WORKALITY Lite

Workality Lite è un tema wordpress gratuito completamente responsive, indicato per creativi e agenzie. Offre 4 diverse modalità per esporre il proprio portfolio.

Revera

Revera è un tema wordpress basato sul framework Bootstrap 3 e su tutte le sue funzionalità.

Panoramica

Panoramica è un tema per mostrare il proprio portfolio, creato per essere visivamente accattivante e allo stesso tempo moderno e professionale.

TBLOG

TBLOG è un tema completamente responsive con layout fluido, molto adatto per blogger, portfolio o per mostrare i propri prodotti.

Temi WordPress Premium:

Avada

U-Design WordPress Theme

Enfold – Responsive Multi-Purpose Theme

Karma – Responsive WordPress Theme

Striking MultiFlex & Ecommerce Responsive WP Theme

King Size – Fullscreen Background WordPress Theme

The post 10 nuovi temi wordpress gratuiti di qualità da scaricare appeared first on upCreative.

Web design: i 10 migliori CSS framework responsive

upcreative — Sat, 05 Oct 2013 14:39:43 +0000

Come si sà il tempo è denaro, e usare un framework CSS Responsive per velocizzare ed automatizzare i tempi di avvio ed i settings iniziali dei propri lavori è diventata ormai una caratteristica fondamentale per qualsiasi web designer.

Ma cos’è un framework?

Un framework è una struttura logica di supporto su cui un software può essere progettato e realizzato, spesso facilitandone lo sviluppo

Fonte wikipedia

Nel mondo del web design, per essere più specifici, un framework è l’insieme strutturato di file (perlopiù HTML, CSS e Javascript), cartelle e codice standardizzato secondo una logica, che viene utilizzato come fondamenta o supporto per la creazione di un nuovo sito o applicazione web.

Lo scopo di un framework è quindi quello di fornire una base di partenza comune in modo tale che il web designer non debba riscrivere da zero i propri progetti ogni volta, ma possa affidarsi ad una logica di codice solida e comune.

In questo articolo voglio aiutare gli web designer che sono alla ricerca di un framework, ma che ancora non conoscono molto bene le caratteristiche di quelli più utilizzati, proponendo 10 dei migliori framework responsive CSS e open source per la creazione di interfacce grafiche.

Siccome i termini Mobile First e Responsive, con l’avvento e la diffusione di dispositivi mobili sono diventati un must, di seguito ho elencato solo quei Framework che presentano queste funzionalità.

Prima di iniziare

Molte volte, per mancanza di budget o di tempo, ci dobbiamo affidare a dei template responsive premium; prima di mostrarti la lista dei migliori framework responsive ti voglio segnalare questi ottimi temi responsive di altissima qualità che ho avuto l’occasione di usare per alcuni dei miei progetti:

Metronic – Responsive Admin Dashboard Template

Porto – Responsive HTML5 Template

SmartStart – Responsive HTML5 Template

Synergy – Responsive & Interactive HTML Portfolio

Karma – Responsive Clean Website Template

Developr – Fully Responsive Admin Skin

Bootstrap

E’ sicuramente il più famoso, e quello che ha bisogno di meno presentazioni; elegante, intuitivo e veloce. Dispone di un’ottima libreria di componenti javascript, un’ottima documentazione e dalla versione 3.0 è diventato mobile-first. Sviluppato da Twitter, Bootstrap 3 utilizza LESS e, compilato tramite Node.js, offre nella sezione Customize la possibilità di personalizzare quasi ogni aspetto grafico tramite delle variabili prima del download.

Foundation

Si presenta come il più avanzato front-end framework responsive al mondo. Anch’esso mobile-first, fa della semanticità del codice uno dei suoi punti di forza, “per poter scrivere un markup pulito senza sacrificare l’utilità e la velocità del framework”. Come Bootstrap, presenta un’ottima libreria di componenti javascript.

Topcoat

Framework CSS per applicazioni web pulite e veloci. Disegnato per garantire le massime performance, Topcoat presenta una bella collezione di componenti UI, è facilmente personalizzabile e permette anche il donwload in PSD degli elementi dell’interfaccia.

Pure

Pure è si presenta come un set leggero di moduli CSS da utilizzare in ogni tipo di progetto web. Offre una buona documentazione ed effettivamente è molto leggero (il peso totale è di soli 6KB).

Skeleton

Skeleton è un framework semplice e pulito per siti web e applicazioni HTML5. Mette a disposizione solamente gli elementi di cui hai bisogno, niente di più. Come Topcoat permette il download di un template PSD per il mock up dei tuoi lavori.

YAML

Framework CSS modulare per siti web flessibili, accessibili e responsive. Anche questo molto leggero (5.9 KB) e costruito utilizzando SASS, è testato and supportato dalla maggior parte dei browser come Chrome, Firefox, Opera, Safari ed Internet Explorer.

Gumby

Framework CSS flessibile e responsive. Presenta una buona libreria di elementi UI e include diversi tipi di griglie con molte variazioni di colonne, che permettono di avere la massima flessibilità durante l’intero processo di realizzazione di qualsiasi progetto.

Kube

Dai creatori di Redactor.js, Kube si presenta come un framework CSS per sviluppatori professionali. Dispone di un sistema di griglie rivoluzionario e offre molta libertà sulla codifica degli stili.

Groundwork

Compilato anch’esso tramite SASS, Groundwork CSS è un buon toolkit HTML5 Responsive e Javascript.

Tuktuk

Framework Responsive per dare flessibilità ai propri progetti facilmente. Usa funzionalità CSS 3, è leggero e veloce

Bella lista, ma quale dei framework scegliere?

Scegliere il proprio framework non è sicuramente facile, e si può dire che per poter capire meglio quale fa al caso nostro bisogna all’inizio provarli direttamente; tuttavia altri aspetti possono essere considerati nella scelta:

La grandezza e il tipo di progetto che devi realizzare
La facilità e la velocità di scrittura del codice
La documentazione (più dettagliata è, e più veloce riuscirai a capire come utilizzare il framework)
Con quale frequenza il framework viene aggiornato ed il supporto a lungo termine
La velocità di installazione
Il numero di opzioni disponibili
L’integrazione con altri sistemi
La leggerezza dei file inclusi

E tu quale utilizzerai? Se hai altre ottime soluzioni da segnalare, non esitare a segnalarle nei commenti!

upCreative » bootstrap

Come realizzare un Mobile Action Sheet con Bootstrap 3 e Animazioni CSS3

Mobile Action Sheet con Animazioni CSS3

Il markup HTML

Action Sheet con animazioni CSS3

Il foglio di stile CSS3

Il codice Javascript

Conclusioni

Crea la tua mobile app in HTML, CSS3 e Javascript

Tutorial: Backbone web app responsive con Bootstrap 3

Impostazione del documento

Il markup HTML

I template di Underscore.js

Il file JavaScript

La view dell’elemento della lista

La view del modal delle informazioni aggiuntive

La view dell’applicazione

Avviamo la nostra javascript web application!

Stili e CSS

10 nuovi temi wordpress gratuiti di qualità da scaricare

Prima di iniziare

Lista temi wordpress gratuiti

Temi WordPress Premium:

Web design: i 10 migliori CSS framework responsive

Ma cos’è un framework?

Prima di iniziare

Bella lista, ma quale dei framework scegliere?

Template responsive premium