Share
De Yeti is terug! Foundation 6 is vandaag uitgebracht en we zijn allemaal dood enthousiast over de nieuwe ontwerpethiek, functies en krachtige tools die deze incarnatie van ZURB's populaire raamwerk ons brengt! Er is zelfs een speciaal "iets" extra bij deze uitgave, dus duik in dit artikel om het volledige overzicht te krijgen.
Foundation 6 is niet alleen een visuele iteratie, code-herstructurering of een eenvoudige wijziging in versienummer. Het team van ZURB ging hier voor zitten helemaal het kader opnieuw bekijken en kijken wat er moet gebeuren om het nog indrukwekkender te maken. Stichting 6 gaat over het hele proces; van prototype tot productie.
Van prototype tot productie gaan is nu een koud kunstje!Enkele van de belangrijkste doelen van het ontwikkelingsteam waren:
"Voor Foundation 6 hebben we de bestandsgrootte van het volledige CSS-bestand gehalveerd, door ons gebruik van Sass agressief te optimaliseren en componenten eenvoudiger qua structuur en stijl te maken."
- Geoff Kimball Product Designer, ZURB
Dus hoe hadden deze doelen invloed op ons favoriete raamwerk voor het bouwen van geweldige websites? Laten wij het uitzoeken! We zullen eerst enkele van de hoofdkenmerken van Foundation 6 bespreken en vervolgens dieper ingaan op de CSS / Sass en de JavaScript in meer detail.
Het instellingsproces van de Sass-versie van Foundation 6 is verbeterd, zodat u uw projecten sneller van de grond kunt krijgen. Er zijn veel minder afhankelijkheden en fouten worden veel slimmer afgehandeld, zodat u minder problemen heeft bij het uitzoeken van de betreffende fout.
Een andere leuke extra is dat ZURB een opgevoerde stapel biedt, compleet met hun eigen statische site-generator, live-reload-server en tal van manieren om je code beter te optimaliseren met UNCSS en UglifyJS. Het is dezelfde stack die de jongens bij ZURB gebruiken voor hun eigen projecten (later meer hierover!).
"Foundation for Sites 6 the Movie" komende 2018. Mogelijk.Er is veel bezorgdheid geweest over code die wordt gebruikt door frameworks (zoals Bootstrap en Foundation) die ongebruikt blijven in een project. Zelfs maar liefst 90% van de CSS-code is ongebruikt, wat echt onnodig is en een probleem voor de prestaties. Met dit in gedachten heeft Foundation 6 maar liefst 50% kortingscode om mee te beginnen!
De Yeti werkte goed en het loonde!ZURB benaderde dit probleem tweevoudig met Foundation 6, door vanaf het begin minder stijlen toe te passen en je de tools te geven om de bestanden ook te strippen. Nu kunt u gemakkelijker uw eigen stijlen toevoegen voor de productieversie van uw project. De stijlen Foundation 6 doet aanbieding kan eenvoudig worden bijgewerkt met variabelen via Sass.
Ook zijn veel van de presentatieklassen verwijderd, zodat de gegenereerde CSS schoon blijft. Deze versie van Foundation heeft geen stilistische klassen zoals marges, paddings en rond en straal. Via het vertrouwde _settings.scss bestand is het nu nog eenvoudiger geworden om selectief uw modules te importeren. Door een selectief commentaar te geven op de componenten die u niet gebruikt, kunt u gemakkelijk veel ongebruikte CSS-code verwijderen.
Dus met een lichter bestand van start, minder stilistische klassen en meer controle over wat u moet opnemen en wat niet, bent u nu klaar om uw prototype in productievoorberechte en lichte code te plaatsen.
De bijgewerkte documentatie die bij Stichting 6 wordt geleverd, samen met een door AJAX aangedreven zoekformulier, maakt het gemakkelijk voor u om snel iets te vinden:
Het zoekformulier geeft u suggesties terwijl u typt.Typ gewoon het onderdeel of onderwerp dat u zoekt en het zoekformulier krijgt u de relevante onderwerpen. Het is een leuke extraatje dat duiken in de documentatie een aangename ervaring maakt.
De Top Bar zelf heeft ook een grote update gezien. In eerdere versies was het geweldig waar het voor bedoeld was, maar het was een beetje inflexibel. Niet meer! Stichting 6 introduceert componenten voor de bovenste balk om het flexibeler en gemakkelijker voor u te maken om bepaalde elementen voor verschillende apparaten toe te voegen en te verwijderen, zoals:
In Stichting 6 heeft ZURB een flexibeler mixin-rooster gemaakt waarmee je het aantal kolommen op een rij kunt bepalen. Je zou zoiets als dit kunnen doen:
.container // we definiëren deze klasse om 16 kolommen te gebruiken @ include grid-row (16) .sidebar // 5/16 = 31.25% @ include grid-column (5); .main-content // 11/16 = 68.75% @ include grid-column (11);
Of iets zoals dit:
.zijbalk // dit zorgt ervoor dat .sidebar 2 kolommen van een 5 kolommenraster @ opneemt; raster-kolom (2 van 5); .main-content // dit maakt .main-content omvat 3 kolommen van een 5 kolomraster @include: grid-column (3 van 5);
Maak uw eigen kolomtelling voor een specifiek element of maak een rij met vijf kolommen zonder het aantal kolommen voor het hele project te wijzigen. Deze nieuwe functie geeft u meer gedetailleerde controle over het raster, zodat u uw lay-out beter kunt afstemmen op uw inhoud.
Foundation 6 heeft de Orbit-schuifknop teruggebracht, maar met een andere benadering deze keer: het is ontworpen als een wireframing-tool. Deze versie bevat slechts een beetje HTML en een beetje JavaScript. De code om deze aan te passen, wordt gedaan binnen de paginamarkering en is veel eenvoudiger uit te voeren.
Leuk je oude vriend terug te hebben!Wanneer u in uw productiefase naar een schuifregelaar zoekt, raadt het team van ZURB u aan om bijvoorbeeld een schuifregelaar zoals de schuifregelaar Uil te gebruiken. Zoals eerder vermeld, is de schuifregelaar Orbit uitsluitend bedoeld als hulpmiddel voor draadframes.
In het werken met hun eigen klanten heeft ZURB een aangepaste sjabloon gemaakt om projecten te leveren. Inclusief stuur en gebouwd op Libsass, dit is de opgevoerde stapel die we eerder hebben aangeraakt. U kunt het gebruiken en uw eigen workflow optimaliseren, en het heet Panini:
Een vooraf gemaakte blauwdruk, klaar voor gebruik voor uw volgende project Dit door Gulp aangedreven buildsysteem doet veel:
De sjabloon kan ook productie-ready-code creëren, met toevoeging van deze extra stappen:
Stuursjablonen en helpers maken het schrijven van dynamische code voor statische pagina's een fluitje van een cent!
Nieuw in Foundation 6 is een Flexbox-aangedreven raster, dat u kunt gebruiken in plaats van het traditionele drijfnet. Het werkt op dezelfde manier als het standaard vlotterrooster, maar bevat een aantal nuttige functies die alleen mogelijk zijn met Flexbox, zoals horizontale en verticale uitlijning, automatische dimensionering en eenvoudigere bronbestelling. We kennen het Flexbox-raster van Foundation for Apps en het is geweldig om te zien dat we het nu ook kunnen gebruiken in Foundation for Sites!
Motion UI is een animatiebibliotheek en werd oorspronkelijk gebouwd en gebruikt in Foundation for Apps. Nu kunt u het gelukkig ook gebruiken voor het maken van aangepaste CSS-overgangen en -animaties in Foundation for Sites!
Voeg alle verschillende soorten overgangen en animaties toe aan uw Foundation-projecten!Deze bijgewerkte versie bevat meer robuuste overgangsopties, een wachtrijsysteem voor animaties en flexibele CSS-patronen die met elke JavaScript-animatiebibliotheek kunnen werken.
Het aanpassen van de verschillende overgangen en animaties is een knoeien met de Sass-mixins die bij deze versie van Motion UI horen. Motion UI bevat ook een groot aantal vooraf gemaakte CSS-klassen om uw prototypen snel op te zetten.
De bibliotheek is ontworpen voor gebruik met de Foundation-kaders, maar kan worden aangepast om te werken met de animatiebibliotheek van elk framework, zoals Angular of React.
Zoals eerder vermeld, was het grote doel met Foundation 6 om het gemakkelijker te gebruiken en gemakkelijker voor u te maken om het framework te overschrijven met uw eigen productiegereed code. Laten we eens kijken naar enkele van de coole functies die Stichting 6 ons biedt met betrekking tot CSS en Sass.
Maak gemakkelijker uw eigen stijlgidsen in de nieuwste FoundationIn Foundation 5 kon je de breekpunten wijzigen, maar het was niet helemaal duidelijk waar je ze kon vinden en hoe je het moest aanpakken. Niet meer. Foundation 6 biedt u één overzicht (een breekpuntkaart) waarin u eenvoudig breekpunten van het project kunt aanpassen, toevoegen en verwijderen.
Tip: probeer zoveel mogelijk bij de standaard breekpunten te blijven; de bestandsgrootte neemt toe met extra onderbrekingspunten.
Voorbeeld van de breakpoints-kaart met behulp van de nieuwe Sass Maps-functieMet Foundation 5 moest u stringinterpolatie uitvoeren om mediaquery's in uw Sass-bestanden te gebruiken. Omdat dit niet altijd duidelijk was en mensen vaak de documentatie moesten bezoeken om de juiste code te kopiëren en plakken, bedacht het team van ZURB dat dit gemakkelijker kon. Dus nu, in plaats van de tekenreeksinterpolatie, kunt u verschillende gebruiken @includes om verschillende breekpunten op te nemen. Gebruik makend van medium is bijvoorbeeld voor breekpunten medium en hoger, alleen medium voor, nou ja, alleen medium, en gemiddeld naar beneden voor gemiddeld, klein etc. Je kunt zelfs je eigen pixel opnemen, em van rem-breekpunten en retina, landschap en portret gebruiken.
"We wilden leren hoe mensen feitelijk Foundation gebruikten, dus reisden we de wereld over en stapten op 100's van oproepen om daadwerkelijk te kijken hoe de community het Framework gebruikte en besprak wat ze nodig hadden."
- Brandon Arnold Foundation Lead, ZURB
Het JavaScript heeft ook een grote revisie ondergaan. Een manier om de hoeveelheid code in de JavaScript-plug-ins van Foundation 6 te verminderen, was ze op te splitsen in kleinere hulpprogramma's die gebeurtenissen op grotere plug-ins afhandelen. En door deze hulpprogramma's openbaar toegankelijk te maken, kunt u ze nu gebruiken om uw eigen plug-ins te bouwen! Dus, welke plug-ins kunnen we vinden in Stichting 6? Laten wij het uitzoeken:
Plug-in en speel met Foundations nieuwe helper plug-ins.Foundation 6 bevat een nieuwe API voor toggler, zodat mensen snel en eenvoudig hun sites dynamischer kunnen maken en staten kunnen weergeven. Toggler maakt het wisselen van elementen en het toevoegen van klassen een eitje. Het is geweldig om snel te bouwen en vereist geen JavaScript-kennis.
Schakel klassen in met een data-attribuut. Bijvoorbeeld:
Uitbreiden!
Dit is een openbare functie voor het bepalen van botsingen met de rand van een container. Deze randdetectie houdt tooltips, vervolgkeuzemenu's en meer in de viewport of container van uw keuze.
Een generator voor willekeurige getallen. U kunt dit gebruiken voor het toevoegen van A11Y "aria" -attributen waarvoor bijvoorbeeld ID's nodig zijn.
Dit is een functie om een gebeurtenislistener toe te voegen venster indien toegepast, een niet-borrelende gebeurtenis afvuren op individuele plug-inelementen met de [Data-yeti-box = 'idOfElement'] sluiten. Als een ander element van hetzelfde type plug-in opent, dat wil zeggen als Tooltip B wordt geopend en Tooltip A is momenteel geopend, sluit u Knopinfo A voordat u B opent.
Hier krijgen we een openbare functie om een toe te voegen onscroll gebeurtenis luisteraar venster. De opmaak is als volgt: [Data-scroll = 'idOfElement']
Een functie om een toe te voegen verkleinen gebeurtenis luisteraar venster.
ik heb dit gemaakt!Bijna al het JavaScript is gebouwd met afzonderlijke hulpprogramma's die algemene functies zoals de bovenstaande voorbeelden verwerken. Hierdoor kunnen de plug-ins kleiner worden en met deze kunt u nu eenvoudig uw plug-ins maken!
Als een extraatje heeft ZURB ook een geheel nieuwe Desktop Companion-app uitgebracht! Hiermee kun je projecten laten draaien met slechts één muisklik. Ga sneller dan ooit tevoren met: Yeti Launch. Leuk!
Projecten draaien met een enkele muisklik!Foundation for Sites 6 heeft een hele grote revisie ondergaan, een weerspiegeling van de manier waarop ZURB zijn eigen toegankelijke websites heeft gebouwd. Door hun kennis en ervaring te delen, kunnen andere ontwikkelaars en ontwerpers gemakkelijk prototypen en snel aan de slag.
De snelste yeti ooitKortom, wat krijgen we met Foundation 6?
Meer dan 125 thema's op Envato Market zijn compatibel met Stichting 5 - bent u de eerste die iets verkoopt dat is gebouwd op Stichting 6??!
Accentsconagua