Personal tools
5 risorse per Bootstrap che mettono d'accordo designers e developers

Meglio un uovo oggi... :-)

Jun 06, 2013

5 risorse per Bootstrap che mettono d'accordo designers e developers

Bootstrap dispone di un ricco catalogo di accessori tra cui scegliere per rendere il proprio progetto sempre più completo e accattivante!

Bootstrap, chi è costui?

Bootstrap

Nome
Twitter Bootstrap (Bootstrap per gli amici)
Professione
front-end Framwork
Età
oggi siamo alla versione 2.3.2 ed è in continuo aggiornamento!
Residenza
GitHub c/o twitter.github.io
Profilo
@twbootstrap
Segni particolari
facile, veloce, versatile

Benissimo, questa veloce presentazione servirà a sciogliere il ghiaccio con chi d'abitudine non parla agli sconosciuti :)

Lo scopo di questo post non è spiegare il funzionamento di Bootstrap o di eleggerlo a miglior framework dell'anno (esistono moltissime alternative e ogni designer vi darà opinioni diverse). Ne ha parlato anche Giacomo giusto qualche giorno fa nel suo post "Front-end frameworks, presente e futuro delle interfacce utente"
Voglio invece condividere alcune risorse interessanti della rete che ruotano attorno al mondo bootstrappesco.

 

Font Awesome

Font Awesome

http://fontawesome.io/

E' un'incredibile estensione del set di icone base di Bootstrap, con parecchie marce in più:

Non usi Bootstrap ma la fame di icone ti attanaglia lo stomaco? Nessun problema: puoi usare Font Awesome anche da solo o, con un piccolo extra di una riga di codice, puoi importare nel tuo tema anche gli stili del framework
  • è un font e non una raccolta di png: non c'è bisogno di spiegarne i vantaggi ;)
  • "la carica dei 302": ad oggi sono ben 302 le icone del set!
  • permette la rotazione delle icone usando solo classi css (icon-rotate-90, icon-flip-horizontal, ... )
  • supporta la visualizzazione di icone sovrapposte (ad esempio icon-flag on icon-circle)
  • si sostituisce ai soliti punti elenco
  • raddoppia, triplica e quadruplica la dimensione delle icone (con le classi icon-2x, icon-3x, o icon-4x)

Sul sito è presente l'elenco completo degli esempi di utilizzo.

L'avevo adocchiato già da alcuni mesi ma solo recentemente ho notato un notevole miglioramento nell'integrazione all'interno dei progetti: è infatti sufficiente aggiungere una sola riga di codice all'header delle pagine per avere tutte le funzionalità immediatamente disponibili.


X-editable

X-Editable

http://vitalets.github.io/x-editable/

X-editable demo

Bootstrap non è solo una buona base di partenza per i designer ma un ottimo supporto anche per gli sviluppatori alle prese con la creazione di interfacce web.

X-Editable va in questa direzione, rendendo editabili elementi del contenuto sia in modalità inline che attraverso popup. L'effetto è decisamente gradevole e le possibilità di applicazione innumerevoli. Meglio una demo di mille parole!


Bootstraptor

Bootstraptor

http://www.bootstraptor.com/

Se non sai da dove partire e il tuo codice html è fermo al tag <body>, qui potresti trovare qualche idea. Bootstraptor fornisce una vasta serie di templates, dal magazine al blog, dall'e-commerce al portfolio professionale. Ci sono spunti interessanti anche per singole pagine, quali la 404, il form dei contatti o la gallery in stile Pinterest!


Keynotopia

Keynotopia for Bootstrap

http://keynotopia.com/bootstrap/

Facciamo un passo indietro... In un mondo ideale ogni progetto che si rispetti dovrebbe iniziare con una sana prototipazione. Se lo scopo è "fare colpo" sul cliente o barare un po' sui tempi di sviluppo ("è già fatto, vedi? Devo solo metterlo nel browser...") allora i disegni abbozzati su fogli da riciclo o i mockups Balsamiq-style non sono sufficienti. Keynotopia mette a disposizione le grafiche dei principali componenti di Bootstrap da utilizzare in Keynote, PowerPoint e OpenOffice per creare vere e proprie simulazioni di interfaccia del futuro progetto. Il costo? Solo un tweet!


Lavish

Lavish

http://www.lavishbootstrap.com/

Avete letto il post di Federica di alcuni giorni fa (Le palette colori: ecco dove trovare l'ispirazione per il tuo design!) e vi state chiedendo come applicare una palette di colori creativa al rigido gessato grigio e nero di Bootstrap? La risposta è Lavish: si può partire da una foto o inserire/modificare direttamente i codici colore da utilizzare. Un tocco di bacchetta e il codice è servito. Un plus: produce anche il codice Less, per chi, come me, non può rinunciare al sorgente!


Bootstrap hero

Ma non finisce qui...

Inizialmente volevo parlare solo di Font Awesome, ma si sa... una ciliegia tira l'altra e sulla torta di Bootstrap c'è panna in abbondanza.

Il mio spazio per ora è finito ma ci sono infinite risorse da esplorare, provare, apprezzare o scartare. Ai più coraggiosi lascio un paio di riferimenti:

Filed under: , ,
comments powered by Disqus