Come modificare Bootstrap in modo semplice ed efficace
bootstrap non è affatto l'unico framework di interfaccia HTML / CSS, ma penso che sia sicuro dire che ha cambiato il gioco. Questa pila di codice inclusa nel lavello da cucina ha reso molto più facile la progettazione e lo sviluppo di molte app (e siti Web) e ha reso popolare il massiccio framework HTML come sottoprodotto.
Purtroppo, la vastità del suo set di funzionalità si rivolge agli aspetti più pigri della natura umana, e molte delle persone che scelgono di usarlo restano fedeli ai valori predefiniti. Ora, badate bene, gli stili e la griglia di layout predefiniti non sono male per nessun limite dell'immaginazione. Sono il risultato di un sacco di duro lavoro e test approfonditi da parte del team di Twitter. Sono una solida base su cui costruire come qualsiasi.
Ma questo è tutto ciò che sono: una base. I framework, come suggerisce il loro nome, non sono pensati per essere usati come una soluzione completa per le vostre esigenze di UX. L'unica eccezione a questa regola potrebbe essere se stai sviluppando qualcosa di interno che il pubblico non vedrà mai. Ma anche allora ... L'idea è di portarli oltre, ampliarli e modificarli.
Gli sviluppatori di Bootstrap hanno fatto un ottimo lavoro nel rendere questo facile da fare: il loro codice è modulare; e puoi scaricare singoli componenti del framework da usare come meglio credi. Hanno persino fornito un strumento di personalizzazione di base sul loro sito Web che consente di modificare tutte le variabili in base alle esigenze.
Il resto, comunque, dipende da noi. E uomo, alcuni designer e sviluppatori davvero impressionanti hanno intensificato creando mod e strumenti che lasciano il resto di noi senza scuse. Non c'è motivo di accontentarsi delle impostazioni predefinite.
Valuta i tuoi singoli progetti; forse la tipografia di default di Bootstrap è giusta per te, ma la combinazione di colori e la griglia non lo sono, forse hai bisogno di icone diverse. Identifica i luoghi in cui Bootstrap non soddisfa le tue esigenze e dai un'occhiata alle seguenti risorse.
Mod Bootstrap
Queste sono mods a tutti gli effetti che prendono l'interfaccia utente di bootstrap di base e la trasformano in qualcosa di quasi irriconoscibile. I loro usi sono alquanto specifici e limitati; ma se soddisfano le tue esigenze, possono farti risparmiare tempo e denaro.
UI piatta
Il primo mod su questa lista è UI piatta. Rilasciato dai ragazzi di Designmodo , Flat UI ha raggiunto la popolarità immediata nella comunità del design e per una buona ragione: è bello.
Creato per coloro che amano il design piatto - al contrario delle tendenze alquanto snouomorfe di Bootstrap - ogni elemento dell'interfaccia utente è stato riprogettato da zero con una nuova estetica.
Con icone vettoriali, un nuovo font icona glifo, elementi dell'interfaccia utente personalizzati (come un elenco di cose da fare) e più combinazioni di colori facilmente modificabili, l'interfaccia utente piatta mi ha reso, e probabilmente molti altri, ripensare a come può essere Bootstrap.
Il mio unico problema: la dimensione del testo per il tuo elemento di base è un po 'piccola per un sito web. Per essere onesti, è probabilmente giusto per un'interfaccia di app in cui potresti inserire del testo in spazi piuttosto piccoli.
L'interfaccia utente piatta è gratuita, ma puoi pagare una versione pro con elementi aggiuntivi, funzionalità e file PSD.
Fbootstrapp
Ricorda come ho detto che alcuni di questi mod avevano casi d'uso piuttosto specifici? Beh, non stavo scherzando. Fbootstrapp è stato completamente rielaborato per essere compatibile con gli elementi dell'interfaccia utente di Facebook.
Perché qualcuno dovrebbe farlo? Bene, con le loro stesse parole, "Fbootstrapp è un toolkit progettato per dare il via allo sviluppo delle app iFrame di Facebook in entrambe le dimensioni pertinenti. Include CSS e HTML di base per la tipografia, i moduli, i pulsanti, le tabelle, le griglie, la navigazione e altro ancora, con lo stile tipico di Facebook. "
Gli sviluppatori di app di Facebook, prendi nota: il tuo lavoro è diventato più semplice.
Jumpstart Modelli di interfaccia utente
Bootstrap potrebbe essere inteso per l'uso in applicazioni, ma ha bisogno di un po 'di lavoro se si intende fare una classica "interfaccia di amministrazione" con esso. Jumpstart UI ti offre tre diversi modelli che lo fanno in modo ammirevole.
Le icone dell'interfaccia utente di amministrazione, gli stili di widget, i plug-in di visualizzazione dei dati basati su jQuery e altro ancora sono riuniti in layout puliti, personalizzabili e completamente reattivi.
Queste mod sono diverse dalle altre in un modo importante, comunque. Non esiste una versione gratuita; devi pagare per loro a titolo definitivo. Non sono molto costosi, però: vanno da $ 15 a $ 20 USD. Per l'enorme quantità di sforzo che è andato in loro, direi che ne vale la pena, se soddisfano le vostre esigenze specifiche.
BootMetro
Alcune persone lo adorano e molti lo detestano con passione; ma non si può negare che Windows 8 e la sua Metro UI hanno suscitato scalpore nel mondo del design. Io, per la vita di me, non posso davvero pensare a un caso d'uso (al di fuori di una sorta di negozio di software) in cui questo tipo di interfaccia utente sarebbe particolarmente utile. Ma hey, in BootMetro ne abbiamo uno!
È gratuito e sembra essere abbastanza completo, quindi dai un'occhiata. Potrebbe non essere particolarmente utile per la maggior parte delle persone, ma è un esperimento di codice interessante. (Intendo davvero? Bootstrap e Metro? Non l'ho visto arrivare.)
Strumenti di personalizzazione Bootstrap
Quindi, vuoi adattare la tua configurazione Bootstrap per soddisfare al meglio le tue esigenze UI / UX. Da dove inizi? Bene, potresti tuffarti direttamente nel codice. L'ho fatto. Ti dirò, però, può essere difficile.
Se desideri modificare tutta la tipografia, i colori dei pulsanti e dei collegamenti o gli stili della barra di navigazione manualmente, sarai lì per un po '. È possibile modificare tutte le variabili nell'app di personalizzazione sul sito Web Bootstrap, ma è necessario conoscere i codici esadecimali per tutti i colori e non si ottengono feedback visivi mentre si apportano modifiche.
Fortunatamente per noi, ci sono parecchi produttori di temi Bootstrap creati appositamente per questo scopo. Questi sono i due migliori che ho trovato finora.
StyleBootstrap
Se puoi ignorare l'interfaccia sgraziata, StyleBootstrap è un potente strumento per modificare la maggior parte degli elementi dell'interfaccia utente predefiniti che troverai nel framework. Se vuoi iniziare rapidamente, cambiando solo le cose più ovvie, allora questo è il punto di partenza.
Bootstrap Magic
Bootstrap Magic è lo strumento da utilizzare se si desidera eseguire un rebranding approfondito del framework. Ha un'interfaccia più semplice e più semplice e ti dà la possibilità di modificare molti più elementi rispetto a StyleBootstrap. Stai attento, però ... ci vorrà più tempo. Detto questo, non ci sarebbe voluto neanche il tempo necessario per cambiare tutto manualmente.
Componenti aggiuntivi e snippet
Basti dire che ci sono cose che Bootstrap non ha che potresti trovare utili. Per cominciare, abbiamo icone.
Font Awesome
Le icone degli glifo di Bootstrap sono fantastiche, ma limitate. Hai icone scure, quindi hai icone chiare, tutte impostate in una bella immagine sprite. I font Icon, tuttavia, sono molto più versatili. Tutto ciò che puoi fare per inviare messaggi con CSS3, puoi farlo con queste icone. Cambia le dimensioni, il colore, dai loro un'ombra-goccia; è letteralmente facile come scrivere CSS. Con circa 361 icone al momento della stesura di questo, Font Awesome vale la pena di verificare
Bootsnipp
Bootsnipp è una libreria di snippet HTML progettata per funzionare con Bootstrap, presumibilmente senza aggiungere alcuna libreria aggiuntiva. Gli snippet includono: moduli di iscrizione e accesso a schede, caroselli, calendari migliori, un'interfaccia di posta elettronica simile a Gmail, un'interfaccia utente di media player e altro ancora.
Se sei bloccato cercando di capire come mettere insieme gli elementi nell'interfaccia utente, dai un'occhiata alla libreria di Bootsnipp. Se non hanno esattamente quello che ti serve, gli esempi di codice potrebbero aiutarti a capire come farlo.
Questo non è tutto ...
Poiché la struttura preferita di Twitter è ampiamente adottata così com'è, ci sono probabilmente più informazioni su come personalizzare Bootstrap di quante ne possa contenere una lista.
Dopo tutto, questo è ciò che Internet è, giusto? Quello e ... i gatti.
Hai modificato Bootstrap? Lo hai fatto manualmente o hai usato una risorsa? Fateci sapere nei commenti.