Share
Voor veel internetmensen is het elke keer opnieuw ontwikkelen van een project onderdeel van het werk; het is vaak lastig om een herbruikbare codebase op te bouwen wanneer elk project anders is. Meer ervaren ontwikkelaars hebben mogelijk de tijd genomen om een of andere vorm van front-end framework op te bouwen, maar dit op de juiste manier doen kan een serieuze onderneming zijn, om nog maar te zwijgen van de noodzaak om dingen up-to-date te houden en in overeenstemming te zijn met de beste werkwijzen..
Als we naar de wensen en behoeften van de codegenerator kijken, is het duidelijk dat ontwikkelaars iets willen dat open source, stabiel, flexibel en (het belangrijkste) goed gedocumenteerd is. Afhankelijk van de grootte van het project is een CSS-rastersysteem misschien genoeg, maar zou het niet geweldig zijn als je de mogelijkheid zou hebben om functionaliteit toe te voegen en te verwijderen als je dat zou willen? Nou, in deze sessie zullen we kijken naar een aanpasbaar front-end framework genaamd Foundation.
Het afdekken van een raamwerk zoals Stichting moet goed en in detail worden gedaan, dus de komende weken zal ik alles behandelen, van de start, custom builds, tot aan de ins en outs van de radertjes die dit specifieke kader aandrijven. Het belangrijkste is dat ik u zal laten zien hoe het u kan helpen bij uw toekomstige webinspanningen.
Foundation is een front-end framework dat bestaat uit vele tools die nuttig zijn voor het maken van responsieve, mobiele eerste websites. Primary is gebouwd met HTML, CSS en jQuery en maakt gebruik van moderne technologieën en werkwijzen, maar verslechtert al in IE8. Hoewel het framework het meest wordt gebruikt door HTML- en CSS-ontwikkelaars, hebt u de mogelijkheid om verder te gaan met het gebruik van Foundation in samenwerking met Sass and Rails.
Het bedrijf achter Stichting ZURB heeft een strak geregisseerde toolset gecreëerd voor ontwikkelaars en ontwerpers. Elke module heeft een rol te spelen in het kader als geheel, maar kan tegelijkertijd volledig onafhankelijk van centraal leiderschap werken. Wat dit dan betekent, is dat je functies in je huidige project kunt mixen en matchen, of een enkele functie kunt nemen en deze aan een ouder project kunt toevoegen. Je kunt het zelfs als een functie toevoegen aan een ander kader.
Kort samengevat is dit een modern raamwerk dat goed is gebouwd en geschikt is voor een grote verscheidenheid aan gebruikers. Het biedt een goed aantal functies, het is gratis en er is een groeiende gemeenschap van mensen om je te helpen als je vastloopt.
Tegenwoordig is het voor ontwikkelaars gebruikelijk om gebruik te maken van frameworks (waarom zou je het wiel opnieuw uitvinden?) Vaak zijn veel van deze frameworks opgeblazen door de makers die proberen om op ad-hocbasis elke mogelijkheid te dekken. Wat ooit het leven is begonnen als een gladde, lichtgewicht tool, kan uitgroeien tot honderd http-verzoeken en een koor om te demonteren afhankelijk van je behoeften.
Foundation bevat een reeks functies en functies. Het is gebouwd op een op percentages gebaseerd vloeistofrooster, wordt geleverd met een jQuery-schuifregelaar, een lightbox-plug-in, heeft alle denkbare HTML-elementen aangenaam gestyled en is gebouwd met het oog op mobiel-eerst. U kunt aangepaste formulieren maken die jQuery gebruiken om lastige invoerelementen, vervolgkeuzemenu's en selectievakjes opnieuw in te schatten, wat betekent dat u deze gemakkelijk kunt opmaken. Het framework biedt ook opties voor het instellen van aangepaste mobiele lay-outs door gebruik te maken van het mobiele netwerk, waardoor u de flexibiliteit krijgt om uw project echt te personaliseren voor mobiele en desktopgebruikers..
Zurb heeft in versie 4 veel kernfunctionaliteit opnieuw opgebouwd om redelijk brede gebruikscasussen te dekken. De code lijkt schoon te zijn gehouden en becommentarieerd waar deze moet zijn. Het toevoegen en verwijderen van functies is eenvoudig en maakt het aanpassen van uw build aan uw vereisten mogelijk.
Gebruikers met versie 3 kunnen ook een migratiedocument volgen om hun bestaande installaties te upgraden, of, als ze dat willen, versie 3 als ZURB-host blijven gebruiken de vorige versie voor degenen die nog niet klaar zijn om de sprong naar v4 te maken.
Zurb heeft een downloadpagina waarmee u een vooraf ingevuld formulier kunt aanpassen om een aangepaste build te genereren die perfect is afgestemd op uw vereisten. Stel dat u alleen een CSS-raster wilt? Gedaan. Schakel alles uit behalve "raster" en typ uw projectmetingen in. Misschien wilt u elementaire gebruikersinterface-elementen? Gedaan. Controleer nogmaals de benodigde UI-elementen, zoals labels en knoppen, en dat is precies wat u krijgt. Je kunt zelfs alles wat ze aanbieden (ze worden hun aanrecht genoemd) met één klik vastpakken. Het maakt aangepaste standaard CSS-kleuren en zelfs sleutelgroottes zoals max-width mogelijk.
Hoewel dit handig is, is het nog steeds slechts een vorm en ik denk dat het kan worden verbeterd. Idealiter zou ik graag een gefaseerd proces zien met misschien een visuele weergave van de HTML-sjabloon. Omdat v4 em als meeteenheid gebruikt en em is gebaseerd op de hoofdlettertype-afmeting, lijkt het intuïtief om een px-to-em-calculator op te nemen, gewoon om het een beetje eenvoudiger te maken.
Ga naar http://foundation.zurb.com en klik op de grote downloadknop. Je krijgt veel opties te zien om je framework aan te passen. Schakel alle functies uit die u niet nodig hebt, plaats uw primaire, secundaire, waarschuwings-, succes- en lettertypekleuren. Combineer dit met breekpuntbreedtes, maximale breedtes, dakgoten en zelfs een keuze uit het aantal kolommen dat u wilt.
Nadat u hebt gekeken naar de belangrijkste voordelen die Foundation biedt en de aangepaste build-download doorloopt, moet u een gepersonaliseerde build in uw downloadmap hebben staan. Speel ermee, probeer dingen uit en als je vastloopt kijk dan eens naar de documenten of gooi je vragen in de commentaar-thread hieronder.
In het volgende deel van deze sessie gebruiken we het rastersysteem, duiken we in de navigatie, tabbladen, knoppen en een paar andere belangrijke UI-elementen. We zullen het ook hebben over enkele hulpmiddelen die uw ontwikkeling verder kunnen helpen wanneer u Foundation gebruikt als basis voor uw projecten.
Accentsconagua