Share
Yeti e înapoi! Fundația 6 a fost lansată astăzi și suntem cu toții excluși de noua etică a designului, de caracteristici și de uneltele puternice pe care această încarnare a cadrului popular al ZURB ne aduce! Există chiar și un extra "ceva" special cu această versiune, așa că se arunca cu capul în acest articol pentru a obține scăderea completă.
Fundația 6 nu este doar o iterație vizuală, o restructurare a codului sau o simplă modificare a numărului versiunii. Echipa de la ZURB sa așezat pentru asta complet să regândiți cadrul și să vedeți ce este necesar pentru a face acest lucru mai minunat. Fundația 6 este despre întregul proces; de la prototip la producție.
Trecerea de la prototip la producție este acum o briză!Unele dintre principalele obiective pe care le-a avut echipa de dezvoltare au fost:
"Pentru Fundația 6, am redus mărimea fișierului a fișierului CSS complet la jumătate, optimizând agresiv utilizarea noastră de Sass și făcând componente mai simple în structură și stil."
- Geoff Kimball Designer de Produs, ZURB
Deci, cum au afectat aceste obiective cadrul nostru favorit pentru construirea de site-uri minunate? Să aflăm! Mai întâi vom trece peste câteva dintre principalele caracteristici ale Fundației 6 și apoi vom arunca în detaliu în CSS / Sass și JavaScript.
Procesul de configurare a versiunii Sass a Fundației 6 a fost îmbunătățit, astfel încât să puteți obține mai repede proiectele de pe teren. Există dependențe mult mai mici, iar erorile sunt gestionate mult mai inteligent, astfel încât veți avea mai puține probleme în găsirea erorii în cauză.
Un alt plus extraordinar este că ZURB oferă un stack complet cu propriul generator de site-uri statice, server live-reload și multe modalități de optimizare a codului dvs. cu UNCSS și UglifyJS. Este același stiva pe care tipii de la ZURB le folosesc pentru propriile lor proiecte (mai multe despre asta mai târziu!).
"Fundația pentru Site-urile 6 filmul" venită din 2018. Posibil.Au existat multe preocupări cu privire la codul folosit de cadre (cum ar fi Bootstrap și Foundation) care nu sunt utilizate într-un proiect. Chiar și 90% din codul CSS este neutilizat, ceea ce este cu adevărat inutil și o problemă pentru performanță. Având în vedere acest lucru, Fundația 6 are o reducere enormă de 50% a codului pentru a începe!
Yeti a lucrat și a plătit!ZURB a abordat această problemă de două ori cu Fundația 6, aplicând mai puține stiluri de la început și oferindu-vă instrumentele pentru a dezbate și fișierele. Acum puteți să adăugați mai ușor propriile stiluri pentru versiunea de producție a proiectului dvs. Stilurile Fundației 6 face oferta poate fi ușor actualizată cu variabile prin Sass.
De asemenea, o mulțime de clase de prezentare au fost eliminate, astfel încât CSS generat să rămână curat. Această versiune a Fundației nu are clase stilistice cum ar fi margini, paddings și rotunde și rază. Prin intermediul familiei _settings.scss fișierul a devenit mai ușor să vă importați selectiv modulele. Prin comentarea selectivă a componentelor pe care nu le utilizați, veți elimina cu ușurință multe coduri CSS neutilizate.
Deci, cu un fișier mai ușor de la început, mai puține clase stilistice și mai mult control asupra a ceea ce să includă și ce nu, sunteți gata să vă mutați prototipul în codul de producție și ușor.
Documentația actualizată care vine împreună cu Fundația 6, împreună cu un formular de căutare AJAX, vă ajută să găsiți rapid ceva:
Formularul de căutare vă oferă sugestii pe măsură ce tastați.Doar tastați componenta sau subiectul pe care îl căutați și formularul de căutare vă oferă subiectele relevante. Este un extra frumos care face scufundarea în documentație o experiență plăcută.
Barul Top a avut de asemenea o actualizare mare. În versiunile anterioare a fost minunat la ceea ce a fost destinat, dar a fost puțin inflexibil. Nu mai! Fundația 6 introduce componente pentru Bara de sus pentru a face mai flexibil și ușor să adăugați și să eliminați anumite elemente pentru diferite dispozitive, cum ar fi:
În Fundația 6, ZURB au creat o grilă mai flexibilă, care vă permite să controlați numărul coloanelor pe un rând. S-ar putea să faceți ceva de genul:
.container // vom defini această clasă pentru a folosi 16 coloane @ include grilă-rând (16) . sidebar // 5/16 = 31.25% @ include grilă-coloană (5); . conținut principal // 11/16 = 68,75% @ include grilă-coloană (11);
Sau ceva de genul acesta:
.sidebar // acest lucru va face. sidebar să ia 2 coloane dintr-o grilă 5 coloană @ include grilă-coloană (2 din 5); . conținut principal // acest lucru va face ca majoritatea conținutului să preia 3 coloane dintr-o grilă cu 5 coloane @ include: grilă-coloană (3 din 5);
Efectuați propriul număr de coloane pentru un anumit element sau creați un rând cu cinci coloane fără a schimba numărul de coloane pentru întregul proiect. Această caracteristică nouă vă va oferi un control mai granulat asupra grilajului, astfel încât să puteți face planul să se potrivească mai bine conținutului dvs..
Fundația 6 a adus înapoi glisorul Orbit, dar cu o altă abordare de această dată: este proiectat să fie un instrument de fâșia de sârmă. Această versiune conține doar un mic cod HTML și un mic JavaScript. Codul de personalizare va fi făcut în interiorul marcajului paginii și este mult mai ușor de realizat.
Mă bucur să te am înapoi pe vechiul prieten!Când căutați un cursor în faza de producție, echipa de la ZURB vă recomandă să folosiți un glisor, cum ar fi glisorul Owl, de exemplu. Așa cum am menționat, glisorul Orbit este pur și simplu conceput ca un instrument de tip wireframe.
În colaborarea cu clienții proprii, ZURB a construit un șablon personalizat pentru a furniza proiecte. Inclusiv Handlebars și construit pe Libsass, acesta este stack-ul sus-up pe care l-am atins mai devreme. Este aici pentru a vă folosi și pentru a vă optimiza propriul flux de lucru, și se numește Panini:
Un plan preprogramat, gata pentru a vă folosi în următorul proiect Acest sistem de construcție alimentat de Gulp face foarte mult:
Șablonul poate crea, de asemenea, codul de producție, adăugând în acești pași suplimentari:
Șabloanele de manuale și asistenții fac codul dinamic pentru paginile statice o briză!
Nou în Fundația 6 este o grilă alimentată cu Flexbox, pe care o puteți utiliza în locul grila tradițională de plutire. Funcționează similar cu rețeaua de flotor standard, dar include și o serie de funcții utile, cu ajutorul Flexbox, cum ar fi alinierea orizontală și verticală, dimensionarea automată și comanda mai ușoară a sursei. Cunoastem Flexbox Grid de la Fundația pentru aplicații și este minunat să vedem că o putem folosi acum și în Fundația pentru Site-uri!
Motion UI este o bibliotecă de animație și a fost inițial construită și utilizată în Fundația pentru aplicații. Acum, fericit, îl puteți folosi pentru crearea de tranziții și animații personalizate CSS în Fundația pentru site-uri!
Adăugați diferite tipuri de tranziții și animații la proiectele Fundației!Această versiune actualizată include mai multe opțiuni de tranziție robuste, un sistem de așteptare a animațiilor și modele flexibile CSS care pot funcționa cu orice bibliotecă de animație Javascript.
Ajustarea diferitelor tranziții și animații este o problemă de manipulare a amestecurilor Sass care vin cu această versiune de Motion UI. Propunerea UI include, de asemenea, un număr mare de clase CSS pre-făcute pentru a vă ridica rapid prototipurile.
Biblioteca a fost concepută pentru a fi utilizată cu cadrele Fundației, dar poate fi adaptată pentru a lucra cu orice bibliotecă de animație a unui cadru, cum ar fi Angular sau React.
Așa cum am menționat, obiectivul mare cu Fundația 6 a fost de a facilita utilizarea și de a vă facilita înlocuirea cadrului cu propriul cod de producție. Să aruncăm o privire la unele dintre caracteristicile reale pe care Fundația 6 le aduce în legătură cu CSS și Sass.
Creați-vă propriile ghiduri de stil mai ușor în cea mai nouă fundațieÎn Fundația 5, ați putea schimba punctele de întrerupere, dar nu a fost complet evident unde să le găsiți și cum să faceți acest lucru. Nu mai. Fundația 6 vă oferă o imagine de ansamblu (o hartă de puncte), în care puteți ajusta, adăuga și elimina cu ușurință puncte de întrerupere din proiect.
Bacsis: încercați să păstrați cât mai mult posibil întreruperile prestabilite; mărimea fișierului crește cu puncte de interferență suplimentare.
Exemplu de hartă a punctelor de rupere utilizând noua caracteristică Sass MapsCu Fundația 5 a trebuit să efectuați interpolare de șir pentru a utiliza interogările media în fișierele Sass. Deoarece acest lucru nu a fost foarte clar tot timpul, iar oamenii ar trebui adesea să viziteze documentația pentru a copia și lipi codul corect, echipa de la ZURB a imaginat că acest lucru se poate face mai ușor. Deci acum, în loc de interpolarea șirului, puteți folosi diferite @includes pentru a include puncte de întrerupere diferite. Utilizarea mediu de exemplu, este pentru puncte de întrerupere medie și în sus, numai mediu pentru, numai, mediu, și mediu jos pentru medii, mici etc. Puteți chiar să includeți pixelul propriu, să atingeți puncte de întrerupere și să utilizați retina, peisaj și portret.
"Am vrut să aflăm cum oamenii au folosit de fapt Fundația, așa că am călătorit în întreaga lume și am dat peste 100 de apeluri pentru a urmări efectiv modul în care comunitatea a folosit Cadrul și a discutat despre ce au nevoie de ea.
- Fundația Brandon Arnold conduce, ZURB
JavaScript a avut o revizuire majoră, de asemenea. O modalitate de a reduce cantitatea de cod în pluginurile JavaScript ale Fundației 6 a fost să le separați în utilități mai mici care gestionează evenimentele pe pluginuri mai mari. Și făcând aceste utilitare accesibile publicului, le puteți folosi acum pentru a vă construi pluginurile proprii! Deci, ce pluginuri găsim în Fundația 6? Să aflăm:
Plug-in și joacă cu Plug-in-uri helper Fundații noi.Fundația 6 include un nou API pentru comutare, astfel încât utilizatorii să poată face rapid și ușor site-urile lor mai dinamice și arată stări. Toggler face schimbarea elementelor și adăugarea de clase în briză. Este minunat pentru construirea rapidă și nu necesită cunoștințe JavaScript.
Comutați clasele cu un atribut de date. De exemplu:
Extinde!
Aceasta este o funcție publică pentru determinarea coliziunilor cu marginea unui container. Această detectare a margini va păstra vârfurile de instrumente, meniuri și multe altele în portul de vizualizare sau în containerul dorit.
Un generator de numere aleatoare. Puteți folosi acest lucru pentru a adăuga atributele A11Y "aria" care necesită ID-uri, de exemplu.
Aceasta este o funcție pentru a adăuga un ascultător de evenimente fereastră dacă este aplicat, trage un eveniment non-bubbling la elemente de plugin individuale cu [Data-yeti-box = 'idOfElement'] a inchide. În cazul în care se deschide un alt element al aceluiași tip de plugin, adică dacă se deschide Bara de instrumente B și în momentul de față se deschide Tooltip A, închideți simbolul A înainte de a deschide B.
Aici ni se dă o funcție publică de adăugat onscroll eveniment ascultător fereastră. Marcarea este după cum urmează: [Date scroll = 'idOfElement']
O funcție pentru a adăuga a redimensiona eveniment ascultător fereastră.
eu am făcut asta!Aproape tot JavaScript-ul a fost construit cu utilități separate care se ocupă de funcții comune cum ar fi exemplele de mai sus. Acest lucru permite ca pluginurile să fie mai mici, iar acum puteți crea cu ușurință propriile lor!
Ca un pic mai mult, ZURB a lansat, de asemenea, o nouă aplicație Desktop Companion! Cu aceasta puteți să faceți proiecte cu doar un singur click de mouse. Ridică-te și alergi mai repede decât oricând înainte cu: Yeti Launch. Frumos!
Spin proiecte cu un singur click de mouse!Fundația pentru site-urile 6 a văzut o revizuire cu adevărat mare, reflectând modul în care ZURB își construiește propriile site-uri accesibile. Împărtășirea cunoștințelor și a experienței dvs. îi ușurează pe ceilalți dezvoltatori și designeri să facă prototipuri și să ajungă rapid la producție.
Cele mai rapide yeti încăPentru a rezuma, ce avem cu Fundația 6?
Peste 125 de teme de pe Envato Market sunt compatibile cu Fundația 5 - veți fi primul care va vinde ceva construit pe Fundația 6?!
Accentsconagua