Foundation 6 er nesten klar til å gå ut av beta, og det er bedre enn sine forgjengere på nesten alle tenkelige måter: det er mer strømlinjeformet, det er enklere, men likevel mer sofistikert. Zurb har overgått seg selv.

Som du ser for deg selv når du endelig får den installert - enkelt nok på OSX eller Linux, men på Windows, kan Node være finicky - Foundation 6 kan bare installeres via pakkeleder i disse dager. Jeg føler at jeg blir gammel, drømmer om de gode gamle dagene da CSS-rammene kom inn i .zip-filer, og ikke fra en terminalkommando.

Likevel løgn jeg ikke da jeg sa at Foundation 6 er fantastisk. Vel, jeg burde si "Foundation for Sites", fordi Foundation ikke bare er et rammeverk lenger. Foruten Foundation for Apps har Zurb også vært opptatt med å lage et par verktøy for å få fart på utviklingen.

Denne utgivelsen har handlet om ytelse ... du kan bygge nettsteder raskere, disse nettstedene lastes ned raskere, og JavaScript vil kjøre raskere.

For det første er det Stiftelsen CLI , som kan installere enhver versjon av Foundation for deg, komplett med startprosjekter. Pre-compiled CSS i Foundation for Sites vil være tilgjengelig for nedlasting separat ved endelig utgivelse. For nå er CLI imidlertid veien å få det, og holde seg oppdatert med eventuelle endringer før endelig utgivelse.

Så er det panini , en statisk side kompilator med Templating håndtak og flere andre funksjoner for å hjelpe deg å bygge statiske prototyper og / eller nettsteder raskt. Den kompilerer Sass, setter all JavaScript i en fil, den kan komprimere all koden din og mer.

Foundation 6-funksjoner

Nå får du ikke ideen om at denne versjonen av Stiftelsen er noe mindre funksjonsfylt - den har fortsatt alt du trenger og mer - men det bør bemerkes at enkelte elementer som var bedre egnet til programmer enn nettsteder, er fjernet. Disse elementene er nå en del av Stiftelsen for Apps .

Resten av arbeidet i denne versjonen handlet om å bli kvitt overflødig kode og effektivisere alt som var igjen.

For eksempel, i stedet for å lage tre forskjellige menykomponenter for tre forskjellige menydesigner, er det bare en menykomponent, med flere variasjoner. For den personen som skriver HTML, er det liten forskjell: legg til en klasse, og du har en meny; endre noen få klasser, og du har en meny som ser helt annerledes ut.

Faktisk, for alle forskjellene, vil mange klasser og oppslag se veldig kjent ut, om ikke det samme. Det er alt bygget på Sass, slik at du kan tilpasse det som alltid.

Denne utgivelsen har handlet om ytelse. Når du lærer hvordan du kan bygge nettsteder raskere, vil disse nettstedene lastes ned raskere, og JavaScript vil kjøre raskere. Stiftelsen i nå omtrent halvparten så tung som det var når det gjelder filstørrelse. Halvparten .

Nye funksjoner

Eksplisitt støtte til RTL-språk

Eldre versjoner støttet RTL (høyre til venstre) språk som arabisk i en grad; men de trengte litt tilpasning. Stiftelsen 6 har støtte bygget rett inn.

Flexnett

Flex-nettet er akkurat det du tror det er: det er Grid-komponenten som er ferdig med Flexbox. På den ene siden gir dette en rekke funksjoner og muligheter som et vanlig flytebasert grid ikke kan håndtere. På den annen side er det sannsynligvis ikke så godt støttet, spesielt av IE. Det er en avgang.

Typografihjelpklasser

Et par kule forbedringer ble inkludert for nettstedstypografi. Spesielt er det hjelpeklasser laget for å gjøre typografiske oppsett bare litt enklere å håndtere:

  • Tekstjusteringsklasser
  • Underheader-klasser - bruker en lysere farge til hvilken som helst overskrift med .subheader- klassen.
  • Lede avsnittet stiler
  • Un-bulleted lister
  • Statistikk - bruker en større skriftstørrelse til viktige tall

Som nevnt ovenfor ble alle tidligere navigasjonskomponenter fusjonert til en stor fleksibel komponent. Dette betyr at alle navigasjonstyper vil leke pent med hverandre. Det betyr også at du kan velge forskjellige typer navigasjon for forskjellige skjermstørrelser.

Vil du ha drill-down navigasjon på en smart telefon, og en horisontal bar på skrivebordet? Gjør enkelt med skjermstørrelsesspesifikke klasser. Ønsker du "Topplinjen" tilbake? Bare legg til en wrapper div rundt standard meny komponenter.

Men selv om det er enklere å bruke generelt, er det fortsatt lastet med funksjoner. Pass på å sjekke ut dokumentasjonen om menyer og navigasjon .

Skilt

Du kjenner de små sirkler eller firkanter - vanligvis plassert på eller i nærheten av ikoner av noe slag - med små tall i dem? Liker når du har Facebook varsler? De kalles merker.

Du lærer noe nytt hver dag. Stiftelsen har også dem nå.

Sticky

Trenger du å lagre noe på skjermen mens brukeren ruller? Vil du få det til å stoppe på et bestemt tidspunkt? Sticky er din plugin! Dette er også tingen å bruke hvis du vil gjøre Magellan-menyen til å fungere som i Foundation 5.

Toggler

I tilfelle dropdowns, trekkspill, drilldowns, tooltips og modals er ikke nok for deg, her er en generisk måte å få ting til å vises eller forsvinne. Det er en enkel JavaScript-basert byttehendelse som kan brukes til i utgangspunktet noe.

Jeg forestiller meg det er for de tider da ingen av de andre komponentene passer til formålet, eller ville være overkill. Den integrerer Motion UI-biblioteket, slik at du kan animere den forsvunnende handlingen, omtrent hvilken som helst måte du liker.

Medieobjekt

Vel, navnet høres ut som det er et element der du kan legge inn en video eller Flash-objekt (yuck), og du kan gjøre det jeg antar. Det som egentlig er ment for, er å vise noe medieobjekt, for eksempel et bilde, sammen med tekstinformasjon.

For eksempel kan du sette brukerens avatar ved siden av brukernavnet og deres kommentar i en kommentar-seksjon. Du kan også bruke den til å plassere filmens utgivelsesdato, hovedaktører og andre metadata ved siden av en gjennomgang av filmen. Sjekk dokumentasjonen for eksempel.

Funksjoner som i utgangspunktet er de samme som tidligere

Hver funksjon har blitt oppdatert eller omskrevet. Imidlertid er mange funksjonelt uendret. Dobbeltklikk dokumentasjonen for å sikre at du har de riktige klassene, sjekk ut noen av oppgraderingene, og gå. Her er disse mer eller mindre de samme funksjonene, i alfabetisk rekkefølge:

  • Abide - form validering
  • trekkspill
  • Grunnleggende globale stiler
  • Breadcrumb navigasjon
  • knapper
  • Bildeforklaringer forklaringer~~POS=HEADCOMP
  • Farge mixins
  • Dropdown menyer
  • Equalizer - kolonnejustering
  • Flex Video
  • skjemaer
  • Utveksle responsivt innhold
  • Merkelapp
  • Magellan - ikke lenger klebrig som standard
  • Medieforespørsler (det skal bemerkes at bruddpunktene har endret seg)
  • Off-lerret
  • paginering
  • Progress bars
  • Avsløre
  • Sliders
  • brytere
  • tabeller
  • Tabs
  • Gitteret
  • miniatyrbilder
  • tooltip
  • Typografi stiler
  • Synlighet og verktøysklasser

Så er det virkelig noe bra?

Jepp. Det fornyede fokuset på byggeplasser (i motsetning til et rammeverk som forsøker å tilfredsstille behovene til både nettsteder og apper) er forfriskende, og redusert størrelse er alltid et pluss.

Ser frem til at det kommer til å leve veldig veldig snart.