Accelerare lo sviluppo di applicazioni con Bootstrap

Bootstrap è uno dei framework front-end HTML/CSS/JS migliori e più utilizzati. Quasi tutti gli sviluppatori web che hanno creato un sito Web o due hanno sentito parlare di questo framework popolare. Offre così tanti componenti e risorse già pronti, Bootstrap può accelerare notevolmente lo sviluppo delle tue applicazioni.

Ogni buon sviluppatore si preoccupa di risparmiare ogni secondo nel proprio processo di sviluppo. Essere efficienti significa un'implementazione più rapida: prima e più spesso eseguiamo l'implementazione, più velocemente i nostri utenti finali ottengono un prodotto migliore. Pertanto, dedicare poche ore o giorni alla pianificazione del processo e della strategia può farci risparmiare non solo pochi minuti, ma molte ore.

Personalmente ho lavorato con questo framework negli ultimi 4 anni sul 90% dei miei progetti. In questo articolo, vorrei condividere con te alcuni suggerimenti che possono aiutarti a velocizzare lo sviluppo delle tue applicazioni senza perdere alcune delle straordinarie capacità di Bootstrap.

Capire Bootstrap

Anche se è un framework con cui è molto facile iniziare, non lasciarti ingannare dalla sua semplicità a prima vista. Prima di lanciarti in un progetto, dedica del tempo a giocare con il framework e ad ottenere informazioni dettagliate sui componenti chiave della sua infrastruttura e sui componenti interessanti. Ciò contribuirà a evitare i 10 errori di bootstrap più comuni.

Dedica un'ora a leggere la documentazione sul sito di Bootstrap o scopri di più da un ottimo post sul blog di Toptal, Cos'è Bootstrap? Un breve tutorial su cosa, perché e come. E, ottimo articolo Bootstrap 3 Suggerimenti e trucchi che potresti non conoscere su scotch.io.

Se trovi la lettura della documentazione un compito noioso e preferisci invece leggere del codice, il miglior punto di partenza è il sito Web di Bootstrap. Apri il tuo web inspector, scansiona il codice sorgente del sito e controlla ogni blocco di codice e i suoi elementi. È probabilmente uno dei modi migliori e più rapidi per afferrare le basi.

Scava nella struttura della pagina e scopri come sono costruiti i layout.

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

... ridimensiona la finestra del browser o utilizza Viewport Resizer di Chrome per saperne di più sulle utilità di query multimediali.

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

... e come e quando usarli, familiarizza con le classi di colonne per ottenere i migliori risultati di progettazione reattiva.

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

Dai un'occhiata a W3Schools dove troverai un riferimento completo su Bootstrap di tutte le classi CSS, componenti e plugin JavaScript, il tutto con esempi "Provalo da solo":

• Spiegazione del sistema di griglia di Bootstrap: griglie in Bootstrap
• Classi CSS di base: tipografia, pulsanti, moduli ed elementi di moduli, classi helper, immagini, tabelle
• Singoli componenti: glyphicons, drop-downs, navs.

Ispeziona il codice sorgente e prova a familiarizzare con il maggior numero possibile di nomi di classi. Scopri i loro casi d'uso: come, quando e perché. Questo ti aiuterà ad andare avanti più velocemente durante la scrittura di elementi HTML e lo stile dell'interfaccia utente. Imparare di più su questi componenti ti aiuterà a evitare di gonfiare i tuoi fogli di stile con un sacco di codice duplicato non necessario. Mantienilo snello e pulito utilizzando e riutilizzando i componenti esistenti, invece di crearne troppi nuovi che fanno lo stesso di quelli che già esistono all'interno del framework.

Ciò è particolarmente importante quando si lavora in un team di più sviluppatori. Assicurati di non finire per scrivere tonnellate di codice duplicato creando troppi stili per lo stesso caso ogni volta più e più volte quando traduci nuovi progetti nel codice. Mantenere lo sviluppo dell'interfaccia utente coerente e ben documentato con le guide di stile dell'interfaccia utente può anche aggiungere un paio di nodi al lavoro di squadra produttivo. Inoltre, scoprirai che quando aggiungi nuove funzionalità o pagine alla tua applicazione andrai avanti con meno frustrazione. Sono stato coinvolto in oltre una dozzina di grandi progetti e, in confronto, ho visto una serie di casi in cui il framework è stato letteralmente violato e ogni volta che veniva aggiunto il nuovo codice CSS si interrompeva l'interfaccia utente su altre pagine. Sarebbe piuttosto estenuante passare attraverso tutto il sito e correggere questi tipi di bug. Non solo, pensa al costo e a tutti i soldi spesi per il tempo extra degli sviluppatori e per l'aiuto del QA.

7 Errori di styling più comuni per perdere tempo

1. Quando si centra testo o div

Se devi centrare un div e/o un contenuto, puoi utilizzare una di queste classi:

Usa centro testo

 <p class="text-center">I am centered text</p>

... o blocco centrale

 <div class="center-block">I am centered text</div>

non .center o <center>

2. Quando si cambia la dimensione del carattere

Se hai bisogno di caratteri più piccoli o più grandi, puoi utilizzare una di queste classi:

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

Se hai bisogno di intestazioni più grandi o più piccole, non dimenticare .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small . Usalo in questo modo:

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. Quando si cancellano galleggianti o si forzano gli elementi a cancellare automaticamente i suoi figli

Non c'è bisogno di creare classi come .clear, puoi sempre usare invece .clearfix di Bootstrap.

 <div class="clearfix">...</div>

4. Quando si uccidono i margini della classe .row

Usa semplicemente .clearfix invece di definire i tuoi stili (o peggio, usando gli stili inline):

 <div class="clearfix">...</div>

5. Quando si annulla lo stile o si integrano elenchi non ordinati e altri elementi

Rimuovere lo stile elenco predefinito e il margine sinistro sugli elementi dell'elenco. Questo si applica solo agli elementi dell'elenco dei figli immediati. Nel caso in cui sia necessario applicare lo stesso per gli elenchi nidificati, sarà necessario aggiungere anche il nome della classe su quelli.

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

Allo stesso modo, per le caselle di controllo o i pulsanti di opzione, abbiamo .checkbox-inline e .radio-inline .

E puoi sempre aggiungere .form-inline ai tuoi moduli (che non deve essere un <form> ) per i controlli allineati a sinistra e inline-block.

6. Quando si ridimensionano i pulsanti

Ti piacciono i pulsanti più grandi o più piccoli? Aggiungi .btn-lg , .btn-sm o .btn-xs per dimensioni aggiuntive.

7. Quando si spostano e si allineano gli elementi a destra oa sinistra

Sposta un elemento a sinistra o a destra con una classe. !important è incluso per evitare problemi di specificità. Le classi possono anche essere usate come mixin con qualsiasi preprocessore CSS.

Usa .pull-right , .pull-left , .text-right , .text-left invece di .right , .left , .left-float , .right-float .

 <div class="pull-left">...</div> <div class="pull-right">...</div>

Riallinea facilmente il testo ai componenti con le classi di allineamento del testo.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

Non personalizzare direttamente i file di base del framework

Quando ho lavorato su grandi progetti, ho scoperto che il modo migliore per utilizzare il framework in modo efficace è basarsi su di esso e non personalizzare direttamente i suoi file principali. Questo concetto è simile ad altre piattaforme e librerie che potresti utilizzare per il progetto.

Anche se, se stai costruendo un piccolo sito e hai un modello di progettazione che potrebbe non richiedere molte modifiche o aggiornamenti, potresti scoprire che personalizzare il framework per le tue esigenze è un'opzione migliore. Ad esempio potresti voler eliminare tutte le cose che non ti servono direttamente nei file del framework, oppure puoi andare alla sezione di personalizzazione del sito di Bootstrap dove puoi facilmente configurare tutti i componenti, le variabili e i plugin jQuery per ottenere il tuo propria versione. In questo caso, potresti accelerare lo sviluppo del tuo sito e ridurre i tempi di styling o gestire le sostituzioni.

Tuttavia, se stai avviando o lavorando su un grande sito con diversi sviluppatori o più, è meglio mantenere le cose separate e ben organizzate. Sposta i file del framework all'esterno della cartella CSS personalizzata principale e mantienila in una cartella non di modifica della versione e rimuovi i CSS inutilizzati utilizzando i plug-in Grunt o Gulp grunt-uncss o gulp-uncss. Un'altra alternativa per tenerlo separato è servirlo tramite CDN. Avere il codice del framework separato e intatto offre un'opzione migliore e più veloce durante l'aggiornamento all'ultima versione. Aiuta anche a ridurre al minimo una serie di problemi di scalabilità e stile, o di essere rallentati quando si apportano aggiunte con modifiche rapide e continue dell'interfaccia utente.

Utilizza strumenti di scaffolding come Yeoman o Slush e gestori di pacchetti come Bower, Python's pip, Node's NPM o Ruby Gems poiché stanno facendo molto di più che aggiungere file al percorso della tua applicazione. Apprezzo molto la potenza di Bower: può sicuramente fare qualcosa di più del semplice download di uno o due file. L'uso di un gestore di pacchetti è una buona idea poiché molto probabilmente la complessità del tuo progetto aumenterà e la quantità di plug-in di terze parti e il modo in cui li mantieni diventeranno pazzi e richiederanno tempo. Bower ti aiuterà a tenere traccia di ogni plugin e delle sue dipendenze, incluso tutto ciò che riguarda Bootstrap.

Utilizza le risorse Bootstrap disponibili per lo sviluppo di applicazioni

Con la popolarità di Bootstrap arriva una vasta gamma di risorse utili: articoli, tutorial, plug-in ed estensioni di terze parti, modelli, costruttori di temi e così via. Quindi, che tu stia cercando ispirazione o frammenti di codice, avrai tutto ciò di cui hai bisogno per accelerare i tuoi progressi.

Penseresti che avendo così tante risorse a disposizione, tutti ne approfitterebbero e le userebbero attraverso i loro progetti, ma che tu ci creda o no - non è così. Alcuni sviluppatori perdono tempo e rallentano l'avanzamento del progetto saltando alcuni ottimi frammenti di codice o risorse. Anche se non dovresti semplicemente copiare e incollare ciecamente, devi capire le parti buone e adattarle al tuo stile di codifica e alle tue esigenze tecniche. Anche la capacità di trovare e selezionare buone risorse ed essere in grado di utilizzarle efficacemente è un'abilità e richiede anni di esperienza e conoscenza.

Di seguito troverai un elenco di risorse utili per iniziare:

Modelli, Temi e Plugin

Temi ufficiali dei creatori di Bootstrap: themes.getbootstrap.com.

Marketplace con temi e modelli Bootstrap premium: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Temi e modelli Bootstrap gratuiti: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

"The Big Badass List" - un elenco di 319 utili risorse Bootstrap: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI scritto in puro AngularJS dal team AngularUI.

ReactJS

React-Bootstrap è una libreria di componenti front-end riutilizzabili. Avrai l'aspetto di Twitter Bootstrap, ma con un codice molto più pulito, tramite il framework React.js di Facebook.

Django

Integrazione Bootstrap 3 con Django: https://github.com/dyve/django-bootstrap3

Jekyll

Jekyll-Bootstrap è un'impalcatura blog completa per i blog basati su Jekyll.

WordPress

Tema iniziale di WordPress Sage con un moderno flusso di lavoro di sviluppo front-end. Basato su HTML5 Boilerplate, gulp, Bower e Bootstrap.

Progettazione materiale

Material Design for Bootstrap è un tema per Bootstrap 3 che ti consente di utilizzare il nuovo Google Material Design nel tuo framework front-end preferito.

Conclusione

Bootstrap è uno dei migliori framework disponibili che ti offre molti ottimi strumenti e risorse per accelerare e velocizzare il processo di sviluppo delle tue applicazioni.

Ti fa risparmiare molte ore/giorni di lavoro durante la progettazione e la codifica di un'interfaccia utente eccezionale. Ogni componente e plug-in è accuratamente documentato con esempi live e blocchi di codice per un uso e una personalizzazione più semplici. È altamente raccomandato da molti sviluppatori e molto popolare sia per la prototipazione che per la produzione. È un ottimo strumento per creare siti Web reattivi ottimizzati per i dispositivi mobili. Bootstrap ti offre un ottimo punto di partenza per molti tipi di progetti, la possibilità di consegnarlo a un designer e dire "fai un aspetto stravagante!" senza che abbiano bisogno di hackerare il codice. Soprattutto, ti consente di sviluppare prima la struttura e di indirizzare caratteri, colori e stili di fantasia in un secondo momento. Prenditi il ​​tempo per studiare cosa può fare ed essere intelligente su come usarlo nel modo migliore in modo da poter arrivare dove vuoi più velocemente.