Foundation 6 - 10 fantastiska nya funktioner

Utvecklare av Foundation-fronten-ramen har inte bara satt på sina laureller medan Bootstrap-teamet har arbetat med sin imponerande nya stora release. Förra året gick de på en fantastisk världsturné för att dela sin kunskap med sina användare och fråga dem om hur de använde stiftelsen i sitt verkliga arbete.

Efter att ha återvänt till sina skrivbord, aggregerade de användarnas behov och önskemål och inledde planeringen av den nya stora versionen av ramverket: Stiftelse 6.

Det är fortfarande under utveckling, men planerna är mycket lovande. De kommande funktionerna fokuserar på tre huvudområden: prestanda, anpassningsbarhet och tillgänglighet. Låt oss ta en titt på 10 av dessa funktioner nu.

1. Strömlinjigt arbetsflöde

Baserat på användarnas erfarenheter utvecklade stiftelsen laget en ny slogan, nämligen “Prototyp till produktion”, för Foundation 6. Det innebär ett nytt, strömlinjeformat arbetsflöde som gör det möjligt för designers och utvecklare att gå rakt från prototyp till produktion.

Målet med den nya stiftelsen 6 är att tillhandahålla en flexibel och lätt anpassningsbar ram som gör det möjligt att skriv ren och semantisk kod från början. Den nuvarande versionen, Foundation 5 möjliggör också snabb prototyper, men vi kan Förvänta dig ytterligare arbetsflödesoptimering i den kommande utgåvan.

2. Förenklad installationsprocess för Sass-versionen

En av de mest fantastiska sakerna om stiftelsens ramverk är att den är byggd med Sass-stilarket, så det är möjligt att snabbt anpassa standard stil regler till våra faktiska behov.

Sass installationsprocessen har dock varit lite skrämmande för många användare, så den nya stora versionen kommer att bli få en förenklad installationsprocess för Sass-versionen. Det betyder att Sass-inställningen kommer att kräver mycket färre beroende än tidigare. Självklart, om du föredrar vanilj CSS-versionen, kan du fortfarande välja det.

3. En ny, soppad upp installationsstack för maximalister

Förutom den vanliga Sass-versionen kommer Stiftelsen 6 med en soppa upp Sass-versionen som ger utvecklare kraftfulla anpassningsalternativ.

ZURB, skaparen av stiftelsen kommer att öppna sin egen utvecklingsstack för allmänheten, inklusive sina egna statisk platsgenerator, live-reload-server och massor av inre optimeringstekniker inklusive integrationen av UnCSS för att ta bort oanvända format och UglifyJS för JavaScript-komprimering.

Så i grunden kommer vi att kunna arbeta i samma utvecklingsmiljö som ZURB internt använder.

4. Minskad sidladdningstid

Stiftelsen laget var tvungen att möta en konstruktiv kritik som hävdade att 90% av CSS-koden i de flesta stiftingsprojekt saknas. Detta var inte bara sant för Foundation, utan också för andra stora CSS-ramar som Bootstrap och TopCoat. Som en del av deras svar beslutade Zurb att avsevärt minska filstorleken för den utmatade CSS genom att implementera en ungefär 40-50% kodreduktion.

Det är intressant att notera att de försöker skilja sig från Bootstrap genom att ange "Stiftelsen är inte en ram som kommer att ha stilistiska klasser marginal och vaddering eller runda och radie". (För referens se Bootstrap 4: s nya Utility Classes i vårt tidigare inlägg).

5. Basstilar som fungerar som trådramar

Den andra delen av prestationsförbättringsinsatsen är att skapa en basstil som fungerar som en wireframe istället för en slutlig design. Detta leder främst till ett lättare tema, men har också en annan stor fördel. Eftersom fler stilregler kommer att flyttas till enskilda komponenter, kommer utvecklare att ha chansen att lättare utforma sin design.

Förhoppningsvis betyder det att webbplatser baserade på Foundation kommer att har mindre av ett liknande, standardiserat utseende, och designers kommer att ha mer utrymme att experiment med vacker och unik solutjoner som kommer att motbevisa de senaste bekymmerna om en tråkig webb.

6. Underlättad selektiv import

Stiftelsen 5 tillåter utvecklare att bara välja vilka komponenter de vill använda. Stiftelsen 6 kommer att ta denna strävan till nästa nivå med Flytta den selektiva importfunktionen till _settings.scss Sass-filen.

På så sätt _settings.scss blir en verkligen universell konfigurationsfil, eftersom vi inte bara kan anpassa funktioner som radbredd eller standardfonter med hjälp, men också enkelt väljer ut de komponenter vi inte behöver. Om vi ​​gör det kan vi uppnå ytterligare prestandaförbättringar.

7. Leaner och Cleaner Sass

I redesignprocessen omprövade stiftelsens lag alla aspekter av ramverket, så de också ändrade sättet hur de har använt Sass-stilarket. De fann att de i vissa fall har utnyttjat Sass som leder till onödig överkomplicering av CSS-utgången. Med målet om en smalare och renare kodbas i deras sinne har de också rationaliserat sin Sass-struktur.

I Stiftelse 6 kan vi Förvänta minskad nestning och specificitet, strömlinjeformade mediafrågor (de slog samman repeterande kod), och skalade bakre komponentblandningar. Det senare innebär att det kommer att finnas mindre komponentblandningar, och de återstående kommer att ha färre parametrar, vilket leder till en enklare och mer logisk kod

Om du älskar mixins, oroa dig inte, alla komponenter kommer fortfarande att ha dem, det är bara att de kommer att omkonstrueras för att vara mer effektiva och användbara än de för närvarande är.

8. Förbättrade gallerblandningar

Medan du klipper tillbaka komponentblandningar kommer Stiftelse 6 med förbättrade galler mixins som tillåter oss att skapa ett mer anpassat rutnät.

Zurb lovar att vi kommer att kunna enkelt bygga som komplicerat rutsystem som vi vill ha, inklusive mer sofistikerade anpassade rader och nested grids, och förmågan att konvertera standardklassen till semantisk markup. De förbättrade gallerblandningarna kommer att göra strömmen nätverksskapande ännu mer intuitivt, flexibelt och snabbare.

9. Sömlös integrering av anpassade JavaScript-plugins

Stiftelsen 5 har för närvarande många JavaScript-komponenter som coola modala dialoger, verktygstips, klibbig navigeringsfält, ljuslådor och många andra som en modern webbplats behöver, men den kommande stora versionen kommer att göra det möjligt för oss att skriv våra anpassade JavaScript-plugins utnyttja grundkärnan. Det är ett stort framsteg i båda användarvänlighet och prestanda.

I framtiden kommer vi att kunna få tillgång till de inbyggda initialiseringsmetoderna, växelverkare och brytpunkter, och utnyttja alla andra funktioner i Foundations globala JavaScript.

10. Full tillgänglighet

Förmodligen den mest fantastiska funktionen i den nya stiftelsen 6 är att den kommer att vara fullt tillgänglig. Varje komponent och kodbit kommer att ha de lämpliga WAI-ARIA-attributen och landmärkesrollerna. Dessutom kommer utvecklare även att vara försedd med en användarhandledning handla om hur man använder a11y webbstandarder.

Så om vi vill ge vår klient en helt tillgänglig hemsida behöver vi inte göra något annat än att bygga vår design med Foundation 6. Observera att vi fortfarande kommer att behöva Lägg till lämpliga ARIA-regler på våra HTML-sidor på egen hand, även om Zurs kommande användarguide säkert kommer att underlätta lärandeprocessen.