Abordare

În timp ce paginile de început oferă un tur introductiv al proiectului și a ceea ce oferă acesta, acest document se concentrează pe motivul pentru care facem lucrurile pe care le facem în Bootstrap. Acesta explică filosofia noastră de a construi pe web, astfel încât alții să poată învăța de la noi, să contribuie cu noi și să ne ajute să ne îmbunătățim.

Vedeți ceva care nu sună corect sau poate că s-ar putea face mai bine? Deschideți o problemă — ne-ar plăcea să o discutăm cu dvs.

rezumat

Ne vom arunca mai mult în fiecare dintre acestea, dar la un nivel înalt, iată ce ne ghidează abordarea.

• Componentele ar trebui să fie receptive și mai întâi mobile
• Componentele ar trebui să fie construite cu o clasă de bază și extinse prin clase modificatoare
• Stările componente ar trebui să respecte o scară comună a indicelui z
• Ori de câte ori este posibil, preferați o implementare HTML și CSS decât JavaScript
• Ori de câte ori este posibil, utilizați utilități în locul stilurilor personalizate
• Ori de câte ori este posibil, evitați aplicarea cerințelor HTML stricte (selectoare pentru copii)

Receptiv

Stilurile responsive ale Bootstrap sunt concepute pentru a fi responsive, o abordare care este adesea denumită în primul rând mobil . Folosim acest termen în documentele noastre și suntem în mare măsură de acord cu el, dar uneori poate fi prea larg. Deși nu fiecare componentă trebuie să fie complet receptivă în Bootstrap, această abordare receptivă se referă la reducerea suprascrierilor CSS, împingându-vă să adăugați stiluri pe măsură ce fereastra devine mai mare.

În Bootstrap, veți vedea acest lucru cel mai clar în interogările noastre media. În cele mai multe cazuri, folosim min-widthinterogări care încep să se aplice la un anumit punct de întrerupere și continuă prin punctele de întrerupere mai mari. De exemplu, a .d-nonese aplică de la min-width: 0la infinit. Pe de altă parte, a .d-md-nonese aplică de la punctul de întrerupere mediu în sus.

Uneori vom folosi max-widthatunci când complexitatea inerentă a unei componente o cere. Uneori, aceste înlocuiri sunt mai clare din punct de vedere funcțional și mental de implementat și suportat decât rescrierea funcționalității de bază din componentele noastre. Ne străduim să limităm această abordare, dar o vom folosi din când în când.

Clase

În afară de Reboot, o foaie de stil de normalizare între browsere, toate stilurile noastre urmăresc să folosească clase ca selectoare. Acest lucru înseamnă să evitați selectoarele de tip (de exemplu, input[type="text"]) și clasele părinte străine (de exemplu, .parent .child) care fac stilurile prea specifice pentru a le modifica cu ușurință.

Ca atare, componentele ar trebui să fie construite cu o clasă de bază care găzduiește perechi proprietate-valoare comune, care nu trebuie suprascrise. De exemplu, .btnși .btn-primary. Folosim .btnpentru toate stilurile comune precum display, padding, și border-width. Apoi folosim modificatori cum ar fi .btn-primaryadăugarea culorii, culoarea de fundal, culoarea chenarului etc.

Clasele modificatoare trebuie utilizate numai atunci când există mai multe proprietăți sau valori care trebuie modificate în mai multe variante. Modificatorii nu sunt întotdeauna necesari, așa că asigurați-vă că salvați de fapt linii de cod și preveniți suprascrierile inutile atunci când le creați. Exemple bune de modificatori sunt clasele noastre de culori ale temei și variantele de dimensiune.

scale z-index

Există două z-indexscale în Bootstrap: elemente dintr-o componentă și componente de suprapunere.

Elementele componente

• Unele componente din Bootstrap sunt construite cu elemente suprapuse pentru a preveni bordurile duble fără a modifica borderproprietatea. De exemplu, grupuri de butoane, grupuri de intrare și paginare.
• Aceste componente au o z-indexscară standard de 0prin 3.
• 0este implicit (inițial), 1este :hover, 2este :active/ .activeși 3este :focus.
• Această abordare corespunde așteptărilor noastre privind cea mai mare prioritate a utilizatorilor. Dacă un element este focalizat, acesta este în vizor și în atenția utilizatorului. Elementele active sunt pe locul doi ca înaltă deoarece indică starea. Hoverul este al treilea ca înalt deoarece indică intenția utilizatorului, dar aproape orice poate fi plasat.

Suprapunerea componentelor

Bootstrap include mai multe componente care funcționează ca o suprapunere de un fel. Acestea includ, în ordinea celei mai mari z-index, meniuri derulante, bare de navigare fixe și lipicioase, modale, sfaturi cu instrumente și popovers. Aceste componente au propria lor z-indexscară care începe la 1000. Acest număr de pornire a fost ales în mod arbitrar și servește ca un mic tampon între stilurile noastre și stilurile personalizate ale proiectului dvs.

Fiecare componentă de suprapunere își mărește z-indexușor valoarea, astfel încât principiile comune ale interfeței de utilizare permit elementelor concentrate sau plasate pe utilizator să rămână vizibile în orice moment. De exemplu, un modal este blocarea documentelor (de exemplu, nu puteți efectua nicio altă acțiune cu excepția acțiunii modalului), așa că am pus asta deasupra barelor noastre de navigare.

Aflați mai multe despre acest lucru în z-indexpagina noastră de aspect .

HTML și CSS peste JS

Ori de câte ori este posibil, preferăm să scriem HTML și CSS peste JavaScript. În general, HTML și CSS sunt mai prolifice și mai accesibile pentru mai mulți oameni de toate nivelurile diferite de experiență. HTML și CSS sunt, de asemenea, mai rapide în browserul dvs. decât JavaScript, iar browserul dvs. vă oferă, în general, o mulțime de funcționalități.

Acest principiu este API-ul nostru JavaScript de primă clasă, folosind dataatribute. Nu trebuie să scrieți aproape niciun JavaScript pentru a utiliza pluginurile noastre JavaScript; în schimb, scrie HTML. Citiți mai multe despre aceasta în pagina noastră de prezentare generală JavaScript .

În cele din urmă, stilurile noastre se bazează pe comportamentele fundamentale ale elementelor web comune. Ori de câte ori este posibil, preferăm să folosim ceea ce oferă browserul. De exemplu, puteți pune o .btnclasă pe aproape orice element, dar majoritatea elementelor nu oferă nicio valoare semantică sau funcționalitate de browser. Deci, în schimb, folosim <button>s și <a>s.

Același lucru este valabil și pentru componentele mai complexe. Deși am putea scrie propriul plugin de validare a formularelor pentru a adăuga clase la un element părinte pe baza stării unei intrări, permițându-ne astfel să stilăm textul în roșu, preferăm să folosim pseudoelementele :valid/ :invalidpe care ni le oferă fiecare browser.

Utilități

Clasele de utilitate – foste ajutoare în Bootstrap 3 – sunt un aliat puternic în combaterea balonării CSS și a performanței slabe a paginii. O clasă de utilitate este de obicei o pereche unică, imuabilă, proprietate-valoare exprimată ca o clasă (de exemplu, .d-blockreprezintă display: block;). Atractia lor principală este viteza de utilizare în timp ce scrieți HTML și limitarea cantității de CSS personalizate pe care trebuie să o scrieți.

În special în ceea ce privește CSS personalizat, utilitarele pot ajuta la combaterea creșterii dimensiunii fișierului prin reducerea perechilor de proprietate-valoare cele mai frecvente repetate în clase individuale. Acest lucru poate avea un efect dramatic la scară în proiectele dvs.

HTML flexibil

Deși nu este întotdeauna posibil, ne străduim să evităm să fim prea dogmatici în cerințele noastre HTML pentru componente. Astfel, ne concentrăm pe clase individuale în selectoarele noastre CSS și încercăm să evităm selectoarele imediate pentru copii ( >). Acest lucru vă oferă mai multă flexibilitate în implementarea dvs. și ajută la menținerea CSS-ului nostru mai simplu și mai puțin specific.

Convențiile codului

Code Guide (de la Bootstrap co-creator, @mdo) documentează modul în care scriem HTML și CSS în Bootstrap. Acesta specifică linii directoare pentru formatarea generală, valorile implicite de bun simț, ordinele de proprietăți și atribute și multe altele.

Folosim Stylelint pentru a aplica aceste standarde și multe altele în Sass/CSS. Configurația noastră personalizată Stylelint este open source și disponibilă pentru utilizare și extindere de către alții.

Folosim vnu-jar pentru a aplica HTML standard și semantic, precum și pentru a detecta erorile comune.