Share
The Yeti er tilbake! Stiftelsen 6 ble utgitt i dag, og vi er alle glade for å være glad for den nye designetikken, funksjoner og kraftige verktøy som denne inkarnasjonen av ZURBs populære rammeverk bringer oss! Det er enda en spesiell "noe" ekstra med denne utgivelsen, så dykk inn i denne artikkelen for å få den komplette nedgangen.
Stiftelse 6 er ikke bare en visuell iterasjon, kodeomstrukturering eller en enkel endring i versjonsnummer. Teamet på ZURB satte seg for denne til helt revurdere rammen og se hva som måtte skje for å gjøre det mer fantastisk. Stiftelse 6 handler om hele prosessen; fra prototype til produksjon.
Å gå fra prototype til produksjon er nå en bris!Noen av de viktigste målene utviklingslaget hadde var:
"For Foundation 6 har vi kuttet filstørrelsen til den komplette CSS-filen med halvparten, ved å aggressivt optimalisere bruken av Sass, og gjøre komponenter enklere i struktur og stil."
- Geoff Kimball Produkt Designer, ZURB
Så hvordan påvirket disse målene våre favorittrammer for å bygge fantastiske nettsteder? La oss finne det ut! Vi går først over noen av hovedtrekkene til Foundation 6 og dykker deretter inn i CSS / Sass og JavaScript i mer detalj.
Oppsettprosessen til Sass-versjonen av Foundation 6 har blitt forbedret, slik at du kan få prosjektene dine fra bakken raskere. Det er langt færre avhengigheter, og feil håndteres mye mer intelligent, slik at du får mindre problemer med å finne ut av feilen.
En annen fin ekstra er at ZURB tilbyr en suppe-stabel komplett med sin egen statiske nettsted generator, live reload server og mange måter å bedre optimalisere koden din med UNCSS og UglifyJS. Det er den samme stabelen som gutta på ZURB bruker til egne prosjekter (mer om dette senere!).
"Foundation for Sites 6 the Movie" kommer 2018. Eventuelt.Det har vært mye bekymring for kode som brukes av rammer (for eksempel Bootstrap og Foundation) som går ubrukt i et prosjekt. Selv så mye som 90% av CSS-koden går ubrukt, noe som virkelig er unødvendig, og et problem for ytelse. Med dette i bakhodet har Stiftelse 6 en enorm 50% kodeduksjon til å begynne med!
Yeti trente og det betalte seg!ZURB nærmet seg dette problemet to ganger med Foundation 6, ved å bruke færre stiler fra starten, og gir deg verktøyene for å stripe filene også. Nå kan du lettere legge til dine egne stiler for produksjonsversjonen av prosjektet. Stilfunnet 6 gjør Tilbudet kan enkelt oppdateres med variabler via Sass.
Også, mange av presentasjonsklassene er fjernet, slik at den genererte CSS forblir ren. Denne versjonen av Foundation har ingen stilistiske klasser som marginer, paddings og runde og radius. Gjennom den kjente _settings.scss fil det er nå gjort enda enklere å selektivt importere modulene dine. Ved å selektivt kommentere komponentene du ikke bruker, vil du enkelt fjerne mye ubrukt CSS-kode.
Så, med en lettere fil fra farten, færre stilistiske klasser, og mer kontroll over hva du skal inkludere og hva ikke, er du nå klar til å flytte prototypen til produksjons klar og lett kode.
Den oppdaterte dokumentasjonen som følger med Foundation 6, sammen med et AJAX-drevet søknadsskjema, gjør det enkelt for deg å raskt finne noe:
Søkeformularen gir deg forslag mens du skriver.Skriv bare komponenten eller emnet du leter etter, og søkeskjemaet gir deg de relevante emnene. Det er en fin liten ekstra som gjør dykking i dokumentasjonen en hyggelig opplevelse.
Top Baren har også sett en stor oppdatering også. I tidligere versjoner var det bra på hva det var ment for, men det var litt ubøyelig. Ikke nå lenger! Stiftelse 6 introduserer komponenter for topplinjen for å gjøre det mer fleksibelt og enkelt for deg å legge til og fjerne visse elementer for forskjellige enheter, for eksempel:
I Foundation 6 ZURB har du opprettet et mer fleksibelt mixin-grid som lar deg styre kolonnestellingen på en rad. Du kan gjøre noe slikt:
.container // vi definerer denne klassen for å bruke 16 kolonner @include grid-rad (16) .sidebar // 5/16 = 31,25% @include grid-column (5); .main-innhold // 11/16 = 68,75% @include grid-column (11);
Eller noe slikt:
.sidebar // dette vil gjøre .sidebar ta opp 2 kolonner av en 5 kolonne grid @ include grid-column (2 av 5); .main-innhold // dette vil gjøre .main-innhold ta opp 3 kolonner av en 5 kolonne grid @include: grid-column (3 av 5);
Lag din egen kolonne telling for et bestemt element, eller lag en fem kolonne rad uten å endre kolonne telling for hele prosjektet. Denne nye funksjonen gir deg mer granulær kontroll over rutenett slik at du kan gjøre layoutet ditt bedre for ditt innhold.
Stiftelsen 6 har tatt tilbake Orbit-glideren, men med en annen tilnærming denne gangen: Den er designet for å være et wireframingverktøy. Denne versjonen inneholder bare litt HTML og et lite JavaScript. Koden for å tilpasse den vil bli gjort inne i siden oppføring og er mye lettere å utføre.
Glad for å ha deg tilbake gammel venn!Når du ser etter en glidebryter i produksjonsfasen, anbefaler teamet på ZURB å bruke en glidebryter som for eksempel Owl-glidebryteren. Som nevnt er Orbit-glideren ment som et wireframe-verktøy.
I arbeidet med sine egne kunder har ZURB bygget en tilpasset mal for å levere prosjekter. Inkludert håndtak og bygget på Libsass, dette er den suppe-opp stakken vi berørt tidligere. Det er her for deg å bruke og for å optimalisere din egen arbeidsflyt, og det går etter navnet Panini:
En forhåndsbestemt blåkopi, klar for deg å bruke på ditt neste prosjekt Dette Gulp-drevne byggsystemet gjør mye:
Malen kan også skape produksjonsklar kode, og legger til i disse ekstra trinnene:
Handlebars maler og hjelpere gjør skrive dynamisk kode for statiske sider en bris!
Nytt i Foundation 6 er et Flexbox powered Grid, som du kan bruke i stedet for det tradisjonelle flyterettet. Det fungerer på samme måte som standard flytgitteret, men inneholder en rekke nyttige funksjoner som bare er mulige med Flexbox, som horisontal og vertikal justering, automatisk liming og enklere kildebestilling. Vi kjenner Flexbox Grid fra Foundation for Apps, og det er kjempebra å se at vi nå kan bruke det i Foundation for Sites også!
Motion UI er et animasjonsbibliotek og ble opprinnelig bygget og brukt i Foundation for Apps. Nå, heldigvis kan du bruke den til å skape tilpassede CSS-overganger og animasjoner i Foundation for Sites også!
Legg til alle forskjellige typer overganger og animasjoner til dine stiftingsprosjekter!Denne oppdaterte versjonen inneholder mer robuste overgangsalternativer, et animasjonskøysystem og fleksible CSS-mønstre som kan fungere med et hvilket som helst Javascript-animasjonsbibliotek.
Justering av de forskjellige overgangene og animasjonene handler om å tukle med Sass-mixinene som følger med denne versjonen av Motion UI. Motion UI inneholder også et stort antall forhåndsdefinerte CSS-klasser for å få prototyper opp raskt.
Biblioteket ble utviklet for bruk med stiftelsens rammeverk, men kan tilpasses til å arbeide med et rammings animasjonsbibliotek, for eksempel Angular or React.
Som nevnt var det store målet med Stiftelse 6 å gjøre det enklere å bruke og lettere for deg å overskrive rammen med din egen produksjons-klare kode. La oss ta en titt på noen av de kule funksjonene Foundation 6 bringer oss om CSS og Sass.
Lag din egen stilguider lettere i den nyeste FoundationI Stiftelse 5 kan du endre breakpoints, men det var ikke helt klart hvor du skal finne dem og hvordan du skal gjøre det. Ikke nå lenger. Stiftelse 6 gir deg en oversikt (et pausepunktskart) der du enkelt kan justere, legge til og fjerne breakpoints fra prosjektet.
Tips: Prøv å holde deg til standardbruddspunkene så mye som mulig; filstørrelsen øker med flere brytpunkter.
Eksempel på breakpoints-kartet ved hjelp av den nye Sass Maps-funksjonenMed Foundation 5 måtte du utføre strenginterpolering for å bruke medieforespørsler i Sass-filene dine. Fordi dette ikke var helt klart hele tiden, og folk ofte måtte besøke dokumentasjonen for å kopiere og lime inn den riktige koden, fant teamet på ZURB at dette kunne gjøres lettere. Så nå, i stedet for strengen interpolering, kan du bruke forskjellige @includes å inkludere forskjellige bruddpunkter. Ved hjelp av medium for eksempel, er for breakpoints medium og opp, kun medium for, vel, medium bare, og medium ned for middels, liten osv. Du kan til og med inkludere din egen piksel, fra rembruddspunkter og bruke netthinnen, landskapet og portretten.
"Vi ønsket å lære hvordan folk faktisk brukte Foundation, så vi reiste rundt i verden og hoppet på 100-tallet av samtaler for å faktisk se hvordan samfunnet brukte rammen og diskutert hva de trengte fra det. Det var fantastisk!"
- Brandon Arnold Foundation Lead, ZURB
JavaScript har også hatt en stor overhaling. En måte å redusere mengden kode på JavaScript-pluginene til Foundation 6 var å skille dem ut i mindre verktøy som håndterer hendelser på større plugins. Og ved å gjøre disse verktøyene offentlig tilgjengelige, kan du nå bruke dem til å bygge dine egne plugins! Så, hvilke plugins kan vi finne i Foundation 6? La oss finne det ut:
Plug and play med Foundations nye hjelpeprogrammer.Stiftelsen 6 inneholder en ny toggler API, slik at folk raskt og enkelt kan gjøre sine nettsteder mer dynamiske og vise stater. Toggler gjør bytteelementer og legger klasser til en bris. Det er flott å bygge raskt, og krever ingen JavaScript-kunnskap.
Veksle klasser med et datatributt. For eksempel:
Utvide!
Dette er en offentlig funksjon for å bestemme kollisjoner med kanten av en beholder. Denne kantdeteksjonen vil holde verktøytips, dropdowns og mer i visningsporten eller -beholderen du ønsker.
En tilfeldig talgenerator. Du kan bruke dette til å legge til A11Y "aria" attributter som krever ID, for eksempel.
Dette er en funksjon for å legge til en hendelseslytter til vindu hvis det påføres, skyter en ikke-boblende hendelse til individuelle pluginelementer med [Data yeti-box = 'idOfElement'] å lukke. Hvis et annet element av samme plugin type åpnes, dvs. hvis Tooltip B åpnes og Tooltip A er åpen for øyeblikket, lukk Tooltip A før du åpner B.
Her får vi en offentlig funksjon for å legge til en onscroll hendelseslytter til vindu. Markeringen er som følger: [Data-bla = 'idOfElement']
En funksjon for å legge til en endre størrelse på hendelseslytter til vindu.
jeg lagde dette!Nesten alle JavaScript er bygget med separate verktøy som håndterer vanlige funksjoner som eksemplene ovenfor. Dette gjør at pluginene kan være mindre, og med dem kan du nå enkelt lage din egen!
Som litt ekstra har ZURB også gitt ut en helt ny Desktop Companion App! Med det kan du spinne opp prosjekter med bare ett enkelt museklikk. Kom deg opp raskere enn noen gang før med: Yeti Launch. Hyggelig!
Spinn opp prosjekter med et enkelt museklikk!Foundation for Sites 6 har sett en veldig stor overhaling, noe som reflekterer måten ZURB bygger sine egne tilgjengelige nettsteder på. Deling av kunnskap og erfaring gjør det enkelt for andre utviklere og designere å prototype, og komme raskt til produksjon.
Den raskeste yeti ennåFor å oppsummere, hva får vi med Foundation 6?
Over 125 temaer på Envato Market er kompatible med Foundation 5-vil du være første til å selge noe bygget på Foundation 6?!
Accentsconagua