Share
Yeti är tillbaka! Stiftelsen 6 släpptes idag, och vi är alla döda glada över den nya designetiken, funktioner och kraftfulla verktyg som denna inkarnation av ZURBs populära ramverk ger oss! Det finns även en speciell "något" extra med den här utgåvan, så dyka in i den här artikeln för att få den fullständiga nedräkning.
Stiftelse 6 är inte bara en visuell iteration, kodomstrukturering eller en enkel ändring av versionsnummer. Teamet på ZURB satte sig för detta till fullständigt ompröva ramverket och se vad som behövs för att göra det mer grymt. Stiftelse 6 handlar om hela processen; från prototyp till produktion.
Att gå från prototyp till produktion är nu en bris!Några av de viktigaste målen som utvecklingsgruppen hade var:
"För Foundation 6 har vi klippt filstorleken för hela CSS-filen med hälften genom att aggressivt optimera vår användning av Sass och göra komponenter enklare i struktur och stil."
- Geoff Kimball Produkt Designer, ZURB
Så hur har dessa mål påverkat vår favoritram för att bygga fantastiska webbplatser? Låt oss ta reda på! Vi går först över några av de viktigaste funktionerna i Foundation 6 och dyker sedan in i CSS / Sass och JavaScript i mer detalj.
Installationsprocessen för Sass-versionen av Foundation 6 har förbättrats så att du kan få dina projekt från marken snabbare. Det finns mycket färre beroenden och fel hanteras mycket intelligentare så att du får mindre problem att räkna ut felet i fråga.
En annan trevlig extra är att ZURB erbjuder en soppad stapel komplett med sin egen statiska webbplatsgenerator, live-reload-server och många sätt att bättre optimera din kod med UNCSS och UglifyJS. Det är samma stack som killarna på ZURB använder för sina egna projekt (mer om detta senare!).
"Foundation for Sites 6 the Movie" kommer 2018. Eventuellt.Det har varit mycket oro för kod som används av ramverk (till exempel Bootstrap och Foundation) som går oanvänd i ett projekt. Även så mycket som 90% av CSS-koden går oanvänd, vilket verkligen är onödigt och ett problem för prestanda. Med detta i åtanke har Foundation 6 en jättestor 50% kodreduktion för att börja med!
Yeti tränade och det betalt av!ZURB närmade sig detta problem två gånger med Foundation 6, genom att använda färre stilar från början, och ger dig verktygen för att ta bort filerna också. Nu kan du lättare lägga till egna stilar för produktionsversionen av ditt projekt. Stilen Foundation 6 gör erbjudandet kan enkelt uppdateras med variabler via Sass.
Också många presentationsklasser har tagits bort så att den genererade CSSen stannar ren. Denna version av Stiftelsen har inte stilistiska klasser som marginaler, paddningar och runda och radie. Genom den bekanta _settings.scss filen har det nu gjorts ännu enklare att importera dina moduler selektivt. Genom att selektivt kommentera de komponenter du inte använder kommer du enkelt att ta bort mycket oanvänd CSS-kod.
Så, med en lättare fil från hämtningen, färre stilistiska klasser och mer kontroll över vad som ska inkluderas och vad inte, är du nu redo att flytta din prototyp till produktionsklar och lätt kod.
Den uppdaterade dokumentationen som följer med Foundation 6, tillsammans med ett AJAX-driven sökformulär, gör det enkelt för dig att snabbt hitta något:
Sökformuläret ger dig förslag när du skriver.Skriv bara in komponenten eller ämnet du letar efter och sökformuläret ger dig relevanta ämnen. Det är en fin liten extra som gör dykning i dokumentationen en trevlig upplevelse.
Top Bar själv har också sett en stor uppdatering. I tidigare versioner var det bra på vad det var tänkt för, men det var lite oflexibelt. Inte längre! Stiftelsen 6 introducerar komponenter för Top Bar för att göra det mer flexibelt och enkelt för dig att lägga till och ta bort vissa element för olika enheter som:
I Foundation 6 har ZURB skapat ett mer flexibelt mixin-nät som låter dig styra kolumnräkningen i rad. Du kan göra något så här:
.container // vi definierar denna klass för att använda 16 kolumner @ include grid-row (16) .sidebar // 5/16 = 31,25% @include grid-column (5); .Main-innehåll // 11/16 = 68,75% @include grid-column (11);
Eller något så här:
.sidobar // det här kommer att göra .sidebar ta upp 2 kolumner i ett 5 kolumngrid @ inkludera rutnät-kolumnen (2 av 5); .main-innehåll // det här gör att .main-innehåll tar upp 3 kolumner i ett 5 kolumngrid @ inkludera: rutnät-kolumn (3 av 5);
Gör din egen kolumnräkning för ett visst element, eller gör en fem kolumnraden utan att ändra kolumnräkningen för hela projektet. Den här nya funktionen ger dig mer granulär kontroll över gallret så att du kan göra din layout bättre anpassad till ditt innehåll.
Stiftelsen 6 har tagit tillbaka Orbit-reglaget, men med ett annat tillvägagångssätt den här gången: den är konstruerad för att vara ett trådverktyg. Den här versionen omfattar bara lite HTML och lite JavaScript. Koden för att anpassa den kommer att göras inuti sidmarkeringen och är mycket lättare att utföra.
Glad att få dig tillbaka gammal vän!När du letar efter en skjutreglage i din produktionsfas rekommenderar laget på ZURB att du använder en skjutreglage som till exempel Owl-reglaget. Som nämnts är Orbit-reglaget rent menat som ett trådframverktyg.
I arbetet med sina egna kunder har ZURB byggt en anpassad mall för att leverera projekt. Inklusive Handlebars och byggt på Libsass, är det den soppa upp stacken vi berörde tidigare. Det är här för dig att använda och optimera ditt eget arbetsflöde, och det går under namnet Panini:
En förberedd ritning, redo för dig att använda på ditt nästa projekt Detta Gulp-powered byggsystem gör mycket:
Mallen kan också skapa produktionsklar kod och lägger till i dessa extra steg:
Handlebars mallar och hjälpare gör att skriva dynamisk kod för statiska sidor en bris!
Nytt i Foundation 6 är ett Flexbox powered Grid, som du kan använda istället för det traditionella float-nätet. Den fungerar på samma sätt som standardflödet, men innehåller ett antal användbara funktioner som endast är möjliga med Flexbox, som horisontell och vertikal justering, automatisk limning och enklare källbeställning. Vi känner till Flexbox Grid från Foundation for Apps och det är grymt att se att vi nu kan använda det i Foundation for Sites också!
Motion UI är ett animationsbibliotek och var ursprungligen byggt och används i Foundation for Apps. Nu, lyckligtvis kan du använda den för att skapa anpassade CSS-övergångar och animeringar i Foundation for Sites också!
Lägg till alla olika typer av övergångar och animeringar till dina Foundation-projekt!Den här uppdaterade versionen innehåller mer robusta övergångsalternativ, ett animationssystem och flexibla CSS-mönster som kan fungera med alla Javascript-animeringsbibliotek.
Justera de olika övergångarna och animationerna handlar om att manipulera med Sass mixins som följer med den här versionen av Motion UI. Motion UI innehåller också ett stort antal färdiga CSS-klasser för att snabbt få dina prototyper.
Biblioteket var konstruerat för användning med stiftelsens ramverk, men kan anpassas för att fungera med något ramverks animationsbibliotek, som Angular or React.
Som nämnts var det stora målet med Stiftelse 6 att göra det enklare att använda och lättare för dig att skriva över ramverket med din egen produktionskod. Låt oss ta en titt på några av de coola funktionerna Foundation 6 ger oss om CSS och Sass.
Skapa dina egna stilguider lättare i den nyaste stiftelsenI Stiftelse 5 kan du ändra brytpunkterna, men det var inte helt uppenbart var man skulle hitta dem och hur man skulle gå till det. Inte längre. Stiftelsen 6 erbjuder dig en översikt (en punktbrytningskarta) där du enkelt kan justera, lägga till och ta bort brytpunkter från projektet.
Tips: försök att stanna med standard brytpunkter så mycket som möjligt; Filstorleken ökar med ytterligare brytpunkter.
Exempel på breakpoints-kartan med den nya Sass Maps-funktionenMed Foundation 5 var du tvungen att utföra stränginterpolering för att använda mediafrågor i dina Sass-filer. Eftersom det inte var riktigt klart hela tiden, och folk skulle ofta behöva besöka dokumentationen för att kopiera och klistra in rätt kod, kunde laget vid ZURB det här bli lättare. Så nu, istället för stränginterpolationen, kan du använda olika @includes att inkludera olika brytpunkter. Använder sig av medium till exempel är för brytpunkter mellan och uppe, endast medium för, ja, endast medellång, och medium ner för medelstora, små osv. Du kan till och med inkludera din egen pixel, av rembrytningspunkter och använda näthinnor, landskap och porträtt.
"Vi ville lära oss hur människor faktiskt använde Foundation, så vi reste runt om i världen och hoppade på 100-talet av samtal för att faktiskt se hur samhället använde ramverket och diskuterade vad de behövde från den. Det var fantastiskt!"
- Brandon Arnold Foundation Lead, ZURB
JavaScript har också haft en stor översyn. Ett sätt att minska mängden kod i JavaScript-pluggarna till Foundation 6 var att skilja dem ut i mindre verktyg som hanterar händelser på större plugins. Och genom att göra dessa verktyg offentligt tillgängliga kan du nu använda dem för att bygga dina egna plugins! Så, vilka plugins kan vi hitta i Foundation 6? Låt oss ta reda på:
Plug and play med Foundations nya hjälpar plugins.Stiftelsen 6 innehåller ett nytt byggler API så att människor snabbt och enkelt kan göra sina webbplatser mer dynamiska och visa tillstånd. Toggler gör växlande element och lägger klasser en bris. Det är bra att bygga snabbt och behöver ingen JavaScript-kunskap.
Växla klasser med ett datatribut. Till exempel:
Bygga ut!
Detta är en offentlig funktion för att bestämma kollisioner med en behållarens kant. Denna kantdetektering kommer att behålla verktygstips, dropdowns och mer i visningsporten eller behållaren enligt ditt val.
En slumptalsgenerator. Du kan använda det här för att lägga till attributen A11Y "aria" som kräver ID, till exempel.
Det här är en funktion för att lägga till en händelse lyssnare till fönster om det appliceras, skjuter en icke-bubblande händelse till enskilda pluginelement med [Uppgifter-yeti-box = 'idOfElement'] för nära. Om ett annat element av samma plugin-typ öppnas, d.v.s. om verktygetips B öppnas och verktygetips A är öppet stänger du Tooltip A innan du öppnar B.
Här får vi en allmän funktion för att lägga till en onscroll händelse lyssnare till fönster. Markeringen är som följer: [Data scroll = 'idOfElement']
En funktion för att lägga till en ändra storlek händelse lyssnare till fönster.
jag gjorde detta!Nästan alla JavaScript har byggts med separata verktyg som hanterar gemensamma funktioner som exemplen ovan. Detta gör att pluginsna blir mindre, och med dem kan du nu enkelt skapa din egen!
Som en liten extra har ZURB också släppt en helt ny Desktop Companion App! Med det kan du snurra upp projekt med bara ett enda musklick. Kom igång snabbare än någonsin tidigare med: Yeti Launch. Trevlig!
Snurra upp projekt med ett enda musklick!Foundation for Sites 6 har sett en riktigt stor översyn som speglar hur ZURB bygger sina egna tillgängliga webbplatser. Att dela med sig av sina kunskaper och erfarenheter gör det enkelt för andra utvecklare och designers att prototyper och snabbt komma till produktionen.
Den snabbaste yeti änSammanfattningsvis, vad får vi med Foundation 6?
Över 125 teman på Envato Market är kompatibla med Foundation 5-kommer du att vara första att sälja något byggt på Foundation 6?!
Accentsconagua