Stiftelsen 6 är nästan redo att avsluta beta, och det är bättre än sina föregångare på nästan alla tänkbara sätt: det är mer strömlinjeformat, det är enklare, men ändå mer sofistikerat. Zurb har överträffat sig själva.
Som du ser själv när du äntligen får det installerat - enkelt nog på OSX eller Linux, men på Windows kan noden vara finicky - Foundation 6 kan bara installeras via paketchefen i dessa dagar. Jag känner att jag blir gammal och drömmer om de goda gamla dagarna när CSS-ramar kom in i .zip-filer och inte från ett terminalkommando.
Jag ljuger dock inte när jag sa att Stiftelsen 6 är fantastisk. Tja, jag borde säga "Foundation for Sites", eftersom Foundation inte bara är en ram. Förutom Foundation for Apps har Zurb också varit upptagen med att göra några verktyg för att påskynda utvecklingen.
Den här utgåvan har handlat om prestanda ... du kan bygga webbplatser snabbare, de här webbplatserna hämtar snabbare och JavaScript körs snabbare.
För det första finns det Foundation CLI , som kan installera någon version av Foundation för dig, komplett med startprojekt. Den förkompilerade CSS i Foundation for Sites kommer att finnas tillgänglig för nedladdning separat vid slutlig release. För tillfället är dock CLI vägen för att få det, och hålla sig uppdaterad med eventuella ändringar före den slutliga utgåvan.
Då finns det Panini , en statisk sidompilator med templerande handtag och flera andra funktioner som hjälper dig att snabbt bygga statiska prototyper och / eller webbplatser. Den sammanställer Sass, sätter all JavaScript i en fil, den kan komprimera all din kod och mer.
Nu får du inte uppfattningen att den här versionen av Stiftelsen är mindre funktionaliserad - den har fortfarande allt du behöver och mer - men det bör noteras att vissa element som var bättre lämpade för appar än webbplatser har tagits bort. Dessa element är nu en del av Foundation for Apps .
Resten av arbetet i den här versionen handlade om att bli av med redundant kod och effektivisera allt som var kvar.
Till exempel, istället för att skapa tre olika menykomponenter för tre olika menydesigner, finns det bara en menykomponent, med flera varianter. För den person som skriver HTML, är det liten skillnad: lägg till en klass, och du har en meny; ändra några klasser, och du har en meny som ser helt annorlunda ut.
Faktum är att för alla skillnader kommer många klasser och markeringar att se väldigt bekanta, om inte samma sak. Det är byggt på Sass så att du kan anpassa den som alltid.
Den här utgåvan har handlat om prestanda. När du väl har läst hur du kan bygga webbplatser snabbare kommer dessa webbplatser att hämtas snabbare och JavaScript körs snabbare. Stiftelsen i nu ungefär hälften så tung som det gällde filstorlek. Halva .
Äldre versioner stödde RTL (höger-till-vänster) språk som arabiska i en utsträckning; men de behövde lite tweaking. Stiftelsen 6 har stöd byggt in i.
Flex-nätet är exakt vad du tycker är det: det är Grid-komponenten som återställs med Flexbox. Å ena sidan ger detta ett antal funktioner och alternativ som ett vanligt floatbaserat rutnät inte kan hantera. Å andra sidan är det antagligen inte lika bra, särskilt av IE. Det är en avvägning.
Ett par snygga förbättringar ingick för typografi i webbstil. Specifikt finns det hjälpklasser som är utformade för att göra typografiska layouter bara lite enklare att hantera:
Som nämnts ovan slogs alla tidigare navigeringskomponenter samman i en stor flexibel komponent. Det betyder att alla navigeringsformer kommer att spela bra med varandra. Det betyder också att du kan välja olika typer av navigering för olika skärmstorlekar.
Vill du ha ner navigering på en smart telefon och en horisontell stapel på ett skrivbord? Lätt gjort med de skärmstorleksspecifika klasserna. Vill du ha din "Top bar" tillbaka? Lägg bara till en wrapper div runt standard meny komponenter.
Men även om det är enklare att använda överallt, är det fortfarande laddat med funktioner. Var noga med att kolla in dokumentationen om menyer och navigering .
Du känner till de små cirklarna eller rutorna - vanligtvis placerade på eller nära ikoner av något slag - med små siffror i dem? Gilla när du har Facebook-meddelanden? De kallas märken.
Du lär dig något nytt varje dag. Stiftelsen har också dem nu.
Behöver du göra något kvar på skärmen medan användaren rullar? Vill du stoppa det vid en viss punkt? Sticky är din plugin! Det här är också det som ska användas om du vill göra Magellan-menyn så som det gjorde i Foundation 5.
Om dropdowns, dragspel, drilldowns, tooltips och modals inte räcker för dig, är det här ett generiskt sätt att få saker att dyka upp eller försvinna. Det är en enkel JavaScript-baserad växelhändelse som kan tillämpas på i stort sett allting.
Jag antar att det är för de tillfällen då ingen av de andra komponenterna passar ändamålet, eller skulle vara överkill. Den integrerar Motion UI-biblioteket, så att du kan animera den försvinnande ageran, precis som du vill.
Tja, namnet låter som det är ett element där du kan bädda in en video eller Flash-objekt (yuck), och du kan göra det som jag antar. Vad det egentligen är meningen med är att visa något medieobjekt, till exempel en bild, tillsammans med textinformation.
Till exempel kan du sätta en användares avatar bredvid användarnamnet och deras kommentar i en kommentar sektion. Eller du kan använda den för att placera en filmens utgivningsdatum, huvudaktörer och andra metadata bredvid en recension av filmen. Kontrollera dokumentationen till exempel.
Varje funktion har uppdaterats eller omskrivits. Men många är funktionellt oförändrade. Dubbelkontrollera dokumentationen så att du har rätt klasser, kolla in några av uppgraderingarna och gå. Här är dessa mer eller mindre samma funktioner, i alfabetisk ordning:
Japp. Det förnyade fokuset på byggarbetsplatser (i motsats till ett ramverk som försöker möta behoven hos både webbplatser och appar) är uppfriskande och minskad storlek är alltid ett plus.
Ser fram emot att det går väldigt mycket snart.