Een voorproefje van de volgende stichting voor apps

ZURB werkt altijd aan de volgende grote tool om zowel webontwerpers als ontwikkelaars te helpen. Ze maken onze programmeerdagen een beetje eenvoudiger en veel leuker. Het kader van de Foundation is misschien wel het meest bekend en binnenkort komt er een nieuw lid bij het gezin: Foundation for Apps.

Met een geplande release van dinsdag 2 december is het nu een goed moment om te zien wat Foundation for Apps te bieden heeft, wat de belangrijkste functies zijn en wat we in de nabije toekomst kunnen verwachten. Onlangs kreeg ik de gelegenheid om te chatten met Brandon Arnold, hoofdontwerp en Geoff Kimball, productontwerper bij ZURB. Ze lieten me uit de eerste hand enkele van de krachtige functies zien en vandaag laat ik je zien wat je ermee kunt doen.

Kenmerken

Het belangrijkste doel van Foundation for Apps is het bieden van een middel om snel complexe web-apps en een framework voor het bouwen van die web-apps te prototypen. Om dat allemaal mogelijk te maken, wordt het geleverd met een aantal uiterst handige functies, met name:

1. Motion UI

Het nieuwe tijdperk van plat ontwerp heeft in veel opzichten iets weggenomen van onze interfaces: hiërarchie en structuur vanwege het gebrek aan gradiënten, skeuomorfe elementen, schaduwen en diepte. Foundation for Apps pakt dit probleem aan met behulp van een rijke Motion UI-bibliotheek met tal van animaties en overgangen die u kunt gebruiken. U hoeft niet met Sass of JavaScript te rommelen, omdat ZURB het zware werk voor u heeft gedaan. 

Dit is wat we kunnen verwachten:

animaties: Met CSS-hoofdframe-animaties kunt u subtiele bewegingen en effecten toevoegen aan uw app. Dit geeft gebruikers feedback over hoe uw app is gestructureerd en hoe deze ermee moet omgaan. Details zoals deze zijn geweldig om extra aandacht te geven aan een melding, een fout of een oproep tot actie.

Transitions: Overgangen kunnen worden gebruikt voor allerlei soorten dingen, van het soepel verplaatsen van een object van de ene positie naar de andere, tot het vervangen van inhoud en het tonen van nieuwe inhoud, zoals navigatie en drop-downs buiten het canvas.

Motion Modifiers: Deze worden gebruikt om de richting, snelheid, iteratie, het gemak en de vertraging van uw objecten te beïnvloeden. Samen met animaties heb je enorme mogelijkheden om een ​​vlotte gebruikerservaring te creëren.

Gecombineerd zorgen al deze componenten voor een meeslepende en levendige ervaring voor uw gebruikers, allemaal met het gemak van vooraf gedefinieerde klassen. Ze zullen u veel werk besparen en dat prototype binnen de kortste keren operationeel krijgen.

2. Flexbox-raster

Foundation for Apps zal CSS Flexbox gebruiken om zijn Grid te definiëren. Flexbox biedt een manier om uw elementen in HTML te bestellen, ongeacht de opmaak. U kunt uw inhoud letterlijk overal neerzetten, van boven naar beneden, van links naar rechts, midden en midden. Het gebruik van Flexbox biedt verschillende voordelen:

• Er is geen behoefte meer aan vaste positionering, die vaak onbetrouwbaar kan zijn op mobiele apparaten.
• Ongeacht de markeringen kunt u uw inhoud plaatsen waar u maar wilt.
• In plaats van alleen uw inhoud verticaal te stapelen, kunt u een webpagina-app op een volledige pagina maken met afzonderlijke schuifsecties wanneer er meer inhoud nodig is.
• Het is niet nodig om drijvers te wissen.
• U kunt binnen enkele minuten een complexe webapp-lay-out maken.

Een andere syntaxisvereist voor het raster, omdat rijen en kolommen geen zin hebben als u verticaal scrolt met verschillende inhoudssecties in uw lay-out. Dit is wat u gaat gebruiken om uw eigen webapp-lay-out te maken:

• groepen: Groepen worden gebruikt als opmaakobjecten die meer groepen of blokken kunnen bevatten. Ze lijken enigszins op rijen in Foundation 5.
• Blocks: Deze bevatten alleen inhoud. U zult ze niet gebruiken voor uw lay-out, maar in plaats daarvan bevatten ze andere elementen en componenten. Stel je voor dat ze zijn zoals de kolommen in Stichting 5.
• frames: Met frames kunt u het scherm in secties verdelen, omdat frames 100% breedte en hoogte van het scherm in beslag nemen. Hiermee kunt u gebieden maken die onafhankelijk door scrollen kunnen worden gebruikt.

3. Apps voor één pagina

De toekomst van web-apps zal betrekking hebben op staten in plaats van geheel nieuwe pagina's en aantonen dat dit een van onze belangrijkste doelen voor Foundation for Apps is geweest - Brandon Arnold, hoofdontwerp

Met Foundation for Apps zien we een verschuiving in de manier waarop we inhoud aan onze gebruikers presenteren. In plaats van de pagina alleen opnieuw te laden na elke actie die gebruikers ondernemen, kan de inhoud worden weergegeven of verborgen, afhankelijk van wat de gebruiker wil zien.

Deze aanpak zorgt ervoor dat uw webapp meer op een native app lijkt; gebruikers krijgen hun inhoud sneller en ze weten intuïtief waar het vandaan komt. Het is aan u om te beslissen welke inhoud relevant is, wat moet worden getoond en wat moet worden verwijderd wanneer dit niet nodig is.

4. Sjablonen AngularJS-routes

Foundation for Apps zal Angular als zijn MVC-raamwerk gebruiken om het zware werk te doen. Laten we kijken hoe:

Met Foundation for Apps proberen we ook Angular toegankelijk te maken voor ontwerpers en ontwikkelaars: Brandon Arnold, Lead Design

Wanneer u Foundation for Apps voor uw nieuwe projecten gebruikt, hoeft u eigenlijk helemaal niets over Angular te weten. Om zaken als het gebruik van verschillende animaties en het definiëren van uw URL's van uw sjablonen te vereenvoudigen, maakt Foundation for Apps gebruik van UI-routering. U kunt uw URL en animaties in uw HTML-bestand definiëren en met behulp van een beetje Gulp-magie worden de sjabloontags geparseerd en worden de juiste codebrokken aan uw sjabloon toegevoegd.

Op deze manier kunt u een web-app met één pagina maken zonder zelfs maar één regel JavaScript aan te raken. Dit is bijvoorbeeld wat u in uw sjabloon schrijft:

--- naam: home url: / home animationIn: bounceIn animationOut: bounceOut ---

En dit is wat alle Foundation for Apps-magie voor u uitzoekt:

var routerApp = angular.module ('routerApp', ['ui.router']); routerApp.config (functie ($ stateProvider, $ urlRouterProvider) $ urlRouterProvider.otherwise ('/ home'); $ stateProvider .state ('home', url: '/ url', templateUrl: 'partial-home.html' , controller: 'PageController', // standaardcontrollergegevens: vars: name: home, url: / home, animationIn: bounceIn, animationOut: bounceOut););

Dit bespaart u niet alleen een hoop tijd wanneer u een prototype of uw eigenlijke product ontwikkelt, het maakt zelfs het bouwen van een web-app toegankelijk voor mensen die niet vertrouwd zijn met complexere front-end ontwikkeling..

5. Component-gestuurde code

In plaats van code te gebruiken

, Foundation for Apps zal hoekige richtlijnen gebruiken om dingen rond te draaien en er iets gemakkelijks van te maken. In plaats daarvan schrijf je zoiets als , om hetzelfde resultaat te krijgen.

Dit zorgt voor een schonere markup, wat zorgt voor een betere consistentie in uw workflow en die van uw team. In plaats van erover na te denken of een tag een moet zijn hoofd, een footer, een div of a sectie bijvoorbeeld, je schrijft gewoon . Makkelijk goed?

Bovendien dit Component-gestuurde code, maakt het mogelijk om Motion UI-klassen te integreren om animaties op te bouwen en toe te passen op uw verschillende weergaven.

Andere mogelijkheden

Bekijk enkele van de andere functies die in Foundation for Apps zullen worden opgenomen:

• Off-canvas
• panels
• Blokkeer lijsten
• Pop-upmenu's
• Pictogrambalk
• modals
• Waarschuwingen
• vormen
• uitwisselen

Dingen die we kunnen verwachten

Ten eerste kunnen we verwachten dat Foundation for Apps het volgende spannende en nuttige deel van de Foundation-familie is. De jongens van ZURB zijn op de hoogte van elke nieuwe technologie en trend en met hun jarenlange ervaring in productontwerp leveren ze opnieuw een geweldig product voor de gemeenschap om te gebruiken. Net als Stichting voor Sites en de binnenkort te benoemen Stichting voor e-mail, Foundation for Apps is volledig open source en zal door ZURB en de gemeenschap voortdurend worden geoptimaliseerd om op meerdere apparaten te werken.

De toekomst van stichting

Met Foundation for Apps coming soon en Ink being Foundation for Email, zien we het begin van een reeks tools die past bij de behoefte aan verschillende banen die we hebben als webdesigners en ontwikkelaars. Binnenkort zullen we het hebben over deze drie verschillende producten:

• Stichting voor Sites: We kennen deze allemaal! Fundament voor sites is en blijft altijd geweldig voor content- en marketingsites. Het is een tool voor snelle prototyping en een echt geweldig framework voor het bouwen van mobiele eerste, responsieve websites.
• Stichting voor Apps: Het nieuwe kind in de buurt, dat voldoet aan onze behoeften voor de aankomende trends van web-apps die het internet overnemen! Met zijn flexibele rooster, krachtige animaties en ontwerp met één pagina biedt Foundation for Apps de tools die nodig zijn voor het (snel) bouwen en prototypen van uw web-apps.
• Stichting voor e-mail: Responsieve e-mail is altijd al een enorme hoofdpijn geweest. Met Foundation for Email biedt ZURB u de tools voor een goede basis om e-mailsjablonen te bouwen.

Stichting voor Apps zal zijn gelanceerd op dinsdag 2 december, let er dus op!

Conclusie

Echt, Foundation wordt een alles-in-één oplossing voor uw front-end webontwikkeling. Met Foundation for Apps kunnen ontwerpers en ontwikkelaars eenvoudig prototypes met meerdere weergaven maken, compleet met gedeeltelijke verwisseling en animaties, ideaal voor het opzetten van demo's om indruk te maken op uw team en klanten. 

Middelen

• Foundation for Apps demo screencast
  
• Foundation: A New Grid
  
• Foundation: Motion UI is de nieuwe flat
  
• Foundation: Single-Page Apps met AngularJS
  
• Stichting voor Sites
• Foundation for Apps (github)
  
• Stichting voor e-mail

Web ontwerp