Accelerarea dezvoltării aplicațiilor cu Bootstrap

Bootstrap este unul dintre cele mai bune și mai utilizate cadre frontale HTML/CSS/JS. Aproape orice dezvoltator web care a creat un site web sau două a auzit de acest cadru popular. Oferă atât de multe componente și resurse gata făcute, Bootstrap vă poate accelera semnificativ dezvoltarea aplicației.

Fiecare dezvoltator bun este preocupat să salveze fiecare secundă în procesul de dezvoltare. A fi eficient înseamnă o implementare mai rapidă - cu cât implementăm mai repede și mai des, cu atât mai repede utilizatorii noștri finali primesc un produs mai bun. Prin urmare, a petrece câteva ore sau zile pentru a planifica procesul și strategia ne poate economisi nu doar câteva minute, ci și multe ore.

Personal, am lucrat cu acest cadru în ultimii 4 ani la 90% din proiectele mele. În acest articol, aș dori să vă împărtășesc câteva sfaturi care vă pot ajuta să vă accelerați dezvoltarea aplicației fără a pierde unele dintre capabilitățile minunate ale Bootstrap.

Înțelegerea Bootstrap

Chiar dacă este un framework cu care este foarte ușor de început, nu vă lăsați păcăliți de simplitatea lui la prima vedere. Înainte de a vă grăbi într-un proiect, petreceți timp jucându-vă cu cadrul și obțineți informații despre piesele cheie ale infrastructurii și componentele sale interesante. Acest lucru va ajuta la evitarea celor mai frecvente 10 greșeli de bootstrap.

Dedică o oră pentru a citi documentația de pe site-ul Bootstrap sau pentru a afla mai multe dintr-o postare grozavă de pe blogul Toptal, Ce este Bootstrap? Un scurt tutorial despre ce, de ce și cum. Și un articol grozav Bootstrap 3 Sfaturi și trucuri pe care s-ar putea să nu le cunoașteți pe scotch.io.

Dacă citiți documentația este o sarcină plictisitoare și preferați să citiți un cod, atunci cel mai bun loc pentru a începe este site-ul web Bootstrap. Deschideți inspectorul web, scanați codul sursă al site-ului și verificați fiecare bloc de cod și elementele acestuia. Este probabil una dintre cele mai bune și mai rapide moduri de a înțelege elementele de bază.

Explorați structura paginii și aflați cum sunt construite machetele.

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

… redimensionați fereastra browserului sau utilizați Viewport Resizer din Chrome pentru a afla mai multe despre utilitarele de interogare media.

 /* 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) { ... }

… și cum și când să le utilizați, familiarizați-vă cu clasele de coloane pentru cele mai bune rezultate de design receptiv.

 <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>

Aruncați o privire la W3Schools unde veți găsi o referință Bootstrap completă a tuturor claselor, componentelor și pluginurilor JavaScript CSS - toate cu exemple „Încercați-l singur”:

• Sistemul de grile Bootstrap explicat: grile în Bootstrap
• Clase CSS de bază: tipografie, butoane, formulare și elemente de formular, clase de ajutor, imagini, tabele
• Componente individuale: glificonuri, meniuri derulante, navigare.

Inspectați codul sursă și încercați să vă familiarizați cu cât mai multe nume de clase posibil. Aflați despre cazurile lor de utilizare - cum, când și de ce. Acest lucru vă va ajuta să avansați mai repede când scrieți HTML și stilați elementele UI. Aflarea mai multe despre aceste componente vă va ajuta să evitați balonarea foilor de stil cu o mulțime de coduri duplicate inutile. Păstrați-l ușor și curat prin utilizarea și reutilizarea componentelor existente, în loc să creați prea multe altele noi care fac la fel ca și cele care există deja în cadru.

Acest lucru este deosebit de important atunci când lucrați într-o echipă de mai mulți dezvoltatori. Asigurați-vă că nu ajungeți să scrieți tone de cod duplicat, creând prea multe stiluri pentru aceeași carcasă de fiecare dată, iar și iar, atunci când traduceți modele noi în cod. Menținerea coerentă a dezvoltării UI și bine documentată cu ghidurile de stil UI poate adăuga, de asemenea, câteva noduri la munca de echipă productivă. În plus, veți descoperi că atunci când adăugați noi funcții sau pagini în aplicația dvs., veți merge mai departe cu mai puțină frustrare. Am fost implicat în peste o duzină de proiecte mari și, în comparație, am văzut o serie de cazuri în care cadrul a fost literalmente spart și de fiecare dată când a fost adăugat noul cod CSS, ar sparge UI pe alte pagini. Ar deveni destul de obositor să parcurgeți tot site-ul și să remediați aceste tipuri de erori. Nu numai atât, gândiți-vă la costuri și la toți banii cheltuiți pentru timp suplimentar pentru dezvoltatori și ajutor pentru QA.

7 cele mai frecvente greșeli de stil care pierzi timpul

1. La centrarea textului sau a div-urilor

Dacă trebuie să centrați un div și/sau conținut, puteți utiliza una dintre aceste clase:

Utilizați text-center

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

… sau bloc central

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

nu .centru sau <centru>

2. Când schimbați dimensiunea fontului

Dacă aveți nevoie de fonturi mai mici sau mai mari, puteți utiliza una dintre aceste clase:

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

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

În cazul în care aveți nevoie de anteturi mai mari sau mai mici, nu uitați de .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small . Folosește-l așa:

 <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. La curățarea plutitoarelor sau la forțarea elementelor să-și auto-elimină copiii

Nu este nevoie să creați clase precum .clear, puteți utiliza întotdeauna .clearfix de la Bootstrap.

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

4. Când ucideți marjele clasei .row

Folosiți doar .clearfix în loc să vă definiți propriile stiluri (sau mai rău, folosind stiluri inline):

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

5. Când dezmodați sau introduceți liste neordonate și alte elemente

Eliminați stilul implicit de listă și marginea stângă de pe elementele listei. Acest lucru se aplică numai articolelor imediate din lista copiilor. În cazul în care trebuie să aplicați același lucru pentru listele imbricate, va trebui să adăugați și numele clasei pe acestea.

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

În mod similar, pentru casetele de selectare sau butoanele radio, avem .checkbox-inline și .radio-inline .

Și puteți adăuga oricând .form-inline la formularele dvs. (care nu trebuie să fie un <form> ) pentru controalele aliniate la stânga și inline-block.

6. La dimensionarea butoanelor

Vrei nasturi mai mari sau mai mici? Adăugați .btn-lg , .btn-sm sau .btn-xs pentru dimensiuni suplimentare.

7. Când plutiți și aliniați articole la dreapta sau la stânga

Flotați un element la stânga sau la dreapta cu o clasă. !important este inclus pentru a evita problemele de specificitate. Clasele pot fi, de asemenea, folosite ca mix-uri cu orice preprocesor CSS.

Folosiți .pull-right , .pull-left , .text-right , .text-left în loc de .right , .left , .left-float , .right-float .

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

Realiniați cu ușurință textul la componente cu clase de aliniere a textului.

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

Nu personalizați direct fișierele de bază ale cadrului

Când lucrez la proiecte mari, am descoperit că cel mai bun mod de a folosi cadrul eficient este să construiești din el și nu să-și personalizezi fișierele de bază în mod direct. Acest concept este similar cu alte platforme și biblioteci pe care le-ați putea folosi pentru proiect.

Deși, dacă construiți un site mic și aveți o machetă de design care ar putea să nu necesite multe modificări sau actualizări, este posibil să descoperiți că personalizarea cadrului pentru nevoile dvs. este o opțiune mai bună. De exemplu, ați putea dori să eliminați toate lucrurile de care nu aveți nevoie direct în fișierele cadru sau puteți accesa secțiunea de personalizare a site-ului Bootstrap, unde puteți configura cu ușurință toate componentele, variabilele și pluginurile jQuery pentru a obține propria versiune. În acest caz, este posibil să accelerați dezvoltarea site-ului și să reduceți timpul de stilare sau de a face față la suprascrieri.

Cu toate acestea, dacă începeți sau lucrați pe un site mare cu mai mulți dezvoltatori sau mai mulți - cel mai bine este să păstrați lucrurile separate și bine organizate. Mutați fișierele cadru în afara folderului CSS personalizat principal și păstrați-l într-un folder fără versiune care nu este editat și eliminați CSS neutilizat utilizând pluginurile Grunt sau Gulp grunt-uncss sau gulp-uncss. O altă alternativă pentru a-l păstra separat este de a-l servi prin CDN. Având codul cadrului separat și neatins, vă oferă o opțiune mai bună și mai rapidă atunci când îl faceți upgrade la cea mai recentă versiune. De asemenea, ajută la reducerea la minimum a unui număr de probleme de scalabilitate și stil, sau de a fi încetinit atunci când faceți adăugiri cu modificări rapide și continue ale interfeței de utilizare.

Utilizați instrumente de schele precum Yeoman sau Slush și manageri de pachete precum Bower, Python's pip, Node's NPM sau Ruby Gems, deoarece fac mult mai mult decât să adauge fișiere la calea aplicației dvs. Apreciez foarte mult puterea lui Bower - cu siguranță poate face ceva mai mult decât descărcarea unui fișier sau două. Utilizarea unui manager de pachete este o idee bună, deoarece, cel mai probabil, complexitatea proiectului dumneavoastră va crește, iar cantitatea de plug-in-uri terță parte și modul în care le întrețineți vor deveni nebunești și consumatoare de timp. Bower vă va ajuta să urmăriți fiecare plugin și dependențele acestuia, inclusiv orice este legat de Bootstrap.

Utilizați resursele Bootstrap disponibile pentru dezvoltarea aplicațiilor

Odată cu popularitatea Bootstrap, vine o mulțime de resurse utile: articole, tutoriale, pluginuri și extensii terță parte, șabloane, constructori de teme și așa mai departe. Deci, indiferent dacă sunteți în căutarea inspirației sau a fragmentelor de cod, veți avea tot ce aveți nevoie pentru a vă accelera progresul.

Ai crede că având atâtea resurse disponibile, toată lumea ar profita de ele și le-ar folosi prin proiectele lor, dar crezi sau nu - nu este cazul. Unii dezvoltatori își pierd timpul și încetinesc progresul proiectului, omitând câteva fragmente de cod sau resurse grozave. Deși nu ar trebui să copiați și să lipiți orbește, trebuie să înțelegeți părțile bune și să le adaptați stilului dvs. de codare și nevoilor tehnice. Abilitatea de a găsi și sorta resurse bune și de a le putea utiliza eficient este, de asemenea, o abilitate și necesită ani de experiență și cunoștințe.

Mai jos veți găsi o listă de resurse utile pentru a începe:

Șabloane, teme și pluginuri

Teme oficiale de la creatorii Bootstrap: themes.getbootstrap.com.

Piețe cu teme și șabloane Bootstrap premium: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Teme și șabloane Bootstrap gratuite: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

„The Big Badass List” - o listă de 319 resurse Bootstrap utile: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI scris în pur AngularJS de echipa AngularUI.

ReactJS

React-Bootstrap este o bibliotecă de componente front-end reutilizabile. Veți obține aspectul și senzația Twitter Bootstrap, dar cu un cod mult mai curat, prin cadrul React.js al Facebook.

Django

Integrarea Bootstrap 3 cu Django: https://github.com/dyve/django-bootstrap3

Jekyll

Jekyll-Bootstrap este o schelă completă pentru bloguri bazate pe Jekyll.

WordPress

Tema de pornire WordPress Sage cu un flux de lucru modern de dezvoltare front-end. Bazat pe HTML5 Boilerplate, gulp, Bower și Bootstrap.

Design material

Material Design pentru Bootstrap este o temă pentru Bootstrap 3 care vă permite să utilizați noul Google Material Design în cadrul front-end preferat.

Concluzie

Bootstrap este unul dintre cele mai bune cadre disponibile care vă oferă multe instrumente și resurse excelente pentru a accelera și accelera procesul de dezvoltare a aplicațiilor.

Vă economisește multe ore/zile de muncă atunci când proiectați și codificați o interfață de utilizare extraordinară. Fiecare componentă și plugin este complet documentat cu exemple live și blocuri de cod pentru o utilizare mai ușoară și personalizare. Este foarte recomandat de mulți dezvoltatori și foarte popular atât pentru prototipare, cât și pentru producție. Este un instrument foarte bun pentru a crea site-uri web adaptabile pentru dispozitive mobile. Bootstrap îți oferă un punct de plecare excelent pentru multe tipuri de proiecte, opțiunea de a-l preda unui designer și de a spune „fă-o să arate fancy!” fără ca ei să fie nevoie să-și pirateze codul. Cel mai important, vă permite să dezvoltați mai întâi structura și să abordați fonturile, culorile și stilurile fanteziste mai târziu. Fă-ți timp pentru a studia ce poate face și fii inteligent cu privire la cum să-l folosești cel mai bine, astfel încât să poți ajunge mai repede unde vrei.