La ce să vă așteptați cu Bootstrap 4

În ultimii ani, Bootstrap a devenit foarte popular. Există șanse mari să fi întâlnit sau să fi creat teme WordPress care încorporează elemente Bootstrap. Acesta a evoluat de la un cadru de bază pre-responsive la un cadru receptiv robust, bogat în funcții și modern. Bootstrap 3 există de ceva vreme, așa că este interesant să aflăm despre ce urmează în Bootstrap 4.

Starea Bootstrap 4

Bootstrap 4 este în prezent în lucru și nu este încă pregătit pentru a fi utilizat în producție. Momentan este în versiune alfa. Aceasta este o oportunitate bună de a previzualiza și de a vă familiariza cu modul în care vă va ajuta cu proiectele viitoare.

Documentația pentru Bootstrap 4 nu este încă completă, așa că experimentarea este o modalitate bună de a testa unele dintre noile funcții. Odată ce este disponibil oficial pentru utilizare în producție, veți fi bine conștienți de toate noile îmbunătățiri extraordinare.

Creat pentru browsere moderne

Pe măsură ce avansăm pe web, devine din ce în ce mai greu să suportăm browsere mai vechi în timp ce folosim cele mai recente și mai bune dintre ceea ce are de oferit dezvoltarea web. Indiferent dacă aceasta este sau nu muzică pentru urechile tale, suntem cu toții de acord că tehnicile CSS3 mai bune sunt simplificate atunci când lucrezi cu browsere moderne. Bootstrap 4 ar putea fi doar modalitatea perfectă de a face o pauză curată de browserele mai vechi. Cu această actualizare, suportul pentru Internet Explorer 8 este complet abandonat. Rețineți că cadrul acceptă în continuare Internet Explorer 9 și încă acceptă CSS3 fără multe probleme.

Resetare îmbunătățită

Probabil că v-ați obișnuit cu Normalize.css, care este o opțiune grozavă de resetare. Există o resetare nouă și îmbunătățită cu lucruri specifice Bootstrap adăugate la ea numite reboot.css. Specificațiile bootstrap sunt lucruri precum dimensiunea casetei: chenar, rems ca unitate de măsură, stiluri de link și stiluri de formular. Este o combinație grozavă între Normalize.css și nevoile specifice Bootstrap, așa că sunteți sigur că veți avea un început excelent.

SASS

În zilele anterioare de Bootstrap, părea că LESS era preferat. Cu schimbările din industrie și preferințele designerilor înclinând spre SASS, este ceea ce este în favoarea actuală. Dacă vă amintiți înapoi la versiunea 3, atunci opțiunea SASS a devenit disponibilă cu opțiunea port. Deocamdată, nu există asistență planificată pentru LESS.

Personalizări

Bootstrap 4 facilitează crearea de design-uri personalizate, toate realizate într-un mod organizat. Toate opțiunile variabile sunt consolidate într-un singur fișier. SASS poate fi compilat cu ușurință și nu este nevoie de o foaie de stil separată, așa cum a fost în trecut.

Există destul de multe opțiuni noi de personalizare în Bootstrap 4. Puteți vedea starea actuală aici. Cel mai probabil va evolua puțin pe măsură ce detaliile continuă să fie lansate.

Rețineți că acestea sunt personalizări ușor de configurat la început:

• Valori implicite pentru corp
• Variabile de culoare
• Cutie flexibilă
• Opțiuni de design CSS3, cum ar fi tranziții, colțuri rotunjite, umbre, etc.
• Măsurători de distanță
• Stiluri de linkuri
• Puncte de întrerupere a rețelei
• Containere grilă
• Coloane grilă
• Dimensiunea tipografiei
• Componente
• Mese
• Mai mult!

Flexbox cineva?

Flexbox a crescut cu siguranță în popularitate și vom vedea din ce în ce mai mulți designeri web care folosesc acest lucru. Este un instrument grozav de utilizat, deoarece oferă opțiuni de aspect simple și flexibile cu stil CSS. Dacă vă place ușurința de aliniere verticală a conținutului într-un element părinte, reordonarea conținutului pe dispozitive și rezoluții de ecran cu ajutorul interogărilor media și apreciind o modalitate ușoară de a avea coloane de înălțime egală în grila dvs., Flexbox este o soluție excelentă. .

Înainte de a fugi și de a converti toate proiectele, este un lucru important de menționat. Chiar dacă suportul pentru browser a crescut drastic, Internet Explorer 9 încă nu are suport Flexbox. În ceea ce privește ușurința în utilizare, Bootstrap 4 facilitează utilizarea Flexbox dacă nu aveți nevoie de suport IE9. În esență, tot ce trebuie să faceți este să găsiți fișierul _variables.scss și să schimbați $enable-flex de la false la adevărat. Dacă sunteți familiarizat cu SASS, acesta este un lucru rapid de făcut.

Actualizări ale rețelei

Dacă sunteți un fan de mult timp al Bootstrap, probabil că sunteți un expert în modul în care funcționează sistemul grid, împreună cu convenția de denumire. Cu Bootstrap 4, sintaxa rămâne aceeași, dar există o diferență cu măsurătorile utilizate. Sistemul de grilă se bazează acum pe „rems”. Aceasta este o ajustare dacă sunteți obișnuit cu design-ul perfect pixelat, deoarece acum lucrurile vor fi mai fluide.

Când ne despărțim de pixelii cu care ne-am obișnuit atât de mult, să aruncăm o privire la exemplul de ceva obișnuit precum .container și .row. Containerul are acum o lățime maximă stabilită în rem. Un rând are o marjă negativă implicită stânga și dreapta de -.9375rem , în timp ce coloanele au o umplutură implicită stânga și dreapta de 0.9375rem . După cum vă amintiți, aceste valori erau anterior de 15px în Bootstrap 3. Aceste noi valori rem sunt comparabile cu acestea.

Interogări media îmbunătățite

Interogările media din versiunile anterioare de Bootstrap erau puțin generale și uneori trebuiau create unele personalizate. Iată cum arătau:

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

Acum, se poate adopta o abordare mai mobilă cu aceste interogări media actualizate:

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

Dacă doriți ceva diferit, punctele de întrerupere sunt configurabile în SASS dacă doriți să vă alegeți pe ale dvs.

Carduri ca înlocuitor

Sunteți familiarizat cu panourile, puțurile și miniaturile? Cardurile sunt acum cele mai recente și mai bune și oferă câteva opțiuni grozave de stil. Un exemplu este Grupurile de carduri. Chiar dacă cantitatea de text variază, cardurile au înălțimea egală, fără a depinde de JavaScript. Aceasta funcționează atât cu Flexbox, cât și cu modul grilă implicit. Când utilizați Flexbox, cardurile sunt construite folosind proprietățile Flexbox. Grila implicită folosește un truc CSS pentru a evita necesitatea JavaScript. Containerul folosește display: table; și fiecare „card” este display: table-cell; oferindu-i proprietățile tabelului – de aici provine înălțimea egală a coloanei.

Tipografie

Îți amintești cum grila folosește acum rems? Ei bine, are sens doar ca și tipografia să facă asta! Când vă gândiți la asta, amintiți-vă că toate dimensiunile fontului sunt relativ la elementul rădăcină, eticheta HTML. Când modificați dimensiunea fontului (sau orice alte stiluri) pe eticheta HTML, puteți stila și scala cu ușurință stilurile în întregul proiect.

Să presupunem că elementul dvs. HTML are un stil cu font-size: 16px . Să presupunem că doriți ca etichetele dvs. h5 să aibă aceeași dimensiune, ați declara o dimensiune a fontului de 1rem.

h5 {
font-size: 1rem;
}

Acum, ar putea fi ceva matematică implicată în avans. Dacă ați vrut ca etichetele dvs. h1 să aibă 40 de pixeli, iată cum să vă dați seama:

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

Nu te simți încă rems? Puteți folosi în continuare pixeli și ems pentru dimensionare, dacă doriți.

Mai multe stiluri de titlu

Titlurile sunt excelente pentru stabilirea ierarhiei. Dar dacă vrei ceva mai proeminent decât un h1, h2, h3 etc.? Ei bine, vestea bună este că puteți adăuga o clasă de titlu de afișare la un titlu standard care îl face mai mare. Ar arata ceva de genul:

<h1 class="display-4">Heading Display 4</h1>

Un display-4 este mai mare decât un display-2 .

Dimensiune mai mică a fișierului

Bootstrap 4 are o amprentă mai mică. De fapt, este cu aproximativ 30% mai mic decât cea mai recentă versiune, Bootstrap 3. Anterior era în jur de ~123kb, iar acum este de ~88kb. Este minunat că este mai mic și are încă aceleași caracteristici grozave.

Rețineți că există opțiunea de a utiliza numai părțile Bootstrap de care aveți nevoie, ceea ce face dimensiunile fișierelor și mai mici.

Gata cu Glyphicons?

Glificonurile au fost utilizate pe scară largă în versiunile anterioare de Bootstrap, așa că este trist să le vezi plecând. Nu vă faceți griji, acesta nu este sfârșitul pictogramelor web. În locul lui, FontAwesome ar trebui să vă servească la fel de bine. De asemenea, puteți consulta Octigons de la Github pentru opțiuni grozave de pictograme.

Trecerea la Bootstrap 4

Deși este în prezent în alfa, nu există niciun motiv pentru care să nu poți lucra cu el într-un mediu de testare. Codul sursă este disponibil într-o ramură v4-dev pe GitHub. Pe măsură ce experimentați și vedeți ceva care necesită atenție, există o cerere de extragere de dezvoltare și urmărire care include note despre modificări și orice alte îmbunătățiri noi.

Lucrurile sunt în alfa și, în cele din urmă, vor exista lansări beta după ce caracteristicile și funcționalitățile vor fi gata să fie testate. După beta, doi candidați de lansare vor fi folosiți pentru a testa lucrurile în producție. Când totul va merge bine, versiunea finală va fi gata!

Tocmai am zgâriat suprafața aici și conversația Bootstrap 4 tocmai a început. Este emoționant să văd ce ne rezervă viitorul și devin entuziasmat să văd că iese din alfa. Asigurați-vă că urmăriți actualizările și descărcați o copie pentru a testa noile componente Bootstrap 4.